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 createconst 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 createconst 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-componentv-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><inputv-model="newTodoText"id="new-todo"placeholder="E.g. Feed the cat"/><button>Add</button></form><ul><todo-itemv-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 createconst 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>