网站建设作业怎么写,wordpress索引,wordpress doc 插件,大良营销网站建设方案前言
持续学习总结输出中#xff0c;Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model
概念#xff1a;指令#xff08;Directives#xff09;是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。
vue 中的指令按照不…前言
持续学习总结输出中Vue中的常用指令v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-model
概念指令Directives是Vue提供的带有 v- 前缀 的特殊标签属性。可以提高操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为6大类
内容渲染指令v-html、v-text条件渲染指令v-show、v-if、v-else、v-else-if事件绑定指令v-on属性绑定指令 v-bind列表渲染指令v-for双向绑定指令v-model
1、内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个 v-text类似innerText 使用语法p v-textunamehello/p意思是将 uame 值渲染到 p 标签中 类似 innerText使用该语法会覆盖 p 标签原有内容 v-html类似 innerHTML 使用语法p v-htmlintrohello/p意思是将 intro 值渲染到 p 标签中 类似 innerHTML使用该语法会覆盖 p 标签原有内容能够将HTML标签的样式呈现出来。 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappdiv v-htmlmsg/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {msg: h3星辰大海/h3}})/script/body
/html运行效果
2、条件渲染指令
条件判断指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个分别是
1、v-show
作用 控制元素显示隐藏语法 v-show “表达式” 表达式值为 true 显示 false 隐藏原理 切换 display:none 控制显示隐藏场景频繁切换显示隐藏的场景
2、v-if
作用 控制元素显示隐藏条件渲染语法 v-if “表达式” 表达式值 true显示 false隐藏原理 基于条件判断是否创建或移除元素节点场景 要么显示要么隐藏不频繁切换的场景
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box {width: 200px;height: 100px;line-height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;}/style
/head
bodydiv idappdiv v-showflag classbox我是v-show控制的盒子/divdiv v-ifflag classbox我是v-if控制的盒子/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {flag: false}})/script/body
/html运行效果
3、 v-else 和 v-else-if
作用辅助v-if进行判断渲染语法v-else v-else-if“表达式”需要紧接着 v-if 使用
示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappp v-ifgender 1性别♂ 男/pp v-else性别♀ 女/phrp v-ifscore 90评级A奖励电脑一台/pp v-else-ifscore 70评级B奖励周末郊游/pp v-else-ifscore 60评级C奖励零食礼包/pp v-else评级D惩罚一周不能玩手机/p!-- 注意: 需要紧挨着 v-if 一起使用 --/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {gender: 1,score: 60}})/script/body
/html运行效果
3、事件绑定指令
使用Vue时为DOM注册事件语法如下
button v-on:事件名“内联语句”按钮button v-on:事件名“处理函数”按钮button v-on:事件名“处理函数(实参)”按钮v-on: 简写为
内联语句
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!--v-on 注册事件 添加监听 提供处理逻辑 --!-- v-on:click 中的 v-on:可以简写为 工作中我们使用 click--button clickcount---/buttonspan{{ count }}/spanbutton v-on:clickcount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 90}})/script
/body
/html运行效果
事件处理函数 注意事件处理函数应该写到一个跟data同级的配置项methods中 methods中的函数内部的this都指向Vue实例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title切换显示隐藏/titlestylebutton{padding:10px 20px;border-radius: 4px;cursor: pointer;background-color: #4fc08d;color: #fff;border:2px solid #1c8556; }/style
/head
bodydiv idappbutton clickfn切换显示隐藏/buttonh1 v-showisShow星辰大海/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app4 new Vue({el: #app,data: {// data 提供数据isShow: true},methods: {// methods 提供处理逻辑函数fn () {// 让提供的所有methods中的函数this都指向当前实例this.isShow !this.isShow}}})/script
/body
/html运行效果
3.给事件处理函数传参 如果不传递任何参数则方法无需加小括号methods方法中可以直接使用 e 当做事件对象 如果传递了参数则实参 $event 表示事件对象固定用法。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title星辰自动售货机/titlestyle.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 400px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}/style
/head
bodydiv idappdiv classboxh3星辰自动售货机/h3button clickbuy(5)可乐5元/buttonbutton clickbuy(10)咖啡10元/buttonbutton clickbuy(8)牛奶8元/button/divp银行卡余额{{ money }}元/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {money: 100},methods: {buy (price) {this.money - price}}})/script
/body
/html运行效果
4、属性绑定指令
作用 动态设置html的标签属性 比如src、url、title语法v-bind: 属性名“表达式”v-bind: 可以简写成 :
比如有一个图片它的 src 属性值是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值
img v-bind:srcurl /img :srcurl / v-bind可以省略
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlev-bind/title
/head
bodydiv idapp!-- v-bind:src :src --img v-bind:srcimgUrl v-bind:titlemsg altimg :srcimgUrl :titlemsg alt/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {imgUrl: ./imgs/10-02.png,msg: hello 星辰大海}})/script
/body
/html运行效果
5、列表渲染指令
Vue 提供了 v-for 列表渲染指令用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法其中
item 是数组中的每一项index 是每一项的索引不需要可以省略arr 是被遍历的数组
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3星辰水果店/h3ulli v-for(item, index) in list{{ item }} - {{ index }}/li/ululli v-foritem in list{{ item }}/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [西瓜, 苹果, 鸭梨, 香蕉]}})/script
/body
/html运行效果
v-for中的key
实例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph3星辰的书架/h3ul!-- v-for 中的 key - 不加 key: v-for 的默认行为会尝试 原地修改元素 (就地复用) --!-- key作用:给元素添加的唯一标识。 便于Vue进行列表项的正确排序复用。--!-- key 的值只能是 字符串 或 数字类型 --!-- 推荐使用 id 作为 key(唯一)不推荐使用 index 作为 key(会变化不对应) --li v-for(item, index) in booksListspan{{ item.name }}/spanspan{{ item.author }}/spanbutton clickdel(item.id)删除/button/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {booksList: [{ id: 1, name: 《红楼梦》, author: 曹雪芹 },{ id: 2, name: 《西游记》, author: 吴承恩 },{ id: 3, name: 《水浒传》, author: 施耐庵 },{ id: 4, name: 《三国演义》, author: 罗贯中 }]},methods: {del (id) {this.booksList this.booksList.filter(item item.id ! id)}}})/script
/body
/html运行效果
注意 key 的值只能是字符串 或 数字类型key 的值必须具有唯一性推荐使用 id 作为 key唯一不推荐使用 index 作为 key会变化不对应 6、双向绑定指令
所谓双向绑定就是
数据改变后呈现的页面结果会更新页面结果更新后数据也会随之而变
作用 给表单元素input、radio、select使用双向绑定数据可以快速 获取 或 设置 表单元素内容
语法 v-model“变量”
需求 使用双向绑定实现以下需求
点击登录按钮获取表单中的内容点击重置按钮清空表单中的内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- v-model 可以让数据和视图形成双向数据绑定(1) 数据变化视图自动更新(2) 视图变化数据自动更新可以快速[获取]或[设置]表单元素的内容--账户input typetext v-modelusername brbr密码input typepassword v-modelpassword brbrbutton clicklogin登录/buttonbutton clickreset重置/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,password: },methods: {login () {console.log(this.username, this.password)},reset () {this.username this.password }}})/script
/body
/html运行效果
总结
指令我们开发 vue 中最基础、最常用、最简单的知识点。
