迈入前端框架 vue 的第1脚，你必须晓得的模板语法

u1jodi1q

迈入前端框架 vue 的第1脚，你必须晓得的模板语法

目录

文本插值属性绑定列表渲染要求渲染事件处理

在理解模板语法之前，咱们先来瞧瞧浏览器能够识别的 html 代码是什么样子的

你好啊

但倘若咱们期盼变量能够展示出来，那该怎么做？

// js

var data = {name:zhy

}

// html

<div> 你好啊 data.name </div>  // 咱们想把数据和html字符串相关起来，除了先经过document.querySelector("div"

)获取这个div而后再更改其中内容，还有其他办法吗

很显著，咱们这般做的目的是为了能够直接在标签里面相关咱们的数据，那样原生 html 供给给咱们这样的能力了吗？到日前为止，显然还无。那咱们该怎么做呢？

vue 给咱们供给了一种办法，那便是模板语法，让咱们能够很容易在标签里面相关咱们的响应式的数据。模板语法是 vue 响应式中重要的一环，利用ref等响应式函数（咱们亦能够叫作它为 hook）创建的变量，利用插值语法{{}}相关到模板中，而后响应式数据出现变化，咱们的模板中相应的数据亦会变化，这便是模板语法所起到的响应式方面的功效。

文本插值

import { ref } from vueconst name = ref("zhy"

) // 定义咱们的响应式数据

 你好啊 {{ name }} 

实质上，文本插值之中的内容是一个响应式的变量，是一个变量，既然是变量就属于表达式，因此文本插值之中能够编写JavaScript的表达式。

 你好啊 {{ name + "!!" }} 

 {{ 2.99999.toFixed(2) }} 

属性绑定

一般在标签内部咱们会去经常书写属性，那样怎样动态的绑定属性呢？运用 v-bind 指令（或其简写:）来动态绑定属性或对象的值到元素上。

import { ref } from vueconst id = ref("name"

) // 定义咱们的响应式数据

 <div v-bind:id="id"

> ‌属性绑定 

 <div :id="id"

> ‌属性绑定 

倘若当咱们不确定需要绑定的属性到底是 id 还是 class 或是其他该怎么做？这个时候就要用到动态属性绑定了

const attr = ref(id

);

const value = ref("value"

)

const changeAttr = function

(){

    attr.value = class

}

 利用[]将变量属性包裹起来就能够做到响应式

 <div v-bind:[attr]="value"

> ‌动态属性绑定 {{attr}} 

列表渲染

假如说有一组数据，需要重复的渲染呢？例如书籍数据。运用 v-for 指令来循环渲染数组或对象，生成一系列元素。

const booksRef = ref(["book1", "book2", "book3"

]);

      <li v-for="item in booksRef" :key="item"

>{{ item }}

‌ 要求渲染

经过 v-if、v-else-if 和 v-else 来掌控元素的表示或隐匿，按照要求渲染区别的内容。‌

const isShow = ref(true

) // 定义咱们的响应式数据

<p v-if="isShow"

>要求为真时这个p元素会渲染到页面中。。。

要求为假时这个p元素会渲染到页面中。。。

事件处理

在原生其中经常会有点击某个原生进行事件处理。运用 v-on 指令（或简写@）来监听 DOM 事件并执行有些 JavaScript 代码。

const btnClick = funciton(e){

    console.log(事件处理程序

,event)

}

   <button @click="btnClick">点我进行事件处理</button>  // @事件类型="事件处理办法"

 类型为点击事件click，表单提交事件submit等

qzmjef

我赞同你的看法，你的智慧让人佩服，谢谢分享。