太原门户网站,用ai做网页设计,电商公司名字大全,教育局建设网站的必要性目录 #xff08;一#xff09;初识指令和内容渲染指令v-html
1.v-html
案例#xff1a;
官网的API文档
#xff08;二#xff09;条件渲染指令v-show和v-if
1. v-show
2. v-if
#xff08;三#xff09;条件渲染指令v-else和v-else-if
案例
#xff08;四…目录 一初识指令和内容渲染指令v-html
1.v-html
案例
官网的API文档
二条件渲染指令v-show和v-if
1. v-show
2. v-if
三条件渲染指令v-else和v-else-if
案例
四事件绑定指令 v-on 1.内联语句 简写
2.事件处理函数 3.给事件处理函数传参
五属性绑定指令v-bind
六列表渲染指令v-for
1.v-for中的key
区别加key-不加key
七双向绑定指令v-model 一初识指令和内容渲染指令v-html Vue 会根据不同的 【指令】 针对标签实现不同的 【功能】 指令带有 v- 前缀 的 特殊 标签属性 1.v-html 作用设置元素的 innerHTML 语法v-html 表达式 案例 body div idapp div v-htmlmsg/div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { msg: a hrefhttps://www.baidu.com baidu /a } }) /script /body 官网的API文档 二条件渲染指令v-show和v-if
1. v-show 作用 控制元素显示隐藏 语法 v-show 表达式 表达式值 true 显示 false 隐藏 原理 切换 display:none 控制显示隐藏 场景 频繁切换显示隐藏的场景 2. v-if 作用 控制元素显示隐藏条件渲染 语法 v-if 表达式 表达式值 true 显示 false 隐藏 原理 基于条件判断是否 创建 或 移除 元素节点 场景 要么显示要么隐藏不频繁切换的场景 示例代码 html head style .box { border: 3px solid #000000; border-radius: 10px; padding: 20px; margin: 20px; width: 200px; } /style /head body div idapp div v-showflag classbox我是v-show控制的盒子/div div v-ifflag classbox我是v-if控制的盒子/div /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { flag:true, } }) /script /body /html 演示截图 当flag为true时 当flag为false时 1.v-show的底层原理 切换css的diaplay: none来控制显示还是隐藏 2.v-if的底层原理 根据判断条件来控制元素的创建和移除当结果为true时当前元素就创建出来为false时元素就销毁 三条件渲染指令v-else和v-else-if 1. 作用 辅助 v-if 进行判断 渲染 2. 语法 v-else v-else-if 表达式 3. 注意 需要紧挨着 v-if 一起使用 案例 示例代码 html head title 案例 /title /head body div idapp p v-ifgender 1性别♂ 男/p p v-else性别♀ 女/p hr p v-ifscore 90成绩评定A奖励电脑一台/p p v-else-ifscore 70成绩评定B奖励周末郊游/p p v-else-ifscore 60成绩评定C奖励零食礼包/p p v-else成绩评定D惩罚一周不能玩手机/p /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el: #app, data: { gender:1, score:80 } }) /script /body /html 演示截图 四事件绑定指令 v-on 作用注册时间添加时间提供处理逻辑 语法 button v-on:事件名内联语句按钮/button button v-on:事件名处理函数按钮/button button v-on:事件名处理函数(实参)按钮/button v-on: 简写为 1.内联语句 bodydiv idappbutton v-on:clickcount---/buttonspan{{count}}/spanbutton v-on:clickcount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst appnew Vue({el:#app,data: {count:111}})/script/body 页面实现 事件名也不是非要写click可以换成别的比如mouseenter bodydiv idappbutton v-on:mouseentercount---/buttonspan{{count}}/spanbutton v-on:mouseentercount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst appnew Vue({el:#app,data: {count:111}})/script/body 将鼠标移到“-”和“”按钮不用点击就可实现加减 简写 将v-on:这一整块换成也就是换成click同样可以实现 2.事件处理函数 内联语句只适用逻辑简单的语句当逻辑代码多了的时候就需要更换了 语法 v-on:事件名 methods中的函数名 注意 事件处理函数应该写到一个跟data同级的配置项methods中 methods中的函数内部的this都指向Vue实例 案例 在页面设置一个按钮能够多次切换隐藏文字 bodydiv idappbutton clickfun()切换显示隐藏/buttonh2 v-showisShow嘿嘿嘿/h2/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst appnew Vue({el:#app,data: {isShow:true},methods:{fun(){app.isShow !app.isShow}}})/script/body 运行结果 把app换成this也是可以的这样的可读性更高 3.给事件处理函数传参 如果不传递任何参数则方法无需加小括号methods方法中可以直接使用 e 当做事件对象 如果传递了参数则实参 $event 表示事件对象固定用法。 语法格式 clickfn(参数1,参数2) 案例 设置一个box提供几个按钮模拟买果汁设置不同的饮料不同的价格将每个饮料的价格参数传到事件处理函数中更改剩余的钱的余额 headtitlev-on指令案例/titlestyle.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}/style/headbodydiv idappdiv classboxh2小蔡自动售货机/h2button clickbuy(2)可口可乐3元/buttonbutton clickbuy(4)橙汁4元/buttonbutton clickbuy(5)咖啡5元/button/divp银行卡余额{{money}}元/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst appnew Vue({el:#app,data: {money:100000},methods:{buy(price){this.money-price}}})/script/body 运行效果; 五属性绑定指令v-bind 作用动态设置html的标签属性 比如src、url、title 语法v-bind:属性名“表达式” v-bind:可以简写成 : 案例 动态绑定图片和一段文字 div idappimg v-bind:srcurl v-bind:titlemsg alt/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst appnew Vue({el:#app,data:{url:./img/1.png,msg:金木}})/script 运行结果 简写 运行结果 六列表渲染指令v-for Vue 提供了 v-for 列表渲染指令用来辅助开发者基于一个数组来循环渲染一个列表结构。 v-for 指令需要使用 (item, index) in arr 形式的特殊语法其中 item 是数组中的每一项 index 是每一项的索引不需要可以省略 arr 是被遍历的数组 此语法也可以遍历对象和数 作用多次渲染整个元素数组数字对象基于数据循环遍历数组语法v-for(item,index) in 数组 案例 遍历一个数组并在页面上输出 bodyscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptdiv idappdiv v-for(item,index) in list{{item}} - {{index}}/div/divscriptconst appnew Vue({el:#app,data:{list:[菠萝,苹果,橘子,榴莲]}})/script/body 运行结果 在渲染的时候我们只用到了item那么我们是否可以省略index呢 可以 运行结果 1.v-for中的key 语法 key唯一值 作用给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。 为什么加keyVue 的默认行为会尝试原地修改元素就地复用 实例代码 ulli v-for(item, index) in booksList :keyitem.idspan{{ item.name }}/spanspan{{ item.author }}/spanbutton clickdel(item.id)删除/button/li
/ul 注意 key 的值只能是字符串 或 数字类型 key 的值必须具有唯一性 推荐使用 id 作为 key唯一不推荐使用 index 作为 key会变化不对应 区别加key-不加key key的作用给元素添加唯一标识 v-for 的默认行为会尝试 原地修改元素 就地复用 当不加key删除元素的时候程序就会直接在前几个数据里修改比如删除第一个那么就会把第一个元素的文字删除了但是其他的一些属性没有删除然后把下面的文字提上来。 七双向绑定指令v-model 所谓双向绑定就是 数据改变后呈现的页面结果会更新 页面结果更新后数据也会随之而变 可以快速获取或设置表单元素的内容 作用 给表单元素input、radio、select使用双向绑定数据可以快速 获取 或 设置 表单元素内容 语法v-model变量 需求使用双向绑定实现以下需求 点击登录按钮获取表单中的内容 点击重置按钮清空表单中的内容 代码示例 bodyscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptdiv idapp用户名input typetext v-modelusername brbr密码input typepassword v-modelpassword brbrbutton clicklogin登录/buttonbutton clickreset重置/button/divscriptconst appnew Vue({el:#app,data:{username:,password:},methods:{login(){console.log(this.username,this.password)},reset(){this.username,this.password}}})/script/body 运行结果 点击重置 点击登录
