Vue的常用指令

Vue.js模板语法

        插值文本

                数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

<div id="app">
  <p>{{ message }}</p>
</div>

        HTML

        使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>小鲸喜</h1>'
  }
})
</script>

        属性                

                HTML 属性中的值应使用 v-bind 指令。

                以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

        表达式

        Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">
	{{5+5}}<br>
	{{ ok ? 'YES' : 'NO' }}<br>
	{{ message.split('').reverse().join('') }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	ok: true,
    message: 'RUNOOB'
  }
})
</script>

       v-model双向数据绑定

        在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

         v-if 

        v-if 指令将根据表达式 set的值(true 或 false )来决定是否显示这个div

    <div id="app">
        <div v-if="set">{{msg}} if</div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                set:false,
                msg:"这个方法是"
            }
        })
    </script>

        v-show

        我们也可以使用 v-show 指令来根据条件展示元素：

    <div id="app">
        <div v-show="set">{{msg}} show</div>
    </div>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                set:false,
                msg:"这个方法是"
            }
        })
    </script>

        v-for 循环语句

        v-for 指令需要以 site in sites 形式的特殊语法，

        sites 是源数据数组并且 site 是数组元素迭代的别名。

        v-for 可以绑定数据到数组来渲染一个列表：

    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">

        <ul>
            <li v-for="(it,index) in arr">
                {{ index+1 }}城市:{{ it }}
            </li>
        </ul>
        <h2 v-for="item in vegetables" v-bind:title="item.name">
            {{ item.name }}
        </h2>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["北京","上海","广州","深圳"],
                vegetables:[
                    {name:"西兰花炒蛋"},
                    {name:"蛋炒西蓝花"}
                ]
            },
            methods: {
                add:function(){
                    this.vegetables.push({ name:"花菜炒蛋" });
                },
                remove:function(){
                    this.vegetables.shift();
                }
            },
        })
    </script>