Vue学习笔记（二）
一、指令
1.v-cloak指令
作用： 防止页面加载时出现闪烁问题（当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码–>{{ msg }}等。此时我们可以使用 v-cloak 指令+css来解决这一问题。），此指令最重要的特点就是 在页面渲染完成后，c-cloak 会被自动移除。
闪烁问题
代码演示：
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签并且让其隐藏
*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 2、 让带有插值 语法的 添加 v-cloak 属性
在 数据渲染完成之后，v-cloak 属性会被自动去除，
v-cloak一旦移除 属性选择器就选择不到该标签
也就是对应的标签会变为可见
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
});
</script>
2.v-text指令
作用： v-text指令用于往标签中填充数据，跟插值表达式类似，但不会出现闪烁问题。指令中的数据为单向绑定，Vue对象中的数据值发生改变，指令插值也会发生改变，但指令插值发生改变，并不会影响实例对象中的数据值。可以通过该标签输出html标签，但输出的形式是纯文本，不会被浏览器解析，v-html指令输出的值会被浏览器解析。
代码演示：
<div id="app">
<!--
注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
3.v-pre指令
作用： 跟< pre>标签的作用类似，对指令所在标签包含的内容不进行编译渲染，直接显示原始信息。一些静态的不需要编译的内容可以用这个指令加快渲染速度。
代码演示：
<span v-pre>{{ this will not be compiled }}</span>
<!-- 显示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
4.v-once指令
作用： 只进行一次插值渲染，即实例中的数据改变时，插值处的内容不会发生变化，第一次插值是什么，之后就一直是什么。
代码演示：
<!-- 即使data里面定义了msg 并且后期我们修改了msg 但仍显示的是第一次data里面存储的数据 即 Hello -->
<span v-once>{{ msg}}</span>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello'
}
});
</script>
5.v-on指令（补充）
作用： 在使用该指令时，可以向函数中传入参数。有两种调用形式：函数名：handle 和
函数名（）：handle()。第一种调用默认会传递事件对象作为事件函数的参数。第二种调用 事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event
代码演示：
<div id="app">
<div>{{num}}</div>
<div>
<!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
<button v-on:click='handle1'>点击1</button>
<!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
并且事件对象的名称必须是$event
-->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
事件修饰符：
作用： 在v-on指令加上以 . 开头的指令后缀，用来对事件进行修饰，有.stop、.prevent、.self等修饰符。修饰符可以串联同时使用，但是串联的顺序很重要，不同的串联顺序可能会产生不同的结果。
例如： v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
代码演示：
<!-- 阻止单击事件继续传播，即阻止冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
按键修饰符：
作用： v-on 在监听键盘事件时添加按键修饰符，即设置只有按下键盘上某个键的时候，才会触发调用某个函数。按键修饰符也可以串联使用，即按下其中任意一个对应的按键，就可以触发。按键修饰符主要作用是代替不容易记住的按键码(keyCode)。keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件。
键盘的每个按键,都有相应的按键码(keyCode)，如下图。
常用的按键修饰符有：
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右
代码演示：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--当点击enter或者space时 时调用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--当点击enter或者space时 时调用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
自定义按键修饰符别名：
作用： 在Vue中可以通过config.keyCodes对键盘上的按键进行自定义按键修饰符别名，可以把常用的按键定义别名，方便记忆并调用。一般定义在Vue实例之前。
代码演示：
<div id="app">
<!-- 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 -->
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5！');
}
}
});
</script>
6.v-show和v-if的区别
v-show本质就是标签display设置为none，控制元素隐藏或者显示，v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素，v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件。
所以v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
7.v-for和v-if
不推荐同时使用v-if和v-for，因为当两者同时使用时，v-for比v-if的优先级更高。可能会出现一些意想不到的bug。
使用v-for遍历对象时，对象中的每一条属性都对应着一行，即循环一次，渲染一次标签。遍历数组时，数组中每一项对应着一行。
8.v-for跟key
作用： key来给每个节点做一个唯一的标识（通常使用数据的id或者index），主要作用是为了Vue能高效的更新虚拟DOM，可以节约很多系统开销，提高Vue的性能。
9.自定义指令
作用：当Vue内置的指令无法满足我们的需求的时候，Vue允许我们自定义指令。自定义指令包括全局指令和局部指令。使用自定义的指令，只需在要使用的元素中，加上’v-‘的前缀形成类似于内部指令’v-if’，'v-text’的形式，定义的时候不需要加 v- 。
用 Vue.directive 来注册全局指令：
<div id="app">
<!-- 使用自定义指令时 需要加上 v- 前缀 -->
<input type="text" v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus 使某个dom元素获得焦点
// 声明自定义指令时，名字为 focus 不带 v- 前缀
Vue.directive('focus', {
// bind 函数在指令第一次绑定到元素时调用，只能调用一次，可以用来进行一次性的初始化设置
bind: function (el) {
// el为绑定此指令的 dom 元素 focus 获得焦点
el.focus();
}
});
new Vue({
el:'#app'
});
</script>
Vue.directive 注册全局指令时，可以携带参数
<div id="app">
<input type="text" v-color='color'>
</div>
<script type="text/javascript">
Vue.directive('color', function(el, binding){
// el 为使用当前自定义指令的DOM元素
// binding 为自定义的函数形参 通过自定义属性传递过来的值 存在 binding.value 里面
// 形参binding里存放的是一个对象 因此需要通过 binding.value来获取参数值
// 根据指令的参数设置背景色
el.style.backgroundColor = binding.value;
});
var vm = new Vue({
el: '#app',
data: {
color: 'blue'
}
});
</script>
自定义注册局部指令
局部指令的用法与全局指令相同，只是在定义的时候，是在Vue实例里面通过 directives 来定义，而且使用范围局限在当前Vue实例中，当定义的局部指令和全局指令发生同名时，Vue会使用局部指令。
<div>
<input type="text" v-color='msg'>
<input type="text" v-focus>
</div>
<script type="text/javascript">
/*
自定义指令-局部指令
*/
var vm = new Vue({
el: '#app',
data: {
color: 'red'
},
//局部指令，需要定义在 directives 的选项
directives: {
color: {
bind: function(el, binding){
el.style.backgroundColor = binding.value;
}
},
focus: {
bind: function(el) {
el.focus();
}
}
}
});
</script>
后续补充：
① bind 函数只会在指令第一次绑定到元素时调用，当DOM发生更新时 bind 函数不会被触发，只适合做一次性的初始化设置。而 updata 函数会在每次 DOM 更新时调用，所以如果自定义指令绑定的是一个变量，那么最好同时使用这两个函数。
② 如果bind 和 updata 函数中的逻辑完全相同，那么对象形式的自定义指令可以简写成函数格式：
directive: {
// 在 bind 和 update 逻辑相同时 ，可简写为一个函数
color(el,binding) {
el.style.color = binding.value
}
}
二、表单
1.获取单选框中的值
可以通过v-model获得单选框中的值，但多个单选框必须都通过v-model双向绑定同一个值，每个单选框都要有自己的value属性，且value值必须唯一，因为是根据value值来确定选择的是哪一个单选框。当选中某一个单选框时v-model会根据当前单选框的value值改变data绑定的那个数据的值。
代码演示：
<div id="app">
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
</div>
<script>
new Vue({
el: '#app',
data: {
// 默认会让当前的 value 值为 2 的单选框选中
gender: 2,
}
})
</script>
2.获取复选框中的值
也是通过v-model来实现，基本实现与单选框一样，但有一点： data中双向绑定的那个数据要定义成数组形式，否则无法实现多选。
代码演示：
<div id="app">
<span>爱好：</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>
</div>
<script>
new Vue({
el: '#app',
data: {
// 默认会让当前的 value 值为 2 和 3 的复选框选中
hobby: ['2', '3'],
},
})
</script>
3.获取下拉框和文本框中的值
还是通过v-model来实现，基本实现与上面两者一样，需要给select 用v-model双向绑定data中的一个数据，每个option必须要有value属性，且value属性唯一。选中某一个option的时候v-model会根据当前option的value值改变data绑定的那个数据的值。可以通过给select添加一个multiple 属性来实现下拉框多选,当多选时，需要将data中双向绑定的那个数据定义成数组形式。
文本框 textarea 是 一个双标签 不需要绑定value 属性的，他里面的内容就是他的value值。
代码演示：
<div id="app">
<span>职业：</span>
<select v-model='occupation' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
<!-- -->
<textarea v-model='desc'></textarea>
</div>
<script>
new Vue({
el: '#app',
data: {
// 默认会让当前的 value 值为 2 和 3 的下拉框选中
occupation: ['2', '3'],
desc: 'nihao'
}
})
</script>
4.表单修饰符
作用： 用来修饰表单输入的内容，表单中输入的内容默认为字符串形式。
.number ----- 将表单内输入的字符串转化为数值类型，当输入非数字的字符时，无法转换。
.trim ---- 自动过滤表单中用户输入的字符串首尾的空白字符，但只能去掉开头和结尾的空格，字符串中间的空格无法去除。
.lazy ---- 延迟了同步更新属性值的时机，将输入框的input事件切换成change事件。input事件：当输入框中的数据发生变化时，其所绑定的值也会立即更新。change事件：当输入框中的数据发生变化时，其所绑定的值不会立即发生改变，而是在输入框失去焦点或按下回车键的时候，再进行更新。
代码演示：
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
<!--自动过滤用户输入的首尾空白字符 -->
<input v-model.trim="msg">
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
三、计算属性 computed
作用： 使用手法与方法 methods 类似，但计算属性可以使Vue模板变得更简洁，更高效，因为计算属性会根据它的响应式依赖进行缓存， 计算属性会把自己第一次计算的结果进行缓存，如果它所绑定的对象没有发生变化，那后面再次调用这个计算属性时，Vue会直接返回缓存中的第一次计算的结果。只有当绑定的对象发生变化时，计算属性才会重新进行计算，大大节约了系统资源。
计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存。每次调用方法时，方法都会重新进行计算。
代码演示：
<div id="app">
<!--
当多次调用 reverseString 的时候
只要里面的 num 值不改变 他会把第一次计算的结果直接返回
直到data 中的num值改变 计算属性才会重新发生计算
-->
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<!-- 调用methods中的方法的时候 他每次会重新调用 -->
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript">
/*
计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
*/
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 100
},
methods: {
reverseMessage: function(){
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
//computed 属性 定义 和 data 已经 methods 平级
computed: {
// reverseString 这个是我们自己定义的名字
reverseString: function(){
console.log('computed')
var total = 0;
// 当data 中的 num 的值改变的时候 reverseString 会自动发生计算
for(var i=0;i<=this.num;i++){
total += i;
}
// 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果
return total;
}
}
});
</script>
才疏学浅，待后补充
四、监听器（侦听器） watch
作用： watch用来监听响应数据的变化。一般用于对数据的变化做出相应的反应，执行相应的方法。watch内function前面的名称就是watch所监听的属性。watch所监听的属性一定是在 data 中已经定义的数据。但需要监听一个对象中的数据的变化时，需要用 deep 属性对对象进行深度监听，因为普通的 watch 方法无法监听到对象内部数据的改变。
代码演示：
<div id="app">
<div>
<span>名：</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓：</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
<div>
<input type="text" v-model='info.username'>
<div>{{ info.username }}</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
fullName: 'Jim Green',
info: {
username: 'zhangsan'
}
},
//watch 属性 定义 和 data 已经 methods 平级
watch: {
// 注意： 这里firstName 对应着data 中的 firstName
// 函数形式的监听器 当 firstName 值 改变的时候 会自动触发 watch 但是当页面第一次加载渲染时 不会触发
// 如果只有一个参数val 就是 firstName 改变后的值
// 如果有两个参数 function(newVal,oldVal) 则第一个参数为改变后的值 第二个参数为改变之前的值
firstName: function(val) {
this.fullName = val + ' ' + this.lastName;
},
// 注意： 这里 lastName 对应着data 中的 lastName
// 对象形式的监听器+immediate属性 当页面第一次加载渲染时，也会触发
lastName: {
// 处理函数
handle(newVal,oldVal) {
this.fullName = this.firstName + ' ' + newVal;
},
immediate: true
}
// 对象形式的监听器+deep属性 深度监听对象。
info: {
handler(newVal,oldVal) {
console.log(newVale+'---' oldVal)
},
// 开启深度监听
deep: true
}
// 也可以直接监听对象的属性 但是要用单引号包裹
'info.username': function(newVal) {
console.log(newVal)
}
}
});
</script>
才疏学浅，待后补充
五、过滤器 filter
作用： Vue允许自定义过滤器，常用于一些文本格式化，过滤器可以在两个地方被引用：双花括号的文本插值 以及 v-bind表达式中。支持级联操作，即同时引用多个过滤器，当引用多个过滤器时，会按照引用顺序一一执行，第二个过滤器接受的数据是第一个过滤器过滤结束的数据，第三个过滤器接受的数据是第二个过滤器过滤结束的数据等等；过滤器虽然会对数据进行过滤，但它并不会改变数据本身，只是改变了渲染的结果；过滤器也分为全局过滤器和局部过滤器。
代码演示：
<div id="app">
<input type="text" v-model='msg'>
<!-- upper 被定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入到函数中 -->
<div>{{msg | upper}}</div>
<!--
支持级联操作
upper 被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 过滤的结果传递到lower中
-->
<div>{{msg | upper | lower}}</div>
<div :abc='msg | upper'>测试数据</div>
</div>
<script type="text/javascript">
// lower 为全局过滤器 将所有的英文字符转换为小写字母
Vue.filter('lower', function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
//filters 属性 定义 和 data 已经 methods 平级
// 定义filters 中的过滤器为局部过滤器
filters: {
// upper 自定义的过滤器名字
// upper 被定义为接收单个参数的过滤器函数，表达式 msg 的值将作为参数传入到函数中
upper: function(val) {
// 过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
//将所有的英文字符转换为大写字母
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
</script>
向过滤器中传递参数
定义过滤器时，可以定义过滤器函数能够接收参数，但第一个参数永远都是引用过滤器时过滤器前面的那个数据。
<div id="box">
<!--
filterA 被定义为接收三个参数的过滤器函数。
其中 message 的值作为第一个参数，
普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
-->
{{ message | filterA('arg1', 'arg2') }}
</div>
<script>
// 在过滤器中 第一个参数 对应的是 管道符前面的数据 n 此时对应 message
// 第2个参数 a 对应 实参 arg1 字符串
// 第3个参数 b 对应 实参 arg2 字符串
Vue.filter('filterA',function(n,a,b){
if(n<10){
return n+a;
}else{
return n+b;
}
});
new Vue({
el:"#box",
data:{
message: "哈哈哈"
}
})
</script>
才疏学浅，待后补充
六、生命周期
Vue实例从创建到销毁的过程称为Vue实例的生命周期，这个过程中会伴随着一些函数的自调用，我们通常称这些函数为钩子函数
常用的钩子函数：
| beforeCreate | 在实例初始化完成之后，数据观测和事件配置完成之前，调用此方法。此时data和methods以及页面的DOM结构都没有初始化，无法进行任何操作。 |
|---|---|
| created | 在实例创建完成后，即数据和事件都配置完成后调用。此时虽然data和methods都可以使用 但页面还没进行渲染 |
| beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 |
| mounted | el被新创建的vm.$el替换，并挂载到实例上去之后被调用。 此时数据已经渲染到页面上了，在这个钩子函数里面我们可以使用一些第三方的插件 |
| beforeUpdate | 数据更新时调用，即发生在虚拟DOM打补丁之前。 此时， 页面上数据还是旧的 |
| updated | 数据更新后被调用，即虚拟DOM重新渲染和打补丁之后。 此时，页面上数据已经替换成最新的 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |
才疏学浅，待后补充
七、数组
1.数组的变异方法
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展。
push() | 往数组最后面添加一个元素，成功返回当前数组的长度 |
|---|---|
pop() | 删除数组的最后一个元素，成功返回删除元素的值 |
shift() | 删除数组的第一个元素，成功返回删除元素的值 |
unshift() | 往数组最前面添加一个元素，成功返回当前数组的长度 |
splice() | 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值 |
sort() | sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组 |
reverse() | reverse() 将数组倒序，成功返回倒序后的数组 |
2.替换数组的方法
也是对数组的操作，只不过不会改变原有的数组，而是返回一个新的数组
| filter | filter() 方法会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的元素，即从一个数组中筛选出符合某些条件的数组。 |
|---|---|
| concat | concat() 方法用于连接两个或多个数组，在不改变现有的数组的前提下，返回连接后的数组 |
| slice | slice() 方法可从已有的数组中返回选定的元素，即从一个数组中选定一些元素组成一个新数组。该方法并不会修改数组，而是返回一个子数组 |
3.动态数组响应
由于 JavaScript 的限制，Vue 不能监听到数组内数据的更新，以及对象中未在data中进行声明的数据的更新，自然也就无法去触发视图更新。但是上面那些操作数组的方法，是会触发视图更新的，因为Vue对他们进行了重写。
// 数组和对象
data(){
return {
arr: [1,2,3]，
obj: {
a: 0
}
}
}
this.arr[1] = 7; // 此时数据的更新 不会触发视图的更新
this.arr.length = 2;// 此时数据的更新 不会触发视图的更新
this.arr.push(4) // 此时数据的更新 会触发视图的更新
this.obj.a // 此时数据的更新 会触发视图的更新 因为该属性在data中声明过
this.obj.b = 2; // 此时数据的更新 不会触发视图的更新
为了实现这些数据的也能触发数据更新，Vue给我们提供了两个方法：Vue.set() 和 this.$set() 。两者作用相同，参数相同。个人比较喜欢后面那种写法。
Vue.set(a,b,c)/this.$set(a,b,c) 让数据更新触发视图更新，a是要更改的数据，b是数据的第几项，c是更改后的数据
// 对于对象 等同于 this.obj.b = 2
this.$set(this.obj,'b',2)
Vue.set(this.obj,'b',2)
// this.$set 简写
this.obj.$set('b',2)
// 对于数组 等同于 this.arr[index] = newValue
this.$set(this.arr, index, newValue)
Vue.set(this.arr,index,newValue)
// this.$set 简写
this.arr.$set(index,newValue);
扫一扫
2279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
