Vue 简单指令 基本使用

1.v-bind 指令语法

    <div id="app">

     <span v-bind:title="messg">点我看看</span>
     <!-- <span :title="messg">点我看看</span>  ：title 语法糖 -->

    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                    messg : `页面加载于 ${new Date().toLocaleString()}`
                }
            }
        })


    </script>

2.v-if  指令语法 控制切换一个元素是否显示  true 显示文本 fales 去除文本

 <div id="app">

     <span v-if="seen">我可以被删除</span>

    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                    seen:false  //span 里面的文本会被删除
                }
            }
        })


    </script>

3. v-on 指令语法   添加一个事件监听器   ！！！this 必须加  负责得不到 num 的值

    <div id="app">
     <button v-on:click="bdd">-</button>

     <span>{{num}}</span>

     <button @click="add">+</button>  <!-- @click 语法糖 -->
 
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                   num:1
                }
            },
            methods:{
                add(){
                    this.num++
                },
                bdd(){
                    this.num--
                }
            }
        })


    </script>

4. v-model 指令语法 能轻松实现表单输入和应用状态之间的双向绑定

 <div id="app">

     <p>{{messg}}</p>

     <input type="text" v-model="messg">
 
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                   messg : '我跟表单里内容一致'
                }
            },
            methods:{
               
            }
        })

5.v-for 指令语法 可以绑定数组的数据来渲染 相当于 for 循环

 <div id="app">

     <ul>
        <li v-for="item in messg" :key="index">{{item}}</li>
     </ul>
 
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                   messg : ['中国','北京','南京','安徽']
                }
            },
            methods:{
               
            }
        })

v-html 指令语法  可以识别 html 标签

 <div id="app">

        <p v-html="ulr"></p>
 
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                    ulr:"<a href='http://www.baidu.com'>百度一下</a>"
                }
            },
            methods:{
               
            }
        })

v-text 指令语法  覆盖原本文本

  <div id="app">

        <p v-text="messg">我会被覆盖</p>
 
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el : '#app',
            data(){
                return{
                   messg:'我会覆盖他'
                }
            },
            methods:{
               
            }
        })