vue常用指令（二）

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>