Vue基本指令
v-html: 会把HTML字符串渲染成标签
v-text: 会把HTML标签渲染成字符串
v-if v-else: 必须用在相邻的兄弟元素
v-if:通过是否渲染元素来决定显示;
v-show: 通过display属性来决定
注:如果需要频繁显示切换,用v-show
v-for : 用 in 或者 of 都可以遍历 数组,对象,字符串,具体数字
数组响应式更新需要用到数组的api修改,直接修改DOM元素不会响应式更新
v-pre: 在模板中跳过vue的编译,直接输出原始值。
<div v-pre>{{msg}}</div> - - - 网页中显示 {{msg}}
v-cloak: 存在于vue实例化之前,实例化之后自动消失(可利用它让元素一开始隐藏,有vue实例化之后显示)
CSS: [v-cloak] { display:none; } - - - 让含有v-cloak属性的vue实例化之前的元素隐藏
HTML: <div id="app" v-cloak> {{str}} </div>
v-once: 只进行一次DOM渲染
注:v-pre v-cloak v-once 后面都不用跟表达式,直接写入标签
v-bind: 绑定任意属性,包括自定义属性 v-bind:src 可简写为 : src
class 和 style 绑定:
Style: <div :style="Bian"></div> - - - 直接使用Bian变量
<div :style="{ width: divWidth }"></div> - - - 绑定一个对象
Class: <div :class=" active ? 'oneClass' : '' " ></div> - - - 三元运算符绑定
<div :class="[one, two, 'three' ]" ></div> - - - 绑定数组
<div :class="[one, two, {thr:three} ]" ></div> - - - 数组里嵌套对象
<div :class="[one, two]" class='three'></div> - - - 绑定class和原生class共存
v-model:表单 、 及 元素上创建双向数据绑定 。负责监听用户的输入事件以更新数据 ,触发后将输入框的值与数据进行同步
使用checkbox时:
1.v-model里的值在data赋值 false or true 实现同意阅读 继续下一步
2.v-model里的值在data赋值 数组 实现多选
事件修饰符:lazy:输入框事件转变为使用 change 事件进行同步
number:将用户的输入值转为数值类型
trim:自动过滤用户输入的首尾空白字符
methods: 方法绑定事件的时候
- 不加小括号,函数第一个形参默认事件对象
- 加小括号,括号内写:$event - >函数接收默认事件对象
变异方法:Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
替换数组:filter()、concat() 和 slice()
computed: 计算属性是一个对象,在里面写方法,方法名直接使用,它的值就是这个方法的返回值
计算属性有 -get 和 -set 方法 ,set( val) val - 就是当前方法所处对象的值
计算属性有缓存依赖
使用方法不传递参数 -》 方法本身有参数,默认为原生对象event
使用方法传递参数,需传递$event -》 方法参数才是原生对象event
watch:watch是监听器,只要数据被修改了就会重新渲染
watch一般用来监听某个值的变化然后进行一些操作,可能并不需要得到新的值
watch里的方法有两个默认参数,第一个参数:新值 ,第二个参数:旧值
v-on:事件修饰符:
- .stop - 阻止冒泡
- .prevent - 阻止默认事件
- .capture - 当元素发生冒泡时 ,谁有该事件修饰符,就先触发谁。
- .self - 只当事件在该元素本身 (比如不是子元素) 触发时触发回调
- .once - 只触发一次回调
- .passive - 该修饰符表示就是设置{passive:true},表示处理事件函数中不会调用preventDefault函数,就会减少了额外的监听,从而提高了性能;所以不能和.prevent修饰符一同使用,否则浏览器会报错。
- {keyCode | keyAlias} - 监听组件根元素的原生事件