比wordpress更好的网站程序,吉林做网站的公司,营销技巧分享,青海省住房和城乡建设厅 网站首页目录
一、模版语法
1.1 插值
1.1.1 文本
1.1.2 html解析
1.1.3 属性
1.1.4 表达式
1.2 指令
1.2.1 核心指令
1.2.3 动态参数
二、过滤器
2.1 局部过滤器
2.2 全局过滤器
三、计算属性
四、监听器
五、排座案例
小结#xff1a;计算属性和监听属性的区别 一、模…目录
一、模版语法
1.1 插值
1.1.1 文本
1.1.2 html解析
1.1.3 属性
1.1.4 表达式
1.2 指令
1.2.1 核心指令
1.2.3 动态参数
二、过滤器
2.1 局部过滤器
2.2 全局过滤器
三、计算属性
四、监听器
五、排座案例
小结计算属性和监听属性的区别 一、模版语法
1.1 插值 Vue.js 使用了基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML 所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom结合响应系统Vue 能够智能地计算出最少需要重新渲染多少组件并把 DOM 操作次数减到最少。 html模板语法: 这是一种基于字符串的模板技术,以字符串和数据为输入,通过用正则表达式将占位符替换为所需数据的方式,构建出完整的 HTML 字符串。 1.1.1 文本 直接使用{{xxx}}的形式标签将会被替换成为数据对象data上xxx属性值当绑定的数据对象上的xxx属性值发生变化时插值处的值也会发生变化双向绑定 div idxw {{msg}} /div 1.1.2 html解析
如果要输出html格式的数据需要使用v-html指令。
!DOCTYPE html
htmlheadmeta charsetutf-8 /titlehtml解析/title!-- 1.导入工具 --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script/headbody!-- 2.定义边界 --div idxwdiv v-htmlhtmlstr/div/div!-- 3.构建vue实例并绑定边界 --scriptnew Vue({el: #xw,data() {return {htmlstr: h3 stylecolor:blue;这是一个html片段/h3}}})/script/body
/html 1.1.3 属性
HTML属性中的值应使用v-bind指令。类型与jQuery中的$(#xxx).attr(NameVal)
!DOCTYPE html
htmlheadmeta charsetutf-8 /titlehtml解析/title!-- 1.导入工具 --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptstyle.blueClass{font-size: 30px;color: skyblue;}/style/headbody!-- 2.定义边界 --div idxwp v-bind:classhontColor哈哈/p/div!-- 3.构建vue实例并绑定边界 --scriptnew Vue({el: #xw,data() {return {hontColor:blueClass,}}})/script/body
/html 也可以这样写
//在html使用v-bind:style指令设置样式
p v-bind:stylecolor哈哈/p
data() {return {//定义一个属性其值为所需样式color:color: yellowgreen;}
} 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持: {{str.substr(0,3)}}{{ number 1 }}{{ ok ? YES : NO }}li v-bind:idlist- id我的Id是js动态生成的/li 示例1字符截取
!-- 在html中加入元素定义表达式 --
p{{str.substring(5,9)}}/p
data() {return {str: 大家都叫我king}
} 示例二很简单就不一一演示了
p数字:{{number1}}/p
p{{ok ? yes : no}}/p
span :idusers_id_id小威/span
new Vue({el: #xw,data() {return {number: 99,ok: false,id: 66}}}) 1.2 指令
1.2.1 核心指令 v-if|v-else|v-else-if 根据其后表达式的bool值进行判断是否渲染该元素 v-show与v-if类似只是会渲染其身后表达式为false的元素而且会给这样的元素添加css代码styledisplay:none v-for类似JS的遍历 v-bind在上面已用到添加属性或元素 v-onv-on:也可以用替代,在上篇已讲述过用来调用函数。 v-model用来自动更新绑定的元素的值 示例1
!DOCTYPE html
htmlheadmeta charsetutf-8title核心指令/titlescript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxw分数input v-modelscore /div v-ifscore80优秀/divdiv v-else-ifscore60良好/divdiv v-elsescore60还需努力/div/div/bodyscript typetext/javascriptnew Vue({el: #xw,data() {return {score: 60}}})/script/html 示例二
div v-showscore90v-show-上优秀学员名单/div 示例3
结合v-model实现下拉框和复选框
!DOCTYPE html
htmlheadmeta charsetutf-8title核心指令/titlescript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxwpv-for/pselect v-modelhobbySelectedoption v-forh in hobby :valueh.id{{h.name}}/option/selectdiv v-forh in hobbyinput :valueh.id typecheckbox /{{h.name}}/div/div/bodyscript typetext/javascriptnew Vue({el: #xw,data() {return {hobby: [{id: 1,name: beautifulgirl},{id: 2,name: 按摩},{id: 3,name: 洗jio}],hobbySelected: 3};}})/script/html 示例4
!--参数href--
diva v-bind:hrefurlbaidu/a
/div!--
参数动态参数.
attname需要在data中定义,
注意attname要全部小写!!
--
diva v-bind:[attrname]urlbaidu/abutton v-on:[evname]clickme点我看看/button
/div 1.2.3 动态参数
注意在动态参数中作为参数的变量名如attrname要全部小写否则无效
!DOCTYPE html
htmlheadmeta charsetutf-8title动态参数/titlescript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxwp动态参数/pinput v-modelevname /button v-on:[evname]handle动态参数/button/div/bodyscript typetext/javascriptnew Vue({el: #xw,data() {return {evname:dblclick}methods: {handle() {alert(触发事件);}}})/script
/html Vue为v-bind和v-on这两个最常用的指令提供了特定简写 指令简写示例v-bind:xxx:xxxv-bind:href 简写为 :hrefv-on:xxxxxxv-on:click 简写为 click 二、过滤器 vue允许自定义过滤器一般用于常见的文本格式化过滤器可用的两个地方双花括号插值与v-bind表达式过滤器应该被添加在js表达式的尾部使用管道运算符 | 2.1 局部过滤器
!DOCTYPE html
htmlheadmeta charsetutf-8title过滤器/titlescript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxw{{msg}}br /{{msg|single}}br /{{msg|param(2,3)}}/divscript typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #xw,data() {return {msg: bug快离开~bug快离开~};},filters: {single: function(val) {return val.substring(2, 3);},param: function(val, start, end) {return val.substring(start, end);}}})/script/body
/html 注1过滤器函数接受表达式的值作为第一个参数 注2过滤器可以串联 {{ message | filterA | filterB }}注3过滤器是JavaScript函数因此可以接受参数 {{ message | filterA(arg1, arg2) }} 2.2 全局过滤器
时间转换案例
//给Date类添加了一个新的实例方法format
Date.prototype.format function (fmt) {//debugger;var o {M: this.getMonth() 1, //月份d: this.getDate(), //日h: this.getHours(), //小时m: this.getMinutes(), //分s: this.getSeconds(), //秒q: Math.floor((this.getMonth() 3) / 3), //季度S: this.getMilliseconds() //毫秒};if (/(y)/.test(fmt))fmt fmt.replace(RegExp.$1, (this.getFullYear() ).substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp(( k )).test(fmt))fmt fmt.replace(RegExp.$1, (RegExp.$1.length 1) ? (o[k]) : ((00 o[k]).substr(( o[k]).length)));return fmt;
};function fmtDate(date, pattern) {var ts date.getTime();var d new Date(ts).format(yyyy-MM-dd hh:mm:ss);if (pattern) {d new Date(ts).format(pattern);}return d.toLocaleString();
};拷入date.js日期格式化放入项目js目录中在页面中引入。 定义全局过滤器 !DOCTYPE html
htmlheadmeta charsetutf-8title过滤器/titlescript srcjs/date.js/scriptscript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxwp{{date | fmtDate}}/p无过滤器:br /{{date}}/divscript typetext/javascript// 全局过滤器Vue.filter(fmtDate, function(value) {return fmtDate(value, yyyy年MM月dd日)});// 绑定边界 ES6具体体现new Vue({el: #xw,data() {return {date: new Date()};}})/script/body
/html 三、计算属性 计算属性可用于快速计算视图View中显示的属性。这些计算将被缓存并且只在需要时更新。 使用场景当一个属性需要复杂的逻辑运算之后才能获取其值可以使用计算属性在一个计算属性中可以完成各种复杂的逻辑包括运算方法调用等只要最终返回一个结果就可以了 语法computed:{} 购物车案例
!DOCTYPE html
htmlheadmeta charsetutf-8title计算属性/titlescript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxwp计算属性/ptable border1 stylewidth: 600px;height: 300px;trtd物品/tdtd单价/tdtd数量/tdtd小计/td/trtrtd帽子/tdtd{{maoziDanjia}}/tdtdinput v-modelmaozi //tdtd{{maoziTotal}}/td/trtrtd衣服/tdtd{{yifuDanjia}}/tdtdinput v-modelyifu //tdtd{{yifuTotal}}/td/trtrtd裤子/tdtd{{kuziDanjia}}/tdtdinput v-modelkuzi //tdtd{{kuziTotal}}/td/trtrtd总价/tdtd colspan3{{total}}/td/tr/table/div/bodyscript typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #xw,data() {//定义所需属性值return {maoziDanjia: 10,yifuDanjia: 30,kuziDanjia: 20,maozi: 1,yifu: 1,kuzi: 1,km: 2,m: 2000};},computed: {maoziTotal() {return this.maoziDanjia * this.maozi;},yifuTotal() {return this.yifuDanjia * this.yifu;},kuziTotal() {return this.kuziDanjia * this.kuzi;},total() {return this.maoziTotal this.yifuTotal this.kuziTotal;}}})/script
/html 四、监听器 监听属性 watch我们可以通过 watch 来响应数据的变化 语法watch:{} 示例 米和厘米的单位换算
!DOCTYPE html
htmlheadmeta charsetutf-8title计算属性/titlescript srcjs/vuejquery.js/script/headbody!-- 定义边界 --div idxwp监听属性/p米input v-modelm /厘米input v-modelcm //div/bodyscript typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #xw,data() {return {m: 2,cm: 200};},watch: {// v指的是m变量m: function(v) {this.cm parseInt(v) * 100;},// v指的是km变量cm: function(v) {this.m parseInt(v) / 100;}}})/script
/html 五、排座案例
!DOCTYPE html
htmlheadtitle排座/titlescript srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script/headbodydiv idapph2排座/h2input typetext v-modelseatInput1input typetext v-modelseatInput2input typetext v-modelseatInput3hrh3用户:/h3ul!-- 遍历过滤器传来的值 --li v-foruser in filteredUsers :keyuser.id{{ user.name }}/li/ulhr/divscriptnew Vue({el: #app,data: {seatInput1: ,seatInput2: ,seatInput3: ,users: [{id: 1,name: 老王},{id: 2,name: 老六},{id: 3,name: 老八},{id: 4,name: 老聂},{id: 5,name: 老五}]},/* 定义一个filteredUsers计算属性 */computed: {/* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数该回调函数会对数组中的每个元素进行判断并返回一个新的数组其中包含满足条件的元素。 */filteredUsers() {return this.users.filter(/* 使用箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user表示users数组中的每个元素。 */user {/* 使用逻辑运算符来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。如果满足这个条件说明user.name不等于任何一个输入框的值那么这个元素就会被保留在过滤后的数组中。 */return user.name ! this.seatInput1 user.name ! this.seatInput2 user.name ! this.seatInput3});}}});/script/body
/html 小结计算属性和监听属性的区别
计算属性是一种依赖于其他属性计算得出的属性。它的值是根据其依赖的属性动态计算而来的并且会进行缓存只有在依赖的属性发生变化时才会重新计算。计算属性适用于需要根据其他属性进行复杂计算或处理的场景。通过使用计算属性可以将复杂的逻辑封装起来使代码更加清晰和可维护。
监听属性是一种用于监听指定属性变化并执行相应操作的属性。当监听的属性发生变化时可以执行指定的回调函数来响应变化。监听属性适用于需要在属性变化时执行异步或开销较大的操作的场景。通过使用监听属性可以实时监测属性的变化并执行相应的操作例如发送网络请求或执行复杂的计算。 计算属性适用于根据其他属性进行计算得出结果的场景而监听属性适用于需要实时监测属性变化并执行相应操作的场景。两者的区别在于计算属性是根据其他属性进行计算得出结果而监听属性是在属性变化时执行相应操作。
