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

u1jodi1q 发表于 2024-10-10 04:43:49

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

<h1 style="color: black; text-align: left; margin-bottom: 10px;">迈入前端框架 vue 的第1脚，你必须晓得的模板语法</h1>
目录文本插值属性绑定列表渲染要求渲染事件处理在理解模板语法之前，咱们先来瞧瞧浏览器能够识别的 html 代码是什么样子的
<div style="color: black; text-align: left; margin-bottom: 10px;">你好啊</div>
但倘若咱们期盼变量能够展示出来，那该怎么做？
// jsvar data = {name:zhy
}
// html<div> 你好啊 data.name </div>  // 咱们想把数据和html字符串相关起来，除了先经过document.querySelector("div"
)获取这个div而后再更改其中内容，还有其他办法吗
很显著，咱们这般做的目的是为了能够直接在标签里面相关咱们的数据，那样原生 html 供给给咱们这样的能力了吗？到日前为止，显然还无。那咱们该怎么做呢？
vue 给咱们供给了一种办法，那便是模板语法，让咱们能够很容易在标签里面相关咱们的响应式的数据。模板语法是 vue 响应式中重要的一环，利用ref等响应式函数（咱们亦能够叫作它为 hook）创建的变量，利用插值语法{{}}相关到模板中，而后响应式数据出现变化，咱们的模板中相应的数据亦会变化，这便是模板语法所起到的响应式方面的功效。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">文本插值</h3>import { ref } from vueconst name = ref("zhy"
) // 定义咱们的响应式数据
<div style="color: black; text-align: left; margin-bottom: 10px;"> 你好啊 {{ name }} </div>
实质上，文本插值之中的内容是一个响应式的变量，是一个变量，既然是变量就属于表达式，因此文本插值之中能够编写JavaScript的表达式。
<div style="color: black; text-align: left; margin-bottom: 10px;"> 你好啊 {{ name + "!!" }} </div>
<div style="color: black; text-align: left; margin-bottom: 10px;"> {{ 2.99999.toFixed(2) }} </div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">属性绑定</h3>
一般在标签内部咱们会去经常书写属性，那样怎样动态的绑定属性呢？运用 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:="value"
> ‌动态属性绑定 {{attr}} 
<h3 style="color: black; text-align: left; margin-bottom: 10px;">列表渲染</h3>
假如说有一组数据，需要重复的渲染呢？例如书籍数据。运用 v-for 指令来循环渲染数组或对象，生成一系列元素。const booksRef = ref(["book1", "book2", "book3"
]);      <li v-for="item in booksRef" :key="item"
>{{ item }}
<h3 style="color: black; text-align: left; margin-bottom: 10px;">‌ 要求渲染</h3>
经过 v-if、v-else-if 和 v-else 来掌控元素的表示或隐匿，按照要求渲染区别的内容。‌const isShow = ref(true
) // 定义咱们的响应式数据<p v-if="isShow"
>要求为真时这个p元素会渲染到页面中。。。
要求为假时这个p元素会渲染到页面中。。。
<h3 style="color: black; text-align: left; margin-bottom: 10px;">事件处理</h3>
在原生其中经常会有点击某个原生进行事件处理。运用 v-on 指令（或简写@）来监听 DOM 事件并执行有些 JavaScript 代码。
const btnClick = funciton(e){    console.log(事件处理程序
,event)
}   <button @click="btnClick">点我进行事件处理</button>  // @事件类型="事件处理办法"
 类型为点击事件click，表单提交事件submit等

qzmjef 发表于 2024-10-13 12:18:31

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

页: [1]

外链论坛's Archiver

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