吉林省 网站建设,wordpress 特别慢,wordpress手机端如何,展厅设计收费标准一、为什么要学习Vue
1.前端必备技能
2.岗位多#xff0c;绝大互联网公司都在使用Vue
3.提高开发效率
4.高薪必备技能#xff08;Vue2Vue3#xff09;
二、什么是Vue
概念#xff1a;Vue (读音 /vjuː/#xff0c;类似于 view) 是一套 **构建用户界面 ** 的 渐进式 …一、为什么要学习Vue
1.前端必备技能
2.岗位多绝大互联网公司都在使用Vue
3.提高开发效率
4.高薪必备技能Vue2Vue3
二、什么是Vue
概念Vue (读音 /vjuː/类似于 view) 是一套 **构建用户界面 ** 的 渐进式 框架
Vue2官网https://v2.cn.vuejs.org/
1.什么是构建用户界面
基于数据渲染出用户可以看到的界面 2.什么是渐进式
所谓渐进式就是循序渐进不一定非得把Vue中的所有API都学完才能开发Vue可以学一点开发一点
Vue的两种开发方式
1. Vue核心包开发
场景局部模块改造
2. Vue核心包Vue插件工程化
场景整站开发
3.什么是框架
所谓框架就是一套完整的解决方案
举个栗子
如果把一个完整的项目比喻为一个装修好的房子那么框架就是一个毛坯房。
我们只需要在“毛坯房”的基础上增加功能代码即可。
提到框架不得不提一下库。
库类似工具箱是一堆方法的集合比如 axios、lodash、echarts等框架是一套完整的解决方案实现了大部分功能我们只需要按照一定的规则去编码即可。
下图是 库 和 框架的对比。 框架的特点有一套必须让开发者遵守的规则或者约束
三、创建Vue实例 我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面那应该怎么做呢 核心步骤4步
准备容器引包官网 — 开发版本/生产版本创建Vue实例 new Vue()指定配置项渲染数据 el:指定挂载点data提供数据 四、插值表达式 {{}} 插值表达式是一种Vue的模板语法,我们可以用插值表达式渲染出Vue提供的数据 1.作用利用表达式进行插值渲染到页面中
表达式是可以被求值的代码JS引擎会讲其计算出一个结果
以下的情况都是表达式
money 100
money - 100
money * 10
money / 10
price 100 ? 真贵:还行
obj.name
arr[0]
fn()
obj.fn()2.语法
插值表达式语法{{ 表达式 }}
h3{{title}}h3p{{nickName.toUpperCase()}}/pp{{age 18 ? 成年:未成年}}/pp{{obj.name}}/pp{{fn()}}/p3.错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
p{{hobby}}/p //如果在data中不存在 则会报错2.支持的是表达式而非语句比如if for ...
p{{if}}/p3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
p title{{username}}我是P标签/p五、响应式特性
1.什么是响应式
简单理解就是数据变视图对应变。
2.如何访问 和 修改 data中的数据响应式演示
data中的数据, 最终会被添加到实例上
① 访问数据 “实例.属性名”
② 修改数据 “实例.属性名” “值” 六、Vue开发者工具安装
通过谷歌应用商店安装国外网站极简插件下载推荐 https://chrome.zzzmh.cn/index
安装步骤 安装之后可以F12后看到多一个Vue的调试面板 七、Vue中的常用指令
概念指令Directives是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
为啥要学提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类
内容渲染指令v-html、v-text条件渲染指令v-show、v-if、v-else、v-else-if事件绑定指令v-on属性绑定指令 v-bind双向绑定指令v-model列表渲染指令v-for
指令是 vue 开发中最基础、最常用、最简单的知识点。
八、内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个 v-text类似innerText 使用语法p v-textunamehello/p意思是将 uame 值渲染到 p 标签中类似 innerText使用该语法会覆盖 p 标签原有内容 v-html类似 innerHTML 使用语法p v-htmlintrohello/p意思是将 intro 值渲染到 p 标签中类似 innerHTML使用该语法会覆盖 p 标签原有内容类似 innerHTML使用该语法能够将HTML标签的样式呈现出来。
代码演示 div idapph2个人信息/h2// 既然指令是vue提供的特殊的html属性所以咱们写的时候就当成属性来用即可p v-textuname姓名/p p v-htmlintro简介/p/div scriptconst app new Vue({el:#app,data:{uname:张三,intro:h2这是一个strong非常优秀/strong的boyh2}})
/script九、条件渲染指令
条件判断指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个分别是 v-show 作用 控制元素显示隐藏语法 v-show “表达式” 表达式值为 true 显示 false 隐藏原理 切换 display:none 控制显示隐藏场景频繁切换显示隐藏的场景 v-if 作用 控制元素显示隐藏条件渲染语法 v-if “表达式” 表达式值 true显示 false 隐藏原理 基于条件判断是否创建 或 移除元素节点场景 要么显示要么隐藏不频繁切换的场景 示例代码 body!-- v-show底层原理切换 css 的 display: none 来控制显示隐藏v-if 底层原理根据 判断条件 控制元素的 创建 和 移除条件渲染--div 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/bodyv-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/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {gender: 2,score: 95}})/script/body
/html十、事件绑定指令
使用Vue时如需为DOM注册事件及其的简单语法如下
button v-on:事件名“内联语句”按钮button v-on:事件名“处理函数”按钮button v-on:事件名“处理函数(实参)”按钮v-on: 简写为 内联语句 div idappbutton 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: 100}})/script事件处理函数 注意 事件处理函数应该写到一个跟data同级的配置项methods中methods中的函数内部的this都指向Vue实例
bodydiv idappbutton clickfn切换显示隐藏/buttonh1 v-showisShow学习vue/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app4 new Vue({el: #app,data: {isShow: true},methods: {fn () {// 让提供的所有methods中的函数this都指向当前实例// console.log(执行了fn, app.isShow)// console.log(app3 this)this.isShow !this.isShow}}})/script
/body3.给事件处理函数传参 如果不传递任何参数则方法无需加小括号methods方法中可以直接使用 e 当做事件对象 如果传递了参数则实参 $event 表示事件对象固定用法。 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的标签属性 比如src、url、title语法**v-bind:**属性名“表达式”v-bind:可以简写成 :
比如有一个图片它的 src 属性值是一个图片地址。这个地址在数据 data 中存储。
则可以这样设置属性值
img v-bind:srcurl /img :srcurl / v-bind可以省略 div idappimg 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十二、小案例-波仔的学习之旅
需求默认展示数组中的第一张图片点击上一页下一页来回切换数组中的图片
实现思路
1.数组存储图片路径 [‘url1’,‘url2’,‘url3’…]
2.可以准备个下标index 去数组中取图片地址。
3.通过v-bind给src绑定当前的图片地址
4.点击上一页下一页只需要修改下标的值即可
5.当展示第一张的时候上一页按钮应该隐藏。展示最后一张的时候下一页按钮应该隐藏
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappbutton v-showindex 0 clickindex--上一页/buttondivimg :srclist[index] alt/divbutton v-showindex list.length - 1 clickindex下一页/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/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
/body
/html十三、列表渲染指令
Vue 提供了 v-for 列表渲染指令用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 (item, index) in arr 形式的特殊语法其中
item 是数组中的每一项index 是每一项的索引不需要可以省略arr 是被遍历的数组
此语法也可以遍历对象和数字
//遍历对象
div v-for(value, key, index) in object{{value}}/div
value:对象中的值
key:对象中的键
index:遍历索引从0开始//遍历数字
p v-foritem in 10{{item}}/p
item从1 开始十四、小案例-小黑的书架
需求
1.根据左侧数据渲染出右侧列表v-for
2.点击删除按钮时应该把当前行从列表中删除获取当前行的id利用filter进行过滤 准备代码
!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 booksList :keyitem.idspan{{ item.name }}/spanspan{{ item.author }}/span!-- 注册点击事件 → 通过 id 进行删除数组中的 对应项 --button 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) {// console.log(删除, id)// 通过 id 进行删除数组中的 对应项 → filter(不会改变原数组)// filter: 根据条件保留满足条件的对应项得到一个新数组。// console.log(this.booksList.filter(item item.id ! id))this.booksList this.booksList.filter(item item.id ! id)}}})/script
/body
/html十五、v-for中的key
语法 key“唯一值”
作用: 给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
为什么加key:Vue 的默认行为会尝试原地修改元素就地复用
实例代码
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会变化不对应
十六、双向绑定指令
所谓双向绑定就是
数据改变后呈现的页面结果会更新页面结果更新后数据也会随之而变
作用 给表单元素input、radio、select使用双向绑定数据可以快速 获取 或 设置 表单元素内容
语法:v-model“变量”
需求:使用双向绑定实现以下需求
点击登录按钮获取表单中的内容点击重置按钮清空表单中的内容 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv 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十七、综合案例-小黑记事本 功能需求 列表渲染 删除功能 添加功能 底部统计 和 清空
!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 v-modeltodoName placeholder请输入任务 classnew-todo /button clickadd classadd添加任务/button/header!-- 列表区域 --section classmainul classtodo-listli classtodo v-for(item, index) in list :keyitem.iddiv classviewspan classindex{{ index 1 }}./span label{{ item.name }}/labelbutton clickdel(item.id) classdestroy/button/div/li/ul/section!-- 统计和清空 → 如果没有任务了底部隐藏掉 → v-show --footer classfooter v-showlist.length 0!-- 统计 --span classtodo-count合 计:strong {{ list.length }} /strong/span!-- 清空 --button clickclear classclear-completed清空任务/button/footer
/section!-- 底部 --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script// 添加功能// 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容// 2. 点击按钮进行新增往数组最前面加 unshiftconst app new Vue({el: #app,data: {todoName: ,list: [{ id: 1, name: 跑步一公里 },{ id: 2, name: 跳绳200个 },{ id: 3, name: 游泳100米 },]},methods: {del (id) {// console.log(id) filter 保留所有不等于该 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
