俄罗斯外贸常用网站,百度地图手机网站代码,wordpress插件多说,免费信息发布网站大全Vue
01. Vue 快速上手
1.1 Vue 的基本概念
用于 构建用户界面 的 渐进性 框架
构建用户界面#xff1a;基于数据去渲染用户看到的界面渐进式#xff1a;不需要学习全部的语法就能完成一些功能#xff0c;学习是循序渐进的框架#xff1a;一套完整的项目解决方案#x…Vue
01. Vue 快速上手
1.1 Vue 的基本概念
用于 构建用户界面 的 渐进性 框架
构建用户界面基于数据去渲染用户看到的界面渐进式不需要学习全部的语法就能完成一些功能学习是循序渐进的框架一套完整的项目解决方案可以大大的提升开发效率
1.2 创建 Vue 实例
bodydiv idapp!-- 编写用于渲染的代码逻辑 --{{ msg }}/div!-- 引入的是开发版本的包包括完整的注释和介绍 --script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscript// 导包后就有了 vue 全局函数const app new Vue({// 通过 el 配置选择器指定管理的是哪个盒子el: #app,// 通过 data 来提供数据data: {msg: 你好,vue}})/script
/body1.3 插值表达式
插值表达式是一种 Vue 的模板语法利用它可以进行插值将数据渲染到页面中
语法{{ 表达式 }}注意只能使用表达式不能使用语句且不可以在标签属性中去使用插值表达式 div idappp{{ nickname }}/pp{{ age 18 ? 成年 : 未成年 }}/pp{{friend.num}}/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new new Vue({el: #app,data: {nickname: 用户名,age: 19, friend: {num: 10}}})/script1.4 响应式特性
数据被修改的话它对应的视图也会立刻更新这就是响应式特性
bodydiv idapp{{msg}}/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {msg: 你好}});app.msg 你好呀;/script
/body开发者只需要聚焦于数据关注业务的核心逻辑根据业务修改即可而不需要再自己获取 DOM 元素再去修改。
1.5 Vue 开发者工具
下载地址https://chrome.zzzmh.cn/info/nhdogjmejiglipccpnnnanhbledajbpd
安装步骤
通过网站下载压缩包开启谷歌开发者模式将压缩包直接拖拽到界面内进行安装开启允许访问文件地址 拖拽安装完成后点击详情找到下面的选项
关闭浏览器再重新打开就可以在开发者工具栏找到 Vue 选项
02. Vue 指令
2.1 指令入门
Vue 会根据不同的指令针对标签实现不同的功能
指令以 v- 前缀的特殊的 标签属性
比如 v-html 可以实现动态的解析标签
bodydiv idapp v-htmlsrc/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {src: a hrefhttps://www.baidu.com/ 百度一下 /a }})/script
/body官方文档https://v2.cn.vuejs.org/v2/api/
2.2 v-show VS v-if 指令
指令效果语法v-show控制元素显示或者隐藏v-show“表达式” true 显示false隐藏v-if控制元素显示还是隐藏条件渲染v-show“表达式” true 显示false隐藏
下面我们来看这两个的区别先给出一段代码
bodydiv idappdiv v-ifflgv-if 控制的盒子/divdiv v-showflgv-show 控制的盒子/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new new Vue({el: #app,data: {flg: true}})/script
/body下面让我们来看看真实渲染后的代码是什么样子的 当表达式为 true 的时候这两个指令渲染出来的代码没有任何区别但当我们改为 false 后可以很清晰的看到 v-if 控制的盒子直接会从 DOM 中移除而 v-show 只是为它加了 display-none 属性而已
那这两个属性应该在什么时候使用呢
性能考虑 当页面中的内容不经常切换时使用 v-if 更合适因为它在条件变为假时销毁元素减少了页面的渲染负担。当需要频繁切换显示与隐藏时使用 v-show 可能更好因为它只是简单地切换 CSS 的 display 属性避免了频繁地创建和销毁DOM元素。 DOM 操作和复杂性 如果希望避免频繁地销毁和重建DOM元素可以使用 v-show。它保留了元素在DOM中的存在只是控制其显示与隐藏。如果元素不经常显示或者显示时不需要保留其状态和事件监听器可以考虑使用 v-if因为它在条件为假时会销毁元素及其状态。 初次加载性能考虑 如果初始加载时不需要显示某个元素v-if 可能更适合因为它不会将元素添加到DOM中。如果初始加载时需要显示元素但可能在后续需要频繁切换其显示与隐藏v-show 可能更合适因为它保留了元素在DOM中的存在。
2.3 v-else v-else-if 指令
通过 v-if v-else-if v-else 的组合我们可以实现各种复杂的逻辑判断比如我们想要实现遵循如下规则显示数据 这种对于多个条件的判断就可以通过上面的组合去实现
代码
bodydiv idappp v-ifgender 1性别♂ 男/pp v-else性别♀ 女/phrp v-ifscore 90成绩评定A:奖励电脑一台/pp v-else-ifscore 70 score 90成绩评定B:奖励周末郊游/pp v-else-ifscore60 score 70成绩评定C:奖励零食礼包/pp v-else成绩评定D:惩罚一周不能玩手机/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {gender: 1,score: 0}})/script
/body需要注意的是 v-else 上面必须有 v-if 否则会出现错误
2.4 v-on 指令
v-on 帮助我们简化了注册时间的步骤也就是实现了给元素 添加监听器 和 实现处理逻辑
有两种写法分别是内联语句和函数名写法内联语句用于实现简单的、不太需要维护的逻辑函数名的写法用来书写复杂的逻辑
2.4.1 内联语句
语法v-on:EVENT内敛语句或者methods中的函数名
bodydiv idappbutton v-on:clicknum---/buttonspan{{num}}/spanbutton v-on:clicknum/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {num: 100}})/script
/body这样我们就实现了利用按钮控制数字的一个效果
因为事件需要经常注册所以 Vue 为我们提供了简写的方法
EVETN比如上面的例子中就可以通过 click 来实现相同的逻辑
2.4.1 methods 中的函数
下面再来看第二种方式我们想要做一个点击实现显示或者隐藏的功能就可以通过如下的方式实现但是当我们写出下面代码的时候会发现点击出现了问题这是因为在 JavaScript 函数中写一个未声明的变量会直接去寻找全局变量所以但 flg 是对象中的属性所以应该通过 this.flg 调用
bodydiv idappbutton clickfn切换显示隐藏/buttonh1 v-showflg黑马程序员/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {flg: true},methods: {fn () {if (this.flg) {// flg false; 是错误的this.flg false;} else {this.flg true;}}}})/script
/body2.4.1 参数传递
如果我们想要在调用函数的时候传递参数就需要用到参数传递的写法
语法EVENTF(传递的参数) 比如我们想实现上面的功能点击购买物品的时候减少钱数对于这种逻辑完全相同的处理可以通过一个函数实现但是因为减的钱数不一样需要向里面传递参数
代码
bodydiv idappdiv classboxh3小黑自动售货机/h3button clickfn (5)可乐5元/buttonbutton clickfn (10)咖啡10元/button/divp银行卡余额{{money}}元/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {money: 100},methods: {fn (a) {this.money - a;}} })/script
/body2.5 v-bind 指令
可以帮助我们动态的设置 html 的标签属性比如 - src url title 等等
语法v-bind:属性名表达式
缩写形式:属性名表达式
比如我们可以动态的设置图片的显示
bodydiv idappimg :srcsrc alt/div
/bodyscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {src: ./imgs/10-01.png}})/script我们可以通过修改 app 中的 src 来动态的修改显示的图片 2.6 v-for 指令
可以基于 数据 循环多次 渲染整个元素
可以遍历数组、对象和数字对象和数字用的非常少
遍历数组的语法v-for(item, index) in 数组
其中 item 是我们拿到的每一项index 是下标
div idapph3小黑水果店/h3ulli v-for(item, index) in list{{item}}/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [西瓜, 苹果, 鸭梨]}})/script下面来看一个案例实现列表的渲染与删除 效果如上图所示当我们点击删除后就删除这条元素
div idapph3小黑的书架/h3ulli v-for(item) in booksListspan{{item.name}}/spanspan{{item.author}}/spanbutton clickdel(item.id)删除/button/li/ul
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
script
const 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 {return item.id ! id});}}})
/script2.7 v-for 中的 key 规范的写法是上图所示的
key的作用给元素加上一个唯一标识便于 Vue 及性能列表项的正确的排序复用
注意点
key 的值只能是字符串或者数字类型key 的值必须具有唯一性推荐使用 id 作为 key不推荐使用可能变化的值作为 key
下面我们来看一个具体的示例继续以上面的案例开始我们给第一个 li 添加上一个背景色看看删除的时候是如何变化的 删除 可以很明显的看到是这个标签被删除了因为我们添加了唯一的标识所以删除数组的元素的时候会根据这个标识来删除对应的 li 标签
但如果我们没有加这个 key 呢 点击删除 那我们原来添加红色背景的这个 li 标签是仍然存在的这是因为如果不加 key 的话会默认去删除最后一个 标签也就是当前在的标签for 遍历到最后一个这时候就出现了我们不想要的效果会导致一些其他的相关问题。
2.8 v-model 指令
可以给表单元素使用使用后可以实现双向数据绑定可以快速的 获取 和 设置 表单元素的内容 语法v-model变量 div idapp账户input typetext v-modelusername brbr密码input typepassword brbrbutton登录/buttonbutton重置/button/divscriptconst app new Vue({el: #app,data: {username: }})/script
