网站开发工具的是什么,苏州做网站建设公司,服务器外面打不开网站,wordpress视频解析主题VUE
vue是一个用于构建用户界面的渐进式框架
创建一个VUE实例 核心步骤#xff1a; 准备容器引包#xff08;官网#xff09;-开发版本/生产版本创建一个vue实例 new vue()指定配置项-渲染数据 el指定挂载点#xff08;选择器#xff09;,指定管理的是哪个容器。dat…VUE
vue是一个用于构建用户界面的渐进式框架
创建一个VUE实例 核心步骤 准备容器引包官网-开发版本/生产版本创建一个vue实例 new vue()指定配置项-渲染数据 el指定挂载点选择器,指定管理的是哪个容器。data提供数据 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body
div idapp!-- 编写渲染的代码逻辑 --h1{{ msg }}/h1a{{count}}/a
/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscript//一旦引入了vuejs核心包在全局环境就有了vue构造函数const app new Vue({el: #app,data:{msg: Helloyyh,count: 666}})
/script
/body
/html插值表达式 作用 利用表达式进行插值将数据渲染到页面中 语法格式 {{ 表达式 }} 注意点 使用的数据要存在data支持的是表达式而非语句if… for不能在标签属性里面使用
响应式特性
数据改变视图会自动更新
如何访问或修改数据呢
访问数据实例.属性名修改数据“实例.属性名”值
指令 指令就是带有v-前缀的特殊属性不同属性对应不同的功能 v-html
v-html表达式动态设置元素innerHTML
v-show
作用控制元素显示隐藏语法v-show‘‘表达式’’ 值为true显示false隐藏原理切换 displaynone控制显示隐藏场景频繁切换显示隐藏的场景
v-if
作用控制元素显示隐藏条件渲染语法v-if“表达式” 表达式值为true显示false隐藏原理基于条件判断是否创建或移除元素节点场景要么显示要么隐藏不频繁切换场景
v-else v-else-if
作用辅助v-if进行判断渲染语法v-else v-else-if‘‘表达式’’注意需要紧挨着v-if一起使用
v-on 作用注册事件 添加监听提供处理逻辑 语法v-on事件名‘‘内联语句’’ v-on事件名‘‘methods中的函数名’’ 简写事件名
//内联语句方式
bodydiv idappbutton clickcount---/button //简写span{{ count }}/spanbutton v-on:clickcount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscript//一旦引入了vuejs核心包在全局环境就有了vue构造函数const app new Vue({el: #app,data:{count: 100}})/script
/body//methods方式
bodydiv idappbutton clickfn切换显示隐藏/buttonh1 v-showisshow杨雨涵/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app1 new Vue({el: #app,data:{isshow: true},methods:{fn(){//让提供的所有methods中的函数this都指向当前实例//app1 thisapp1.isshow !app1.isshow}}})/script
/bodyv-on调用传参
bodydiv idappbutton clickbuy(5)可乐5元/buttonbutton clickbuy(10)咖啡10元/buttonbrp银行卡余额{{ money }}元/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app1 new Vue({el: #app,data:{money: 100},methods:{buy(price){this.money-price;}}})/script
/bodyv-bind
作用动态的设置html的标签属性→src url title …语法v-bind属性名“表达式”简写“v-bind” 直接 “属性名”
div idappimg v-bind:srcurl
/divconst app new Vue({el:#app,data:{url:图片路径’}
})v-for 作用基于数据循环多次渲染整个元素 →数组、对象、数字… 遍历数组语法 v-for“(item,index) in 数组”、 item每一项index下标
bodydiv idappulli v-for(item, index) in list{{ item }}-{{ index }}/li/ululli v-for(item) in list{{ item }}/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app1 new Vue({el: #app,data:{list:[西瓜,苹果,鸭梨,榴莲]}})/script
/bodyv-for中的key
key作用给元素添加唯一标识便于vue进行列表项的正确排序复用注意点 key的值只能是字符串或数字类型key的值必须具有唯一性推荐使用id作为key(唯一)不推荐使用index作为key会变化不对应
li v-for(item,index)in xxx :key唯一值 v-model
作用给表单元素使用双向数据绑定→可以快速 获取 或 设置 表单元素内容 数据变化 → 视图自动更新视图变化 → 数据自动更新 语法v-model ‘变量’
bodydiv idapp账户input typetext v-modelusernamebrbr密码input typepassword v-modelpasswordbrbrbutton clicklogin登录/buttonbutton clickreset重置/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app1 new Vue({el: #app,data:{username:,password:},methods:{login (){console.log(this.username,this.password)},reset (){this.username this.password }}})/script
/body指令修饰符 通过 “.” 指明一些指令的后缀不同后缀封装了不同的处理操作 → 简化代码 按键修饰符 keyup.enter → 键盘回车监听 v-model修饰符 v-model.trim → 去除首尾空格 v-model.number → 转数字 事件修饰符 事件名.stop → 阻止冒泡 事件名.prevent → 阻止默认行为
v-bind-操作class
语法 :class“对象/数组” 对象→ 健就是类名值就是布尔值。如果值为true有这个类否则没有这个类 div classbox :class{类名1: 布尔值 , 类名2: 布尔值}/div适用场景一个类名来回切换 数组→ 数组中所有的类都会添加到盒子上本质就是一个class列表 div classbox :class[类名1类名2类名3]/div使用场景批量添加或删除类
bodydiv 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.7.16/dist/vue.js/scriptscriptconst app1 new Vue({el: #app,data:{activeindex: 0, //记录高亮list:[{id:1,name:京东秒杀},{id:2,name:每日特价},{id:3,name:品类秒杀}]}})/script
/body
v-bind-操作style
语法 :style“样式对象”
div classbox :style{css属性名1css属性值, css属性名2: css属性值}/div适用场景某个具体属性的动态设置
bodydiv idappdiv classprogressdiv 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.7.16/dist/vue.js/scriptscriptconst app1 new Vue({el: #app,data:{percent:25}})/script
/body计算属性computed 基于现有的数据计算出来的新属性。依赖的数据变化自动重新计算。 在computed配置项中一个计算属性对应一个函数使用起来和普通属性一样使用 {{ 计算属性名 }}
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.7.16/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 实例// 需求对 this.list 数组里面的 num 进行求和 → reducelet total this.list.reduce((sum, item) sum item.num, 0)return total}}})/script
/bodycomputed 计算属性 VS methods方法
computed计算属性
作用封装了一段对于数据的处理求得一个结果。语法写在computed配置项中。作为属性直接使用 → this.计算属性 {{计算属性}}缓存特性提升性能计算属性会对计算出来的结果缓存再次使用直接读取缓存依赖项变化了会自动重新计算并再次重新计算。
methods方法
作用给实例提供一个方法调用以处理业务逻辑语法写在methods配置项中。作为方法需要调用 → this.方法名() {{方法名()}} 事件名“方法名”
计算属性的完整写法 计算属性默认的简写只能读取访问不能修改。若要修改需要写计算属性的完整写法。 computed:{计算属性名:{get(){一段代码逻辑return 结果}set(修改的值){一段代码逻辑}
}}bodydiv idapp姓input typetext v-modelfirstName 名input typetext v-modellastName span{{ fullName }}/spanbrbrbutton clickchangeName改名卡/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {firstName: 刘,lastName: 备,},methods: {changeName () {this.fullName 黄忠}},computed: {// 简写 → 获取没有配置设置的逻辑// fullName () {// return this.firstName this.lastName// }// 完整写法 → 获取 设置fullName: {// (1) 当fullName计算属性被获取求值时执行get有缓存优先读缓存// 会将返回值作为求值的结果get () {return this.firstName this.lastName},// (2) 当fullName计算属性被修改赋值时执行set// 修改的值传递给set方法的形参set (value) { this.firstName value.slice(0, 1)this.lastName value.slice(1)}}}})/script
/bodywatch侦听器监视器
作用监视数据变化执行一些业务逻辑或异步操作
语法
简单写法 → 简单类型数据直接监视
data:{words:苹果,obj:{words:苹果}
},watch:{//该方法会在数据变化时触发执行数据属性名(newValue,oldValue){一些业务逻辑 或 异步操作}对象.属性名(newValue,oldValue){一些业务逻辑 或 异步操作}
}完整写法 →添加额外配置项 deep: true 对复杂类型深度监视immediate: true 是否立即执行一次handler方法
data:{obj:{words: 苹果,lang: italy}
},
watch:{//watch 完整写法数据属性名{deeptrue//深度监视handler(newValue){console.log(newValue)}}
}水果购物车案例
业务技术总结
渲染功能v-if/v-else v-for :class删除功能点击传参filter过滤覆盖原数组修改个数点击传参find找对象全选反选计算属性computed 完整写法get/set统计选中的总价和总数量计算属性computed reduce条件求和持久化到本地watch监视localStorageJSON.stringifyJSON.parse
