迈入前端框架 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等
| 
发表于 2024-10-10 04:43:49