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:事件名=”表达式|方法名|方法名(参数)”
事件参数
<!-- 无括号, 自动向方法传递事件参数event -->
<!-- 有括号无实参, 不会向方法传递任何参数 -->
<!-- 推荐$event参数放在所在参数之后 -->
事件修饰符
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 就可以实现对对象的深度监听;
直接监听对象--代码如下:
监听对象下某个属性--代码如下:

6.filter
即过滤器,通过管道号|调用 的格式化输出的方法,用法如下:
4.mixin(混入)
什么是mixin: 封装了组件可以复用的实例选项(data, methods,computed,watch),实现方法: