语法

一.模板语法

1.插值语法 {

{{text}}

2.基本指令

准备好数据

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    // 可以在js控制台通过打印vm._data查看vm下绑定的数据
    const vm=new Vue({
        el:'#app',
        data(){
            return{
                text:"helloworld",
                textHtml:"<a href='javascript:;'>跳转</a>"
            }
        },
    })
</script> 

2-1. v-bind，绑定属性

        <span v-bind:title="text">
            {{text}}
        </span>
            <!-- 简写 ： -->
        <p :title="text">
            {{text}}
        </p>

2-2. v-model 表单的双向绑定

     <input type="text" v-model="text">    

2-3.v-text 相当于 {

        <h5 v-text="text">

        </h5>

2-4. v-html 会渲染html标签

 <h4 v-html="textHtml">

        </h4>

2-5. v-clock 解决因为网络延迟显示插值的问题

        <h4 v-clock>
            {{text}}
        </h4> 
    <style>
       [v-clock]{
            display: none;
        }
    </style>

2-6.v-once 将模板语法变为静态,不会动态更新

          <h4 v-once>
                {{text}}
          </h4> 

2-7.v-pre 跳过编译

      <h4 v-pre>
                {{text}}
          </h4>

2-6.v-once 将模板语法变为静态,不会动态更新

          <h4 v-once>
                {{text}}
          </h4>