小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
-
官方文档(介绍 — Vue.js (vuejs.org))
-
推荐前置知识
-
容器和vue实例对象之间就是一对一的关系，没有一对多或者多对一
-
可以理解成
指令语法：标签属性；v-开头
<input v-model="message">
插值语法：标签体；{{一个属性值}}
<p>{{message}}</p>
- Object.defineProperty
Object.defineProperty( , ,{})
可以对添加的属性设置能不能删除修改什么的
let number = 18;
let person = {
name: 'zhangs',
sex: 'nan'
}
Object.defineProperty(person, 'age', {
get() {
console.log('beizhix');
return number;
},
set(value) {
console.log('xiugai');
number = value;
}
})
- 绑定
v-binf单向绑定
v-model双向绑定，只能应用在表单，主要针对value
- 写法
el有两种写法
el:'#root'
v.$mount('root')
data两种写法
data:{
}
组件写法选下面，vue管理的函数不能写箭头函数，this指向有问题
data:function(){
this指向vue实例
return {
}
}
- 数据代理：一个对象对另一个对象属性的操作
const vm = new Vue({
el:'#ap',
data:function(){
return {
name:'xian'
}
}
})
vm.name = vm._data.name
有get()set()
- 方法放哪好？
<div id="root">
<h2>huanyin</h2>
<button v-on:click='show'>dianw</button>
<button v-on:click='showtwo(66,$event)'>dianw</button>
</div>
<script>
let vm = new Vue({
el:'#root',
data:{
//做数据代理
name:'yellow'
},
// 接受vue管理的函数不要写箭头函数
methods: {
//不做数据代理，这属于方法，让vue轻松一点
show(event){
console.log(event.target);
console.log(this);//指向vue实例对象
},
showtwo(a,b){
console.log(a,b);
}
},
})
</script>
数据代理就有这个，把show()放methods就无，减轻vue负担
运行结果
