1.双向数据绑定(v-model)
<input type="text" ref="name" v-on:keyup="changeName"> //html使用ref
changeName:function(){
this.name = this.$refs.name.value;
}
//js调用refs
或者
<input type="text" ref="name" v-model="name"> //使用v-model
2.计算方法(computed)
和js中method同级,只渲染数据改变时的方法,节约性能
methods: { //所有方法都会执行
/*addToA: function(){
console.log('addToA');
return this.a + this.age;
},
addToB: function(){
console.log('addToB');
return this.b + this.age;
}*/
},
computed: { //仅会执行相应方法
addToA: function(){
console.log('addToA');
return this.a + this.age;
},
addToB: function(){
console.log('addToB');
return this.b + this.age;
}
3.动态绑定Class(v-bind)
html:
<h1 v-bind:class={h1Css:ish1Css}></h1> //class=后边是一个对象,冒号后只能是false或true
//true便使用该css,否则不使用
css:
ish1Css:true
4.条件判断(v-if ) | 显示与隐藏(v-show)
html:
<p v-if="istrue==3">isTrue</p> //非占位,if判断为false则无该元素
<p v-else-if="isFalse">isFalse</p>
<p v-else>6</p>
<p v-show="istrue">isshow</p> //占位,无论true与否,只是display了
js:
istrue:2,
isFalse:false
5.for循环(v-for)
js:
data: {
characters: ['Mario', 'Luigi', 'Yoshi', 'Bowser'],
ninjas: [
{ name: 'Ryu', age: 25 },
{ name: 'Yoshi', age: 35 },
{ name: 'Ken', age: 55 }
]
}
htmml:
<ul>
<li v-for="character in characters">{{ character }}</li>
</ul>
<ul>
<li v-for="(ninja, index) in ninjas">{{ index }} . {{ ninja.name }} - {{ ninja.age }}</li>
</ul>
<!-- <div v-for="(ninja, index) in ninjas">
<h3>{{ index }} . {{ ninja.name }}</h3>
<p>Age - {{ ninja.age }}</p>
</div> -->
6.初始化多个vue
var one = new Vue({ //两个vue可以进行数据更改
el:"#binddata",
data:{
istrue:true
},
methods:{
}
});
var two = new Vue({
el:"#binddata-two",
data:{
},
methods:{
change:function(){
one.istrue = false;
}
})
7.组件(component)
js:
Vue.component("hello",{
template:` //使用 · 可以换行
<p>
{{name}}:大家好,我是Vae
<button v-on:click="changeName">改名</button>
</p>
`,
data:function(){ //data一定要这么写,避免全局更改
return{
name:"松鼠"
}
},
methods:{
changeName:function(){
this.name = "beiqiu"
}
}
})
html:
<hello></hello>