vue是什么？

vue是用于快捷构建用户界面的Javascript框架。

vue的特性

数据驱动视图

vue会监听数据变化，当数据发生变化时，会自动渲染页面。

数据驱动视图是单向的数据绑定。

双向数据绑定

不再需要手动操作DOM来获取元素的最新值了，在表单提交的数据会自动提交给元素。

将标签与变量进行了绑定。

MVVM

mvvm是vue实现数据驱动视图和双向数据绑定的核心原理。

mvvm是指Model模型、View视图、ViewModel视图模型。

Model是当前渲染所依赖的数据源。
View是当前页面所渲染的DOM树。
ViewModel是vue实例，是MVVM的核心。

ViewModel是连接Model和View的桥梁。

当数据发送变化时，ViewModel会监听到变化并自动更新View。
当视图中表单值发生变化时，ViewModel会自动更新Model。

vue的基本使用

导入vue.js的脚本文件。

1	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

声明vue的控制域，即声明一个被控制的DOM区域。

1 2	<!-- 01 设置vue的控制域 --> <div id="app"></div>

创建vue实例对象。

<script>
    //02 创建vue实例对象
    const vm=new Vue({
        // el:用于指定控制域，值为css选择器。
        el:'#app',
        // data:用于设置数据。
        data:{}
    });
</script>

vue语法

指令

v-text

更新元素的 textContent，即：将数据对象的值赋值给标签，类似插值。

<!-- 01 设置vue的控制域 -->
<div id="app">
    <div>{{vTextCmd}}</div>
</div>
<script>
    //02 创建vue实例对象
    const vm=new Vue({
        // el:用于指定控制域，值为css选择器。
        el:'#app',
        // data:用于设置数据。
        data:{
            vTextCmd:"我是v-text",
        }
    });
</script>

注意

使用v-text会覆盖原本的内容，如果需要更新部分内容，建议使用插值表达式。

v-html

更新元素的 innerHTML。详情见下文：插值-原始HTML。

v-show

根据表达式之真假值，切换元素的 display属性。无论表达式的真假，该元素都将被渲染在DOM树中。

当条件变化时该指令触发过渡效果。

1	<div v-show="true">v-show条件渲染</div>

v-if

根据表达式之真值，来有条件地渲染元素。当条件为真时，才会被渲染到DOM树中。

在切换时元素及它的数据绑定 / 组件被销毁并重建。

如果元素是 <template>，将提取出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

1	<div v-if="true">v-if条件渲染</div>

v-else

前一兄弟元素必须有 v-if 或 v-else-if。

1 2	<div v-if="false">v-if条件渲染</div> <div v-else>v-else条件渲染</div>

v-else-if

前一兄弟元素必须有 v-if 或 v-else-if。

1 2	<div v-if="false">v-if条件渲染</div> <div v-else-if='true'>v-else-if条件渲染</div>

v-for

表达式为：Array | Object | number | string | Iterable (2.6 新增)对象。

基于源数据多次渲染元素或模板块。语法 别名 in 表达式，需要为当前遍历的元素提供别名。

1	<div v-for="item in items"></div>

也可以为数组索引指定别名 (或者用于对象的键)：

1
2
3

<div v-for="(item, index) in items">数组</div>
<div v-for="(val, key) in object">对象</div>
<div v-for="(val, name, index) in object">对象</div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性key 来提供一个排序提示：

1	<div v-for="item in items" :key="item.id"> {{ item.text }}</div>

key

key的作用相当于是数据库中的主键，所以key的值不能重复。 key的设置能提高性能、防止列表状态紊乱。使用index作为key没有意义。

v-on

绑定事件监听器。类似：addEventListner。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event属性，如：v-on:click="handle('ok', $event)"。默认情况下，如果是使用方法名，会默认传入$event，如：v-on:click="handle"。

缩写：@。

事件：event。

修饰符：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-bind

动态地绑定一个或多个属性，或一个组件 prop 到表达式。

缩写：:。

修饰符：

.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

1	<input type="text" v-bind:placeholder="ph">

v-model <!>

在表单控件或者组件上创建双向绑定。

用于快速获取和设置表单中的数据，不用操作DOM。

1	<input type="text" v-model="value">

插值

将 DOM 绑定至底层 Vue 实例的数据，即：用于在html代码中，获取data中设置的数据。

使用“Mustache”语法 双大括号{{}}的插值。

默认情况下，当数据对象中的值发生变化时，插值处的数据也会发生变化。

一次性插值

通过使用 v-once 指令，让数据改变时，插值处的内容不会更新。

仅渲染元素和组件一次，并跳过之后的更新。在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

1	<span v-once>这个将不会改变: {{ msg }}</span>

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

1	<div v-html="rawHtml">{{rawHtml}}</div>

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }} 

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

注意

每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

选项/声明周期钩子

this变量

所有生命周期钩子的 this 上下文将自动绑定至实例中，因此你可以访问 data、computed 和 methods。

待续…