vue简单指令笔记

v-once 执行一次性插值，数据改变插值处内容不会更新

<span v-once>这个将不会改变: {{ msg }}</span>

v-text 插入文本

<!--两行效果相同--!>
<h1>{{ message }}</h1>
<h1 v-text="message"></h1>

v-html 插入html代码

<p v-html="msgs"></p>
 
data () {
    return {
        msgs: '<h1> hello </h1>',
    }
}

v-bind 用来响应地更新 HTML 属性 缩写 '：'

<!-- <h1 v-bind:id="ids">{{ msg }}</h1> -->
<h1 :id="ids">{{ msg }}</h1>
 
name: 'Practice',
data () {
    return {
        ids: 'h1_id'
    }
}

可以直接使用JavaScript表达式

{{ 4 + 1 }}
{{ 5>6 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

v-on 绑定事件 缩写 '@'

<button v-on:click="clickthing">点击</button>
<button @[eventName]="clickthing">点击</button>
 
data () {
    return {
        eventName:'click'
    }
},
methods: {
    clickthing() {
        alert("hello");
    },
}

v-model 数据双向绑定

<p>{{ msg }}</p>
<input type="text" v-model="msg">
 
data () {
    return {
        msg: '',
    }
},

v-if v-else-if v-else 条件语句

<ul>
    <li v-if="type === 'A'">A</li>
    <li v-else-if="type === 'B'">B</li>
    <li v-else-if="type === 'C'">C</li>
    <li v-else>Not A/B/C</li>
</ul>
 
data () {
    return {
        type: 'C',
    }
},

v-show 根据条件显示或隐藏元素

<h1 v-show="ok">v-show</h1>
 
data () {
    return {
        ok: false,
    }
},

v-for 循环指令

<ol>
    <li v-for="site in sites" :key="site">
        {{ site.name }}
    </li>
</ol>
 
data () {
    return {
        sites:[{name:'小赵'},{name:'小李'},{name:'小王'}]
    }
},