vue基本函数

Vue 实例选项

el ："#id" 挂载的元素，视图
data：{ name:“zs” }数据
methods：{ fn:function(){ 函数体 } } 函数或者方法，函数里面的this指向的是Vue实例对象

MVVM

M: 模型
V: 视图
VM：视图模型

指令
指令的本质就是自定义属性 Vue 里面所有的指令都以 v- 开头
v-cload 阻止闪动（页面初加载时会短暂的显示原文本{{ … }}）
v-text 指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
v-html 用于将HTML片段填充到标签中，没有闪动问题，但是可能有安全问题，最好是在使用本网站数据时使用，使用第三方数据时尽量不要用。
v-pre 用于显示原始信息
v-once 只编译一次，之后数据的改动不会影响到视图
v-model 双向数据绑定，从数据到视图（Object.defineProperty == 对象定义属性），从视图到数据（事件监听）

事件绑定
v-on:
多用简写 @ 代码少还不用写冒号

传参：@click=" handle( 1,2, e v e n t ) " , event ) " ,event)",event 代表实践对象，写法固定

属性绑定

v-bind:
简写直接就是一个冒号 " : "

事件修饰符

@click.stop 阻止事件冒泡
@click.prevent 阻止元素默认事件

按键修饰符

@keyup.enter 回车按键修饰符

Vue.config.keyCodes.按键变量名 = 88 自定义全局按键修饰符

style 样式绑定

:style="{ border: borderStyle, width: widthStyle, height: heightStyle }"( 这个对象形式的数据可以在Vue实例对象的data 中设置一个对象类型的数据然后直接使用 )

分支

在标签里面书写
v-if
v-else-if
v-else

循环
v-for
数组
v-for="(item, index) in arr"
v-for=“item in arr”
对象
v-for="(value, key, index) in obj"
v-for="(value, key) in obj"
v-for=“value in obj”
循环之后写上 :key=‘item.id’ 参数里有id就写上id，没有就写一个关键的属性，可以提高代码效率

控制显示隐藏样式
v-show 与 v-if 都可以控制元素的显示隐藏
区别在于 v-show 就算为 false ，元素在页面中的dom结构也会继续存在，而if 判断为 false 就会直接将dom 结构移除，v-show 只是控制样式，v-if 是直接控制dom 结构 ，相比较而言，v-show 的性能要比 v-if 好一些。

表单处理

v-model 可以实现双向数据绑定

修饰符

v-model.number 将视图上输入的字符串类型内容转化为数字类型
v-model.trim 自动过滤掉输入的首尾空格
v-model.lazy 在输入框中，v-model 默认是同步数据，使用 .lazy 会转变为在change 事件中同步 ，也就是在失去焦点 或者 按下回车键时才更新

计算属性

computed:{
属性名称：处理函数
}
特点：
计算属性的值是通过处理函数的返回值来决定的
依赖于数据进行缓存
计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存

侦听器
watch:{
数据属性名：处理函数
}
数据属性名就是vue实例中的data 里面的属性名称，侦听器就是基于data 里面的数据来运作的。当被侦听的数据发生变化时就会触发这个函数。
特点：
侦听器的名字必须与data中的属性名一致
对比计算属性：侦听器只针对数据发生变化时操作，不需要得到计算结果，计算属性则会获取一个返回值。就是说，需要计算出结果时就可以用计算属性，只监听数据变化用侦听器。
侦听器和blur事件的区别：侦听器只有当数据真正发生变化时才会触发函数，而blur不管数据有没有发生变化都会触发事件处理函数