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 值指向另一个对象中的某个属性。

• 语法1：const name = toRef(person, ’ name ')

• 应用：要将响应式对象中的某个属性单独提供给外部使用时

• 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象

• 语法2：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 代码：

<div v-html="<i>斜体字</i>"></div>

（2）属性： v-bind—绑定标签动态属性

• 缩写：v-bind的缩写为 ：（冒号）

• 格式：v-bind:属性名=“变量名”—变量在js中赋值

• 对于class类名绑定可以叠加使用

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

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

  #isButtonDisabled是一个布尔值，在js中进行声明
  <button v-bind:disabled="isButtonDisabled">按钮</button>
  

二、表达式

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

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

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

1、 v-if 判断指令：控制标签是否在页面中存在

• 格式1：v-if=“变量名”
• 格式2：v-if和v-else连用，注意两个标签必须对齐
• 格式2：v-if和v-else-if连用

  <p v-if="isTrue">现在你看到我了</p>
  

2、v-show 显示指令 ：控制标签是否在页面中显示

• 格式：v-show=“变量名”

  <p v-show="isTrue">现在你看到我了</p>
  

3、v-for 循环指令

[1] 迭代数组

• 格式1：v-for=“site in sites” ------site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

  <div id="app">
    <ol>
      <li v-for="site in sites">
        {{ site.text }}
      </li>
    </ol>
  </div>
  <script>
  const app = {
    data() {
      return {
        sites: [
          { text: 'Google' },
          { text: 'Runoob' },
          { text: 'Taobao' }
        ]
      }
    }
  }
  
  Vue.createApp(app).mount('#app')
  </script>
  

• 格式2：v-for=“(site, index) in sites”—index值为当前项的索引

  <div id="app">
    <ol>
      <li v-for="(site, index) in sites">
        {{ index }} -{{ site.text }}
      </li>
    </ol>
  </div>
  

• 格式3：v-for=“(site, index) in sites” :key=index
  :key=index的作用，当渲染数据个别数据又更新时，只会更新这一条，提高性能

  <div id="app">
  	  <ol>
  	    <li v-for="(site, index) in sites" :key=index>
  	      {{ index }} -{{ site.text }}
  	    </li>
  	  </ol>
  </div>
  

[2] 迭代对象

• 格式1：v-for 可以通过一个对象的属性来迭代数据：

  <div id="app">
    <ul>
      <li v-for="value in object">
      {{ value }}
      </li>
    </ul>
  </div>
   
  <script>
  const app = {
    data() {
      return {
        object: {
          name: '小王',
          slogan: '梦想！'
        }
      }
    }
  }
   
  Vue.createApp(app).mount('#app')
  </script>
  

• 格式2：可以提供第二个的参数为键名：

  <div id="app">
    <ul>
      <li v-for="(value, key) in object">
      {{ key }} : {{ value }}
      </li>
    </ul>
  </div>
  

• 格式3：第三个参数为索引：

  <div id="app">
    <ul>
      <li v-for="(value, key, index) in object">
       {{ index }}. {{ key }} : {{ value }}
      </li>
    </ul>
  </div>
  

[3] 迭代整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

[4] 显示过滤/排序后的结果

我们可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。

[5] v-for/v-if 联合使用

[6] 在组件上使用 v-for

在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

<my-component v-for="item in items" :key="item.id"></my-component>

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>

不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>

4、v-model指令：双向绑定

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<input type="text"placeholder="请输入姓名" v-model="message">

三、事件

• 注意1：vue2中，事件方法声明在methods对象中
• 注意2：vue3中，事件方法声明在setup(){}中，在最后要return

1、 v-on:它用于监听 DOM 事件：

• 格式：v-on:事件名=“事件方法”
• v-on: 的缩写 @
• 详细用法

  <!-- 完整语法 -->
  <template>
  	<a v-on:click="doSomething"> ... </a>
  	
  	<!-- 缩写 -->
  	<a @click="doSomething"> ... </a>
  	
  	<!-- 动态参数的缩写 (2.6.0+) -->
  	<a @[event]="doSomething"> ... </a>
  </template>
  <script>
  	 export default {
  	 setup(){//相当于生命周期中的create和before create
  
   		 const doSomething=()=>{//es6语法声明事件
  		  }
  		  return {//只有return之后才能在html中使用
     			doSomething
   		 }
  	 }
  </script>
  

2、input事件：输入时触发

正则来验证输入的合法性

<input type="text"placeholder="请输入姓名"  v-model="message" @input ="blurHandle">

3、blur：失去焦点事件

<input type="text"placeholder="请输入姓名"  v-model="message" @blur="blurHandle">

4、focus：获取焦点事件

5、change：内容改变事件

四、修饰符

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

<form v-on:submit.prevent="onSubmit"></form>