vue基本指令

前端框架3架马车

1. anguler 谷歌 m(model模型)v(view视图)c(controller控制器) 数据双向绑定
2. react facebook(非死不可) view视图层的框架 虚拟dom
3. vue 尤雨溪 mvvm mv* 数据双向绑定+虚拟dom

vue是什么？

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

vue的优势

1. 入门简单
2. 运行效率高（虚拟dom，减少dom操作）
3. 开发效率高（组件化开发）
4. 将开发者的精力从操作dom解放出来，主要关注数据的变化
5. 生态比较完善

安装

• 下载vue.js文件并引入
• 使用CDN资源

起步

• 引入vue.js文件
• 创建一个vue实例
• 把vue实例挂载到一个dom节点

数据绑定

• 将实例对象的数据渲染到视图中（view） -> 数据绑定
• 通过mustache语法（双大括号）将数据渲染到视图中
• 双大括号插值法可以写变量或表达式，不能放语句
• 双大括号插值法可以输出所有数据类型，但null和undefiend不会被显示

指令

• 指令 (Directives) 是带有 v- 前缀的特殊属性(html的属性)
• 其实就是标签的自定义属性
• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 指令后面的值可以是变量或表达式

v-text

• 更新元素的innerText
• 和原生dom的innerText一样的特征，不能解析标签

v-html

• 更新元素的innerHTML
• 和原生dom的innerHTML一样的特征，可以解析标签

数据响应式

• 数据变则视图变
• 将开发者的精力从操作dom解放出来，主要关注数据的变化

v-if

• 用于条件性地渲染一块内容
• v-if后面的值为true时渲染对应的元素
• v-if后面的值为false时不会被渲染出来（不存在dom树中）
• 切换性能开销比较大

v-else-if

• 用于条件性地渲染一块内容
• 用于v-if后面
• 可以连续使用

v-else

• 用于v-if或v-else-if后面

v-show

• 用于条件性地显示一块内容
• v-show后面的值为true时显示对应的元素
• v-show后面的值为false时隐藏元素（存在dom树中）
• 初始性能开销比较大

v-on

• 用于监听dom元素的事件
• v-on:事件名，事件名和原生js一样
• v-on:click=“事件处理函数”
• 事件处理函数写在配置项的methods中
• 事件处理函数中默认参数为：event事件对象
• 如果有其他参数，需要通过$event来获取事件对象
• 简写形式 @click === v-on:click

v-bind

• 用于元素的属性绑定
• 如：width height src href style class …
• 属性绑定可以让元素的属性值为变量或表达式
• v-bind:src=“url”
• 简写形式 :src=“url” === v-bind:src=“url”

v-for

• 基于数组循环生成对应的一组元素
• v-for=“每一项数据 in/of 数据源”
• v-for可以循环数组、数字、对象、字符串

v-model

• 数据双向绑定
• 用于绑定表单元素的value属性
• 表单元素的value改变， data数据也跟着改变
• 相当于 v-bind:value + v-on:input 组合效果

class绑定

• v-bind:class属性绑定的值可以变量或表达式
• v-bind:class属性绑定的值还可以对象或数组
• v-bind:class也可以和原来的class共存

style绑定

• v-bind:style属性绑定的值可以变量或表达式
• v-bind:style属性绑定的值还可以对象或数组
• v-bind:style也可以和原来的style共存

自定义指令

• 内置指令有v-前缀，vue还允许自定义指令
• 全局自定义指令和局部自定义指令

全局自定义指令

• Vue.directive(‘指令名’,{配置项})
• 必须在Vue实例之前注册
• 全局自定义指令可以在所有vue实例中使用

局部自定义指令

• 在实例的配置项中的directives
• 局部自定义指令 在哪注册即在哪使用

组件

• 组件是继承自vue实例
• 组件的目的 可复用
• 组件名 作为自定义标签使用
• 有全局组件和局部组件

注册全局组件

• Vue.component(‘组件名’,{配置项})
• 注册全局组件必须在vue实例之前
• 全局组件可以在所有vue实例中使用
• 组件模板只能有一个根元素

注册局部组件

• 在实例的配置项中的components中注册
• 在哪注册则在哪使用
• 组件模板只能有一个根元素

组件嵌套

• 全局组件嵌套
  全局组件嵌套没有固定关系，嵌套关系由书写方式决定
• 局部组件嵌套
  局部组件的嵌套关系在注册组件时已经决定了嵌套关系

组件的配置项-template

• template配置项，dom结构比较简单时，使用字符串模板
• template配置项，dom结构比较复杂时，使用template标签模板e
• template模板只能有一个根元素
• 使用外部template标签模板，template配置项的值为模板标签的id选择器

组件的配置项-data

• 组件内部不能直接使用实例的数据
• vue实例的data是一个对象
• 组件的data是一个函数，函数返回一个对象

组件的配置项-其他

• 其他配置项和vue实例的配置项一样
• 比如：methods directives components watch computed …

组件通信

• 父子组件通信（props自定义属性）
• 子父组件通信（$emit自定义事件）