外贸网站下载,手机端怎样做网站建设,中卫网红美食打卡地,怎么给一个花店做网站建设Web前端-Vue2Vue3基础入门到实战项目-Day1 Vue快速上手创建一个Vue实例插值表达式Vue响应式特性 Vue指令指令初识 和 v-htmlv-show 和 v-ifv-else 和 v-else-ifv-on内联语句methods处理函数调用传参 v-bind案例 - 波仔的学习之旅v-forv-for基本使用案例 - 小黑的书架v-for的key… Web前端-Vue2Vue3基础入门到实战项目-Day1 Vue快速上手创建一个Vue实例插值表达式Vue响应式特性 Vue指令指令初识 和 v-htmlv-show 和 v-ifv-else 和 v-else-ifv-on内联语句methods处理函数调用传参 v-bind案例 - 波仔的学习之旅v-forv-for基本使用案例 - 小黑的书架v-for的key v-model 综合案例 - 小黑记事本来源 Vue快速上手
创建一个Vue实例
创建Vue实例, 初始化渲染的核心步骤:
准备容器引包(官网) - 开发版本 / 生产版本创建Vue实例 new Vue()指定配置项 el data 渲染数据 el: 指定挂载点, 选择器指定控制的是哪个盒子data: 提供数据
body
div idapph1{{ msg }}/h1a href#{{ count }}/a
/div!-- 引入开发版本包 - 包含完整的注释和警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscript// 引入VueJS核心包, 就有了Vue构造函数const app new Vue({// 通过 el 配置选择器, 指定 Vue 管理的是哪个盒子el: #app,// data 提供数据data: {msg: Hello Vue,count: 666}})
/script/body插值表达式
作用: 利用表达式进行插值, 将数据渲染页面中格式: {{ 表达式 }}注意点: 使用的数据要存在(data)支持的是表达式, 而非语句 if ... for不能在标签属性里使用
body
div idappp{{ nickname }}/pp{{ nickname.toUpperCase() }}/pp{{ nickname你好 }}/pp{{ age 18 ? 成年 : 未成年 }}/pp{{ friend.name }}/pp{{ friend.desc }}/p
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {nickname: tony,age: 18,friend: {name: jepson,desc: 热爱学习 Vue}}})
/script
/bodyVue响应式特性
响应式: 数据变化, 视图自动更新访问和修改数据 data中的数据, 会被添加到实例上访问数据: 实例.属性名修改数据: 实例.属性名 值
body
div idapp{{ msg }}
/div
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {msg: Hello Vue}})
/script
/bodyVue指令
指令初识 和 v-html
Vue指令: 带有v-前缀的特殊标签属性
bodydiv idappdiv v-htmlmsg/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {msg: a hrefhttp://www.itheima.com黑马程序员/a}})/script
/bodyv-show 和 v-if
v-show 底层原理:切换 css 的 display: none 来控制显示隐藏场景: 频繁切换显示隐藏的场景 v-if 底层原理: 根据 判断条件 控制元素的 创建 和 移除(条件渲染)场景: 要么显示, 要么隐藏, 不频繁切换的场景
head...style.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.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {flag: true}})/script
/bodyv-else 和 v-else-if
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/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {gender: 1,score: 80}})/script
/bodyv-on
内联语句
bodydiv idapp!-- button v-on:click--count-/button --!-- 鼠标进入 --!-- button v-on:mouseenter--count-/button --!-- 简化写法 --button click--count-/buttonspan{{ count }}/spanbutton v-on:clickcount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 100}})/script
/bodymethods处理函数
bodydiv idappbutton clickfn切换显示隐藏/buttonh1 v-showisShow黑马程序员/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {isShow: false},methods: {fn () {this.isShow !this.isShow}}})/script
/body调用传参
head...style.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}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)牛奶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: {buy (price) {this.money - price}}})/script
/bodyv-bind
作用: 动态地设置html的标签属性
bodydiv idapp!-- img v-bind:srcimgUrl v-bind:titlemsg alt --!-- 简写形式 --img v-bind:srcimgUrl v-bind:titlemsg alt/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {imgUrl: ./imgs/10-01.png,msg: Hello 波仔}})/script
/body案例 - 波仔的学习之旅
bodydiv idappbutton v-showindex 0 click--index上一页/buttondivimg :srclist[index] alt/divbutton v-showindex list.length - 1 clickindex下一页/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {index: 0,list: [./imgs/11-00.gif,./imgs/11-01.gif,./imgs/11-02.gif,./imgs/11-03.gif,./imgs/11-04.png,./imgs/11-05.png,]}})/script
/bodyv-for
v-for基本使用
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.7.14/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {list: [西瓜, 苹果, 鸭梨]}})/script
/body案例 - 小黑的书架
filter: 根据条件, 保留满足条件的对应项, 得到一个新数组
bodydiv idapph3小黑的书架/h3ulli v-for(item, index) in booksList :keyitem.idspan {{item.name}} /spanspan {{item.author}} /span!-- 通过 id 删除数组中的对应项(id比较稳定) --button clickdel(item.id)删除/button/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/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){// 通过 id 删除数组中的对应项 - filter(不会改变原数组)// filter: 根据条件, 保留满足条件的对应项, 得到一个新数组this.booksList this.booksList.filter(item item.id ! id)}}})/script
/bodyv-for的key
key的作用: 给元素添加的唯一标识, 便于Vue进行列表项的正确排序复用注意点 key的值只能是字符串或数字类型key的值必须具有唯一性推荐使用id作为key(唯一), 不推荐使用index作为key(会变化, 不对应) 不加key: v-for的默认行为会尝试 原地修改元素(就地服用)
v-model
作用: 给表单元素使用, 双向数据绑定 - 可以快速获取或设置表单元素的内容 数据变化, 视图自动更新视图变化, 数据自动更新
bodydiv idapp账户input typetext v-modelusername brbr密码input typepassword v-modelpassword brbrbutton clicklogin登录/buttonbutton clickreset重置/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/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综合案例 - 小黑记事本
功能总结:
列表渲染: v-forkey的设置{{}}插值表达式 删除功能: v-on调用传参filter过滤覆盖修改原数组 添加功能: v-model绑定unshift修改原数组添加 底部统计和清空 数组.length累计长度覆盖数组清空列表v-show控制隐藏
!DOCTYPE html
html langen
head
meta charsetUTF-8 /
meta http-equivX-UA-Compatible contentIEedge /
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relstylesheet href./css/index.css /
title记事本/title
/head
body!-- 主体区域 --
section idapp!-- 输入框 --header classheaderh1小黑记事本/h1input placeholder请输入任务 classnew-todo v-modeltodoName/button classadd clickadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item, index) in list :keyitem.iddiv classviewspan classindex {{index1}}. /span label {{item.name}} /labelbutton classdestroy clickdel(item.id)/button/div/li/ul/section!-- 统计和清空 --footer classfooter v-showlist.length 0!-- 统计 --span classtodo-count合 计:strong {{list.length}} /strong/span!-- 清空 --button classclear-completed clickclear清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptconst app new Vue({el: #app,data: {list: [{id: 1, name: 跑步两公里},{id: 2, name: 跳绳500下}],todoName: },methods: {del(id){this.list this.list.filter(item item.id ! id)},add(){if(this.todoName.trim() ){alert(请输入任务名称)return}this.list.unshift({id: new Date(),name: this.todoName})this.todoName },clear(){this.list []}}})/script
/body
/html来源
黑马程序员. Vue2Vue3基础入门到实战项目
