Vue.JS快速上手（指令和实例方法）

1.声明式渲染

首先，我们要知道Vue是声明式渲染，那啥是声明式渲染，我们只需要告诉程序我们想要什么结果，其他的交给程序来做。与声明式渲染相对的是命令式渲染，即命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行。

比如Vue通过插值表达式实现声明式渲染；功能：向视图输出内容，语法{{常量|变量|表达式|函数}}。

2. vue指令

Vue提供的以v-打头的标签属性, 控制指令所属的标签(行为/外观)，Vue的指令分为内置指令和自定义指令: Vue.directive

2.1 vue.js常用内置指令

1.内容指令：

v-text: 即innerText ； v-html:即innerHTML ；用v-cloak:解决插值表达式的延迟加载

2.属性指令：

v-bind: 给元素属性绑定动态值；用法: v-bind:DOM属性=常量|变量|表达式|函数

3.样式指令:

行内样式：

类样式：

4.事件绑定指令

基本语法 : v-on:事件名=”表达式|方法名|方法名(参数)”

事件参数

事件修饰符

1.控制事件行为（作用）

2.常用的事件修饰符

prevent: 阻止默认事件

stop: 阻止冒泡

self: 只当事件在该元素本身触发时触发回调

once: 事件只触发一次

3.自定义修饰符

Vue.config.keyCodes.键名 = ascii码;

5.结构指令

v-if与v-show

v-for指令

6.双向绑定指令

单向绑定：

M –> V : 插值表达式|属性绑定

V -> M: 事件参数

双向绑定：

M <-> V: v-model

2.2 directives(自定义指令)

指令: 标签的自定属性，以v-开头，控制指令所在标签外观/行为

类型：内置指令和自定义

自定义指令:

3. Vue.js 实例选项

1.el

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标(绑定目录)。可以是 CSS 选择器，也可以是一个 HTMLElement 实例 ， el实现vue实例(Model)与视图绑定(MV)

2.data

Vue 实例的数据对象, 数对象中的成员可以在视图中直接访问, 这里数据支持响应式 , 如果在vue实例成员（mthods/computed....）中访问需要通过this, data可以存储任意类型的值

3.methods

Vue实例方法，可以被视图直接访问或通过事件来调用.

4.computed

计算属性, 对vue实例的data属性再次封装, 相比方法的实现，性能会更好.

5.watch

监听vue实例属性的变化. 用法:

【注】

监听的是属性，如果属性为基本类型，直接可以监听，但如果监听是对象类型，需要特殊处理

当对对象重新赋值，才会触发监听器, 对象的成员发生变化，并不会触发watch

若要监听对象的成员，需要通过对象名.成员名进行监听

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

直接监听对象--代码如下：

监听对象下某个属性--代码如下：

2.利用computed配合watch实现单个属性的深度监听；代码如下：

6.filter

即过滤器，通过管道号|调用的格式化输出的方法，用法如下：

4.mixin(混入)

什么是mixin: 封装了组件可以复用的实例选项(data, methods,computed,watch)，实现方法：