P3.vue3 模版语法

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

v-bind实例

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url">
  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        msg:"<h2>标题56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico"
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
    },
  };
</script>

<style>
  #d1{
    color: red;
  }


</style>

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">changeColor</button>
  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        msg:"<h2>标题56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico"
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
      changeColor: function (){
        this.id="d2"
      }
    },
  };
</script>

<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }


</style>

• 看下图点击按钮变 bule

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">changeColor</button>
    <button @click="id='d2'">改变颜色</button>  //两个按钮 一样的
    <p>{{num+1}}</p>
    <p>{{test57.split('').reverse().join('')}}</p> //倒叙
  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        num: 0,
        msg:"<h2>标题56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico"
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
      changeColor: function (){
        this.id="d2"
      }
    },
  };
</script>

<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }


</style>

语法糖

@ v-on
: v-band

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">changeColor</button>
    <button @click="id='d2'">改变颜色</button>  //两个按钮 一样的
    <p>{{num+1}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p v-bind:id="id+1">js+v-band</p>
    <!-- v-bind 语法糖 ：-->
    <p :id="id">语法糖</p>
    <!-- v-on 用于监听DOM 语法糖 @ -->
    <button @click="changeColor">语法糖</button>

  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        num: 0,
        msg:"<h2>标题56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico"
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
      changeColor: function (){
        this.id="d2"
      }
    },
  };
</script>

<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }


</style>

属性

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">changeColor</button>
    <button @click="id='d2'">改变颜色</button>  //两个按钮 一样的
    <p>{{num+1}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p v-bind:id="id+1">js+v-band</p>
    <!-- v-bind 语法糖 ：-->
    <p :id="id">语法糖</p>
    <!-- v-on 用于监听DOM 语法糖 @ -->
    <button @click="changeColor">语法糖</button>
    <!--动态参数 -->
    <p v-bind:[attributeName]="id">属性v-bind</p>
    <button @click="attributeName='class'">改变属性</button>

  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        num: 0,
        msg:"<h2>标题56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico",
        attributeName: 'id'
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
      changeColor: function (){
        this.id="d2"
      }
    },
  };
</script>

<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>

动态事件

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind绑定</p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">changeColor</button>
    <button @click="id='d2'">改变颜色</button>  //两个按钮 一样的
    <p>{{num+1}}</p>
    <p>{{test57.split('').reverse().join('')}}</p>
    <p v-bind:id="id+1">js+v-band</p>
    <!-- v-bind 语法糖 ：-->
    <p :id="id">语法糖</p>
    <!-- v-on 用于监听DOM 语法糖 @ -->
    <button @click="changeColor">语法糖</button>
    <!--动态参数 -->
    <p v-bind:[attributeName]="id">属性v-bind</p>
    <button @click="attributeName='class'">改变属性</button>
    <!--动态事件 -->
    <button @[mouseEvent]="attributeName='class'">鼠标事件改变属性为class</button>
    <button @click="mouseEvent='mouseover'">改变属性事件-鼠标悬停</button>

  </div>

</template>

<script>
  export default{
    data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        num: 0,
        msg:"<h2>标题56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico",
        mouseEvent: "click",
        attributeName: 'id'
      }
    },
    methods:{
      changeUname: function (){
        this.test57='66666666666666'
      },
      changeColor: function (){
        this.id="d2"
      }
    },
  };
</script>

<style>
  #d1{
    color: red;
  }
  #d2{
    color: blue;
  }
  .d1{
    font-size: 50px;
  }


</style>