php安防企业网站源码,wordpress文章功能,保定网站搜索排名,网站制作的服务机构目录
0 前言
1 准备工作
1.1 创建vue实例
1.2 vue开发者工具
2 插值表达式
2.1 基本用法
3 常用指令
3.1 内容渲染指令
3.1.1 v-text
3.1.2 v-html
3.2 条件渲染指令
3.2.1 v-show
3.2.2 v-if
3.2.3 v-else 和 v-else-if
3.3 事件绑定指令
3.3.1 内联语句
3.3…目录
0 前言
1 准备工作
1.1 创建vue实例
1.2 vue开发者工具
2 插值表达式
2.1 基本用法
3 常用指令
3.1 内容渲染指令
3.1.1 v-text
3.1.2 v-html
3.2 条件渲染指令
3.2.1 v-show
3.2.2 v-if
3.2.3 v-else 和 v-else-if
3.3 事件绑定指令
3.3.1 内联语句
3.3.2 事件处理函数
3.3.3 给事件处理函数传参
3.4 属性绑定指令
3.5 列表渲染指令
3.5.1 key
3.6 双向绑定指令v-model
4 指令修饰符
4.1 按键修饰符
4.2 v-model修饰符
4.3 事件修饰符
5 属性绑定指令操控样式
5.1 :class
5.1.1 对象
5.1.2 数组
5.2 :style
6 computed 计算属性
6.1 完整写法
6.2 computed计算属性 VS methods方法
6.2.1 computed计算属性
6.2.2 methonds方法
6.2.3 计算属性的优势
6.2.4 总结
7 watch监视器
7.1 简单写法
7.2 完整写法 0 前言
黑马程序员视频地址前端最新Vue2Vue3基础入门到实战项目全套教程
本章从vue2学起vue3内容将在后期专门用一章来讲述
本篇只记录大纲及要点具体请看黑马程序员视频及其提供的md笔记
vue2官网Vue.js
vue3官网Vue.js - 渐进式 JavaScript 框架 | Vue.js 1 准备工作
1.1 创建vue实例 1. 准备容器 (Vue所管理的范围) 2. 引包 (开发版本包 / 生产版本包) 官网 3. 创建实例 4. 添加配置项 完成渲染 bodydiv idapp!-- 这里将来会编写一些用于渲染的代码逻辑 --h1{{ 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 World,count: 666}})/script/body 1.2 vue开发者工具
安装网站极简插件官网_Chrome插件下载_Chrome浏览器应用商店
注意查看插件是否支持vue2 安装之后可以F12后看到多一个Vue的调试面板 2 插值表达式
2.1 基本用法
{{表达式}} 表达式 money 100 money - 100 money * 10 money / 10 price 100 ? 真贵:还行 obj.name arr[0] fn() obj.fn() 示例
h3{{title}}h3p{{nickName.toUpperCase()}}/pp{{age 18 ? 成年:未成年}}/pp{{obj.name}}/pp{{fn()}}/p 2.2 注意事项
1.在插值表达式中使用的数据 必须在data中进行了提供
p{{hobby}}/p //如果在data中不存在 则会报错2.支持的是表达式而非语句比如if for ...
p{{if}}/p3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
p title{{username}}我是P标签/p 3 常用指令
vue 中的指令按照不同的用途可以分为如下 6 大类 内容渲染指令v-html、v-text 条件渲染指令v-show、v-if、v-else、v-else-if 事件绑定指令v-on 属性绑定指令 v-bind 列表渲染指令v-for 双向绑定指令v-model 3.1 内容渲染指令
3.1.1 v-text 使用语法p v-textunamehello/p意思是将 uame 值渲染到 p 标签中 类似 innerText使用该语法会覆盖 p 标签原有内容 3.1.2 v-html 使用语法p v-htmlintrohello/p意思是将 intro 值渲染到 p 标签中 类似 innerHTML使用该语法会覆盖 p 标签原有内容 类似 innerHTML使用该语法能够将HTML标签的样式呈现出来。 3.2 条件渲染指令
3.2.1 v-show 作用 控制元素显示隐藏 语法 v-show 表达式 表达式值为 true 显示 false 隐藏 原理 切换 display:none 控制显示隐藏 场景频繁切换显示隐藏的场景 3.2.2 v-if 作用 控制元素显示隐藏条件渲染 语法 v-if 表达式 表达式值 true显示 false 隐藏 原理 基于条件判断是否创建 或 移除元素节点 场景 要么显示要么隐藏不频繁切换的场景 3.2.3 v-else 和 v-else-if 作用辅助v-if进行判断渲染 语法v-else v-else-if表达式 需要紧接着v-if使用 3.3 事件绑定指令 button v-on:事件名内联语句按钮/button button v-on:事件名处理函数按钮/button button v-on:事件名处理函数(实参)按钮/button v-on: 简写为 3.3.1 内联语句
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 3.3.2 事件处理函数 注意 事件处理函数应该写到一个跟data同级的配置项methods中 methods中的函数内部的this都指向Vue实例 3.3.3 给事件处理函数传参 如果不传递任何参数则方法无需加小括号methods方法中可以直接使用 e 当做事件对象 bodydiv idapp!-- 绑定事件处理函数不加小括号 --button clickhandleClick点击我/button/divscriptnew Vue({el: #app,methods: {handleClick(e) {// e 就是事件对象console.log(事件对象:, e);console.log(点击的元素:, e.target);}}});/script
/body 如果传递了参数则需额外传一个实参 $event 表示事件对象 bodydiv idapp!-- 传递额外参数同时使用 $event 表示事件对象 --button clickhandleClickWithParams(额外参数, $event)点击我/button/divscriptnew Vue({el: #app,methods: {handleClickWithParams(param, e) {// param 是传递的额外参数console.log(传递的额外参数:, param);// e 是事件对象console.log(事件对象:, e);console.log(点击的元素:, e.target);}}});/script
/body注意如果在内联事件处理中只传递一个参数而不使用 $event 来显式传递事件对象那么在 methods 中定义的方法里第二个形参将无法接收到事件对象 3.4 属性绑定指令 作用动态设置html的标签属性 比如src、url、title 语法v-bind:属性名“表达式” v-bind:可以简写成 : 比如有一个图片它的 src 属性值是一个图片地址。这个地址在数据 data 中存储。则可以这样设置属性值- img v-bind:srcurl /
- img :srcurl / v-bind可以省略3.5 列表渲染指令 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 开始 3.5.1 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会变化不对应 3.6 双向绑定指令v-model 作用 给表单元素input、radio、select使用双向绑定数据可以快速 获取 或 设置 表单元素内容 语法v-model变量 如 输入框 input:text —— value 文本域 textarea —— value 复选框 input:checkbox —— checked 单选框 input:radio —— checked 下拉菜单 select —— value ... bodydiv idapph3小黑学习网/h3姓名input typetext v-modelusername brbr是否单身input typecheckbox v-modelisSingle brbr!-- 前置理解1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性用于提交给后台的数据结合 Vue 使用 → v-model--性别: input v-modelgender typeradio namegender value1男input v-modelgender typeradio namegender value2女brbr!-- 前置理解1. option 需要设置 value 值提交给后台2. select 的 value 值关联了选中的 option 的 value 值结合 Vue 使用 → v-model--所在城市:select v-modelcityIdoption value101北京/optionoption value102上海/optionoption value103成都/optionoption value104南京/option/selectbrbr自我描述textarea v-modeldesc/textarea button立即注册/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {username: ,isSingle: false,gender: 2,cityId: 102,desc: }})/script
/body 4 指令修饰符
指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 — 简化代码
4.1 按键修饰符 类似keyup.enter —当点击enter键的时候才触发 除了enter其他的也可以 4.2 v-model修饰符 v-model.trim —去除首位空格 v-model.number —转数字 4.3 事件修饰符 事件名.stop — 阻止冒泡 事件名.prevent —阻止默认行为 事件名.stop.prevent —可以连用 即阻止事件冒泡也阻止默认行为 注意不一定严格按照上述分类使用如果能有相应效果也可以自由搭配使用 5 属性绑定指令操控样式
为了方便开发者进行样式控制 Vue 扩展了 v-bind 的语法可以针对 class 类名 和 style 行内样式 进行控制
5.1 :class
语法
div :class 对象/数组这是一个div/div 5.1.1 对象 当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类 div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div
适用场景一个类名来回切换
示例
div idappulli v-for(item, index) in list :keyitem.id clickactiveIndex indexa :class{ active: index activeIndex } href#{{ item.name }}/a/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 2, // 记录高亮list: [{ id: 1, name: 京东秒杀 },{ id: 2, name: 每日特价 },{ id: 3, name: 品类秒杀 }]}})/script
/body 5.1.2 数组 当class动态绑定的是数组时 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表 div classbox :class[ 类名1, 类名2, 类名3 ]/div
使用场景:批量添加或删除类 5.2 :style
语法
div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div
示例操作进度条
bodydiv idapp!-- 外层盒子底色 黑色 --div classprogress!-- 内层盒子 - 进度蓝色 --div classinner :style{ width: percent % }span{{ percent }}%/span/div/divbutton clickpercent 25设置25%/buttonbutton clickpercent 50设置50%/buttonbutton clickpercent 75设置75%/buttonbutton clickpercent 100设置100%/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 30}})/script
/body 6 computed 计算属性
基于现有的数据计算出来的新属性。 依赖的数据变化自动重新计算
语法 声明在 computed 配置项中一个计算属性对应一个函数 使用起来和普通属性一样使用 {{ 计算属性名}} 注意 computed配置项和data配置项是同级的 computed中的计算属性虽然是函数的写法但他依然是个属性 computed中的计算属性不能和data中的属性同名 使用computed中的计算属性和使用data中的属性是一样的用法 computed中计算属性内部的this依然指向的是Vue实例 示例
bodydiv idapph3小黑的礼物清单/h3tabletrth名字/thth数量/th/trtr v-for(item, index) in list :keyitem.idtd{{ item.name }}/tdtd{{ item.num }}个/td/tr/table!-- 目标统计求和求得礼物总数 --p礼物总数{{ totalCount }} 个/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {// 现有的数据list: [{ id: 1, name: 篮球, num: 1 },{ id: 2, name: 玩具, num: 2 },{ id: 3, name: 铅笔, num: 5 },]},computed: {totalCount () {// 基于现有的数据编写求值逻辑// 计算属性函数内部可以直接通过 this 访问到 app 实例// console.log(this.list)// 需求对 this.list 数组里面的 num 进行求和 → reducelet total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/body 6.1 完整写法 6.2 computed计算属性 VS methods方法
6.2.1 computed计算属性
作用封装了一段对于数据的处理求得一个结果
语法 1.写在computed配置项中 2.作为属性直接使用 js中使用计算属性 this.计算属性 模板中使用计算属性{{计算属性}} 6.2.2 methonds方法
作用给Vue实例提供一个方法调用以处理业务逻辑
语法 1.写在methods配置项中 2.作为方法调用 js中调用this.方法名() 模板中调用 {{方法名()}} 或者 事件名“方法名” 6.2.3 计算属性的优势 缓存特性提升性能 计算属性会对计算出来的结果缓存再次使用直接读取缓存 依赖项变化了会自动重新计算 → 并再次缓存 methods没有缓存特性 6.2.4 总结 1.computed有缓存特性methods没有缓存 2.当一个结果依赖其他多个值时推荐使用计算属性 3.当处理业务逻辑时推荐使用methods方法比如事件的处理函 7 watch监视器
监视数据变化执行一些业务逻辑或异步操作
watch同样声明在跟data同级的配置项中
7.1 简单写法
data: { words: 苹果,obj: {words: 苹果}
},watch: {// 该方法会在数据变化时触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },对象.属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}
示例 bodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselectoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransboxmela/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {// words: obj: {words: }},// 具体讲解(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值一般不用// words (newValue) {// console.log(变化了, newValue)// }obj.words (newValue) {console.log(变化了, newValue)}}})/script/body 7.2 完整写法
添加额外配置 deep:true 对复杂类型进行深度监听 immdiate:true 初始化立刻执行一次 data: {obj: {words: 苹果,lang: italy},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}
示例 bodydiv idapp!-- 条件选择框 --div classqueryspan翻译成的语言/spanselect v-modelobj.langoption valueitaly意大利/optionoption valueenglish英语/optionoption valuegerman德语/option/select/div!-- 翻译框 --div classboxdiv classinput-wraptextarea v-modelobj.words/textareaspani⌨️/i文档翻译/span/divdiv classoutput-wrapdiv classtransbox{{ result }}/div/div/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 需求输入内容修改语言都实时翻译// 接口地址https://applet-base-api-t.itheima.net/api/translate// 请求方式get// 请求参数// 1words需要被翻译的文本必传// 2lang 需要被翻译成的语言可选默认值-意大利// -----------------------------------------------const app new Vue({el: #app,data: {obj: {words: 小黑,lang: italy},result: , // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer setTimeout(async () {const res await axios({url: https://applet-base-api-t.itheima.net/api/translate,params: newValue})this.result res.data.dataconsole.log(res.data.data)}, 300)}}}})/script/body
