vue模板语法

一、插值

1、文本

（1）v-text语法

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

• 方法一：

  <template>
    <h1> hello </h1>
    <p v-text="data.name"></p>
    <!--  v-text的简写-->
    <p>{
      {data.name}}}</p>
  </template>
  
  <script>
  import {
         reactive} from "vue"//引入本页面需要的东西
    export default {
         
      name:"home",//本代码的名字
      setup(){
         //相当于生命周期中的create和before create
        const data =reactive({
         
          name:"玉婷",
          age:13
        })//声明一个对象，名字是data;reactive()是一个方法，存放响应式对象
        return {
         //只有return之后才能在html中使用
          data
        }
      }
    }
  </script>
  
  

• 方法二：使用toRef、toRefs
  作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。
  语法：const name = toRef(person, ’ name ')
  应用：要将响应式对象中的某个属性单独提供给外部使用时
  扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象
  语法：toRefs(person)

  <template>
    <h1> hello </h1>
    <p v-text="name"></p>
    <!--  v-text的简写-->
    <p>{
      {name}}</p>
  </template>
  
  <script>
  import {
         reactive,toRefs} from "vue"//引入本页面需要的东西
    export default {
         
      name:"home",//本代码的名字
      setup(){
         //相当于生命周期中的create和before create
        const data =reactive({
         
          name:"小王",
          age:13
        })//声明一个对象，名字是data;reactive()是一个方法，存放响应式对象
        return {
         //只有return之后才能在html中使用
          ...toRefs(data)//将一个响应式对象，转换为普通对象，并且将其中的属性转换为 Ref 对象
        }
      }
    }
  </script>
  
  

• es6语法：三个点的作用

  var a = {
       
    name: '张三',
    age: 25
  }
  
  var b = {
       
    job: 'web前端',
    ...a
  }
  
  // 相当于
  var c = {
       
    job: 'web前端',
    name: '张三',
    age: 25
  }
  

(2) v-once

如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

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

2、html

（1） v-html用于输出 html 代码：

（2）属性： v-bind

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

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

对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

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

以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的 元素中。

3、表达式

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

4、指令：指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

5、参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

6、修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

7、用户输入

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

8、缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

• v-bind 缩写

  <!-- 完整语法 -->
  <a v-bind:href="url"></a>
  <!-- 缩写 -->
  <a :href="url"></a>
  

• v-on 缩写

  <!-- 完整语法 -->
  <a v-on:click="doSomething"></a>
  <!-- 缩写 -->
  <a @click="doSomething"></a>