网站建设昆明网络公司,摄影个人网站模板,做电商网站价钱,交友app搭建目录
一. 插值
1.1 文本 1.2 原始HTML
1.3 属性
1.4 表达式
二. 指令
2.1 v-if/v-else-if/v-else指令
2.2 v-show指令
2.3 v-for指令
2.4 下拉框/复选框
2.5 动态参数 三. 过滤器
3.1 局部过滤器基本应用
3.2 局部过滤器串行使用
3.3 局部过滤器传参
3.4 全局过…目录
一. 插值
1.1 文本 1.2 原始HTML
1.3 属性
1.4 表达式
二. 指令
2.1 v-if/v-else-if/v-else指令
2.2 v-show指令
2.3 v-for指令
2.4 下拉框/复选框
2.5 动态参数 三. 过滤器
3.1 局部过滤器基本应用
3.2 局部过滤器串行使用
3.3 局部过滤器传参
3.4 全局过滤器
四. 计算属性和监听属性
4.1 计算属性
4.2 监听属性 一. 插值
1.1 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 div idappp1.文本/p{{msg}}/divscript typetext/javascriptnew Vue({el:#app,data(){return {msg:今天的不开心就到此为止吧}}})/script
效果 1.2 原始HTML
v-html指令会将数据中含有的标签解析后进行显示 div idappp2.原始HTML/pb v-htmlmsg2/b/divscript typetext/javascriptnew Vue({el:#app,data(){return {msg2:span stylecolor: red;今天的不开心就到此为止吧/span}}})/script
效果 1.3 属性
所有原生态的属性要利用vue的变量都要在属性前加v-bind指令 例b v-bind:classxxx/b 可以简写为b :classxxx/b !DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle插值/titlestyle.xx{font-size: 30px;}/style/headbodydiv idappp2.原始HTML/pb v-htmlmsg2/bp3.属性/pb :classmsg3 v-htmlmsg2/b/divscript typetext/javascriptnew Vue({el:#app,data(){return {msg2:span stylecolor: red;今天的不开心就到此为止吧/span,msg3:xx}}})/script/body
/html
效果 1.4 表达式
Vue提供了完全的js表达式支持 div idappp4.表达式/p和为{{num1}}br{{warn.substring(0,4)}}brinput v-modelok{{ok1?我很开心:我不开心}}/divscript typetext/javascriptnew Vue({el:#app,data(){return {num:6,warn:不许不开心,ok:1}}})/script
效果 二. 指令
指的是带有v-前缀的特殊属性
2.1 v-if/v-else-if/v-else指令
根据其后表达式的boolean值进行判断是否渲染该元素他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if div idappp1.v-if/v-else-if/v-else/pinput v-modelscoreb v-ifscore 60不及格/bb v-else-ifscore 60 score 70及格/bb v-else-ifscore 70 score 80中等/bb v-else-ifscore 80 score 90良好/bb v-else优秀 /b/divscript typetext/javascriptnew Vue({el:#app,data(){return {score:69}}})/script
效果 2.2 v-show指令
与v-if类似只是会渲染其身后表达式为false的元素而且会给这样的元素添加css代码styledisplay:none div idappp2.v-show/pb v-ifisShow展示/bb v-showisShow展示/b/divscript typetext/javascriptnew Vue({el:#app,data(){return {isShow:false}}})/script v-if这个标签在浏览器都不存在v-show有html代码只是被css样式隐藏了。 2.3 v-for指令
类似JS的遍历
遍历数组: v-foritem in items, items是数组item为数组中的数组元素
遍历对象: v-for(value,key,index) in stu, value属性值,key属性名index下标 div idappp3.v-for/pi v-fora in arr{{a}}nbsp;nbsp;/ibri v-foru in users{{u.name}}nbsp;nbsp;/ibri v-fori,u in users{{i}}nbsp;nbsp;/i/divscript typetext/javascriptnew Vue({el:#app,data(){return {arr:[1,2,3,4],users:[{name:程少商,id:1},{name:凌不疑,id:2},{name:许红豆,id:3},{name:谢之遥,id:4}]}}})/script
效果 2.4 下拉框/复选框 div idappp4.下拉框/复选框/pselectoption v-forh in hobbies :valueh.id{{h.name}}/option/selectdiv v-forh in hobbiesinput typecheckbox namehobbies :valueh.id{{h.name}}/div/divscript typetext/javascriptnew Vue({el:#app,data(){return {hobbies:[{name:跑步,id:1},{name:打游戏,id:2},{name:唱歌,id:3},{name:绘画,id:4}]}}})/script
效果 2.5 动态参数
从2.6.0开始可以用方括号括起来的JavaScript表达式作为一个指令的参数 a v-bind:[attrname]url ... /a
同样地你可以使用动态参数为一个动态的事件名绑定处理函数 a v-on:[evname]doSomething ... /a 注动态参数表达式有一些语法约束evName无效,evname有效回避大写 div idappp5.动态参数/pinput v-modelevnamebutton v-on:[evname]test点我点我/button/divscript typetext/javascriptnew Vue({el:#app,data(){return {evname:click}},methods:{test(){// 单击事件 双击事件alert(点我干嘛)}}})/script
效果 三. 过滤器
vue允许你自定义过滤器被用作一些常见的文本格式化格式如下
!-- 在两个大括号中 --
{{ name | capitalize }}
!-- 在 v-bind 指令中 --
div v-bind:idrawId | formatId/div 注1过滤器函数接受表达式的值作为第一个参数 注2过滤器可以串联 {{ message | filterA | filterB }} 注3过滤器是JavaScript函数因此可以接受参数 {{ message | filterA(arg1, arg2) }} 3.1 局部过滤器基本应用 div idappp1.局部过滤器基本应用/p{{msg}}br{{msg | filterA}}/divscript typetext/javascriptnew Vue({el:#app,filters:{filterA:function(v){return v.substr(0,6);}},data(){return {msg:今天的不开心就到此为止吧}}})/script
效果 3.2 局部过滤器串行使用 div idappp2.局部过滤器串行使用/p{{msg}}br{{msg | filterA | filterB}}/divscript typetext/javascriptnew Vue({el:#app,filters:{filterA:function(v){return v.substr(0,6);},filterB:function(v){return v.substr(2,4);}},data(){return {msg:今天的不开心就到此为止吧}}})/script 效果 3.3 局部过滤器传参 div idappp3.局部过滤器传参/p{{msg}}br{{msg | filterC(3,9)}}/divscript typetext/javascriptnew Vue({el:#app,filters:{filterC:function(v,begin,end){return v.substr(begin,end);}},data(){return {msg:今天的不开心就到此为止吧}}})/script
效果 3.4 全局过滤器
!DOCTYPE html
htmlheadmeta charsetutf-8script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srcdate.js/scripttitle过滤器/title/headbodydiv idappp4.全局过滤器/p{{time}}br{{time | all}}/divscript typetext/javascriptVue.filter(all, function(value) {return fmtDate(value);});new Vue({el:#app,data(){return {msg:今天的不开心就到此为止吧,time:new Date()}}})/script/body
/html
date.js
//给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();
};效果 四. 计算属性和监听属性
4.1 计算属性
计算属性可用于快速计算视图View中显示的属性。这些计算将被缓存并且只在需要时更新 computed:{} div idappp1.计算属性/p单价:input v-modelprice数量:input v-modelnum小计:{{subtotal}}/divscript typetext/javascriptnew Vue({el:#app,data(){return {price:79,num:1}},computed:{subtotal:function(){return this.price * this.num;}}})/script
效果: 4.2 监听属性
监听属性 watch我们可以通过 watch 来响应数据的变化 watch:{} div idappp2.监听属性/p千米:input v-modelkm /米:input v-modelm //divscript typetext/javascriptnew Vue({el:#app,data(){return {m:1000,km:1}},watch:{km:function(v){// v指的是被监听的属性kmthis.m parseFloat(v) * 1000;},m:function(v){// v指的是被监听的属性mthis.km parseFloat(v) / 1000;}}})/script
效果 计算属性是一个变量影响另一个变量单向影响。监听属性是双向影响。 五. 利用Vue实现一个简单的购物车
!DOCTYPE html
html
headtitle购物车/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script
/head
bodydiv idapph1购物车/h1table border0theadtrth商品名称/thth单价/thth数量/thth小计/th/tr/theadtbodytr v-for(item, index) in cartItems :keyindextd{{ item.name }}/tdtd{{ item.price.toFixed(2) }}/tdtdbutton clickdecreaseQuantity(index)-/button{{ item.quantity }}button clickincreaseQuantity(index)/button/tdtd{{ calculateSubtotal(item).toFixed(2) }}/td/tr/tbodytfoottrtd colspan3 stylefloat: right;总价/tdtd{{ calculateTotalPrice().toFixed(2) }}/td/tr/tfoot/table/divscriptnew Vue({el: #app,data: {cartItems: [{ name: 爱心棉花糖, price: 3.9, quantity: 1 },{ name: 精致小风扇, price: 29.9, quantity: 1 },{ name: 小猪佩奇鼠标, price: 30, quantity: 1 }]},methods: {increaseQuantity(index) {this.cartItems[index].quantity;},decreaseQuantity(index) {if (this.cartItems[index].quantity 1) {this.cartItems[index].quantity--;}},calculateSubtotal(item) {return item.price * item.quantity;},calculateTotalPrice() {let totalPrice 0;for (let i 0; i this.cartItems.length; i) {totalPrice this.calculateSubtotal(this.cartItems[i]);}return totalPrice;}}});/script
/body
/html效果
