vue常用指令:v-on、v-bind、v-model、v-once
vue指令官方文档:
API — Vue.js 中文文档 (bootcss.com)https://vuejs.bootcss.com/api/#v-on
1.v-on 缩写@,绑定事件监听器
<div id="app">
<button v-on:click="doThis">点击</button>
<button @click="doThat">点击</button>
</div>
<script>
let vue=new Vue(){
el:"#app",
data:{},
methods:{
doThis(){
console.log("v-on点击");
},
doThat(){
console.log("@点击");
}
}
}
</script>
2.v-bind 缩写 : 动态地绑定一个或多个 attribute,或一个组件 prop 到表达式
<div id="app">
<div v-bind:class="className">{{ msg }}</div>
<div :class="className">{{ msg }}</div>
</div>
<script>
let vue=new Vue({
el:'#app',
date:{
className: 'div',
msg:'添加class名称'
}
})
</script>
3.v-model 双向绑定 随表单控件类型不同而不同
<div id="app">
<input type="text" v-model="in1" />
<span>{{ in1 }}</span>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
in1: ""
}
})
</script>
4.v-once 只渲染一次元素或组件
<div id="#app">
<input type="text" v-model="in1">
<div v-once>只渲染一次:{{ in1 }}</div>
<div>同步数据:{{ in1 }}</div>
</div>
<script>
let vue = new Vue({
el:"#app",
data:{
in1: '渲染'
}
})
</script>