网站建设补贴,wordpress 图床,网站建设与维护工作,长沙网站seo价格文章目录 模板语法1、文本2、原始 HTML3、属性 Attribute4、使用 JavaScript 表达式 条件渲染1、v-if2、v-else3、v-show4、v-if vs v-show 的区别 列表渲染1、用 v-for 把一个数组映射为一组元素2、维护状态 事件处理1、监听事件 v-on2、事件处理方法3、内联处理器中的方法 表… 文章目录 模板语法1、文本2、原始 HTML3、属性 Attribute4、使用 JavaScript 表达式 条件渲染1、v-if2、v-else3、v-show4、v-if vs v-show 的区别 列表渲染1、用 v-for 把一个数组映射为一组元素2、维护状态 事件处理1、监听事件 v-on2、事件处理方法3、内联处理器中的方法 表单输入绑定1、修饰符1.1 .lazy1.2 .trim 本文内容来自https://www.bilibili.com/video/BV1Rs4y127j8/ 模板语法 1、文本 数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值 spanMessage: {{ msg }}/span一般配合js 中的data()设置数据 export default {name: HelloWorld,data(){return{msg:消息提示}} }2、原始 HTML 双大括号会将数据解释为普通文本而非 HTML 代码。为了输出真正的 HTML你需要使用v-html 指令 pUsing mustaches: {{ rawHtml }}/p pUsing v-html directive: span v-htmlrawHtml/span/pdata(){return{rawHtml:a hrefhttps://www.itbaizhan.com百战/a} }3、属性 Attribute Mustache 语法不能在 HTML 属性中使用然而可以使用 v-bind 指令 div v-bind:iddynamicId/divdata(){return{dynamicId:1001} }v-bind: 可以简写成 : 4、使用 JavaScript 表达式 在我们的模板中我们一直都只绑定简单的 property 键值Vue.js 都提供了完全的 JavaScript 表达式支持 {{ number 1 }}{{ ok ? YES : NO }}{{ message.split().reverse().join() }}这些表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是每个绑定都只能包含单个表达式所以下面的例子都不会生效。 !-- 这是语句不是表达式-- {{ var a 1 }}!-- 流程控制也不会生效请使用三元表达式 -- {{ if (ok) { return message } }}条件渲染 1、v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。 p v-ifflag我是孙猴子/pdata() {return {flag: true} }2、v-else 你可以使用 v-else 指令来表示 v-if 的“else 块” p v-ifflag我是孙猴子/p p v-else你是傻猴子/pdata() {return {flag: false} }3、v-show 另一个用于条件性展示元素的选项是 v-show 指令 h1 v-showokHello!/h14、v-if vs v-show 的区别 v-if 是“真正”的条件渲染因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的如果在初始渲染时条件为假则什么也不做——直到条件第一次变为真时才会开始渲染条件块。 相比之下v-show 就简单得多——不管初始条件是什么元素总是会被渲染并且只是简单地基于 CSS 进行切换。 一般来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。 因此如果需要非常频繁地切换则使用 v-show 较好如果在运行时条件很少改变则使用 v-if 较好 列表渲染 1、用 v-for 把一个数组映射为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法其中 items 是源数据数组而 item 则是被迭代的数组元素的别名。 ulli v-foritem in items{{ item.message }}/li /uldata() {return {items: [{ message: Foo }, { message: Bar }]} }2、维护状态 当 Vue 正在更新使用 v-for 渲染的元素列表时它默认使用“就地更新”的策略。 如果数据项的顺序被改变Vue 将不会移动 DOM 元素来匹配数据项的顺序而是就地更新每个元素并且确保它们在每个索引位置正确渲染。 为了给 Vue 一个提示以便它能跟踪每个节点的身份从而重用和重新排序现有元素你需要为每项提供一个唯一的 key attribute div v-for(item,index) in items :keyitem.id|index!-- 内容 -- /div事件处理 1、监听事件 v-on 可以使用 v-on 指令 (通常缩写为 符号) 来监听 DOM 事件并在触发事件时执行一些 JavaScript。 用法为 v-on:clickmethodName 或使用快捷方式 clickmethodName button clickcounter 1Add 1/buttondata() {return {counter: 0} }2、事件处理方法 然而许多事件处理逻辑会更为复杂所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。 因此 v-on 还可以接收一个需要调用的方法名称。 button clickgreetGreet/buttonmethods: {greet(event) {// event 是原生 DOM eventif (event) {alert(event.target.tagName)}} }3、内联处理器中的方法 这是官方的翻译称呼其实我们可以直接叫他 “事件传递参数” button clicksay(hi)Say hi/button button clicksay(what)Say what/buttonmethods: {say(message) {alert(message)} }表单输入绑定 你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。 尽管有些神奇但 v-model 本质上 不过是语法糖。 它负责监听用户的输入事件来更新数据并在某种极端场景下进行一些特殊处理。 input v-modelmessage placeholderedit me / pMessage is: {{ message }}/pdata() {return {message:} }1、修饰符 1.1 .lazy 在默认情况下v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符从而转为在 change 事件之后进行同步 input v-model.lazymessage / pMessage is: {{ message }}/pdata() {return {message:} }1.2 .trim 如果要自动过滤用户输入的首尾空白字符可以给 v-model 添加 trim 修饰符 input v-model.trimmessage /data() {return {message:} }2023-07-19