国内有做网游评测的网站么新华社最新消息的新闻

当前位置： 首页 > news >正文

国内有做网游评测的网站么,新华社最新消息的新闻,wordpress evolve,查看网站有没有备案前言 前面我们学习了Vue的基础入门#xff0c;接下来我们学习有关Vue的模板语法#xff0c;学习Vue语法能提高我们的前端开发效率 Vue.js 使用了基于 HTML 的模板语法#xff0c;允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML 接下来我们学习有关Vue的模板语法学习Vue语法能提高我们的前端开发效率   Vue.js 使用了基于 HTML 的模板语法允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML 所以能被遵循规范的浏览器和 HTML 解析器解析。vue将模板编译成虚拟dom结合响应系统Vue 能够智能地计算出最少需要重新渲染多少组件并把 DOM 操作次数减到最少 一插值 1.1 文本           {{msg}} bodydiv idwenbenh1文本/h1{{msg}}/divscript new Vue({el:#wenben,data(){return{msg:Hello Smart!}}});/script 1.2 html       使用v-html指令用于输出html代码    !DOCTYPE html htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script/headbodydiv idwenbenphtml解析/ph1 v-htmlmsg2/h1/divscript new Vue({el:#wenben,data(){return {msg2:span stylecolor:red;Hello Smart!/span}}});/script/body /html 1.3 属性 !DOCTYPE html htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptstyle.f40{font-size: 100px;} /style/headbodydiv idwenbenp属性/ph1 :classmsg3 v-htmlmsg2/h1/divscript new Vue({el:#wenben,data(){return {msg2:span stylecolor:red;Hello Smart!/span,msg3:f40}}});/script/body /html 1.4 表达式 !DOCTYPE html htmlheadmeta charsetutf-8title/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptstyle.f40{font-size: 40px;} /style/headbodydiv idwenben!– h1文本/h1 –!– {{msg1}} –!– phtml解析/ph1 v-htmlmsg2/h1 –!– p属性/ph1 :classmsg3 v-htmlmsg2/h1 –!–表达式–{{num10}},{{warm.substr(9,15)}},input v-modelok/{{ok1?被打了:不行我要还回去}}/divscript new Vue({el:#wenben,data(){return {// msg1:Hello Smart!,// msg2:span stylecolor:red;Hello Smart!/span,// msg3:f40num:10,warm:nishigedashuaige,ok:1}}});/script/body /html 二指令 1.v-ifv-elsev-else-if !DOCTYPE html htmlheadmeta charsetutf-8title指令的使用/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script/headbody!– 定义边界 –div idzzh1v-if…的使用/h1input v-modelyanzhi/br/b v-ifyanzhi60丑男/bb v-else-ifyanzhi60 yanzhi70看得过去/bb v-else-ifyanzhi70 yanzhi80小帅/bb v-else-ifyanzhi80 yanzhi90美男子/bb v-else 吴彦祖/b/div/bodyscript typetext/javascript// 构建vue实例 绑定边界 new Vue({el:#zz,data(){return{yanzhi:60,}},})/script/body /html 2.v-show 与v-if类似只是会渲染其身后表达式为false的元素而且会给这样的元素添加css代码:styledisplay:none !DOCTYPE html htmlheadmeta charsetutf-8title指令的使用/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script/headbody!– 定义边界 –div idzzh1v-if|v-else|v-else-if的使用/h1input v-modelyanzhi/br/b v-ifyanzhi60丑男/bb v-else-ifyanzhi60 yanzhi70看得过去/bb v-else-ifyanzhi70 yanzhi80小帅/bb v-else-ifyanzhi80 yanzhi90美男子/bb v-else 吴彦祖/bp v-showyanzhi90v-show-成为大神的人/p p v-ifyanzhi90v-if-成为大神的人p/div/bodyscript typetext/javascript// 构建vue实例 绑定边界 new Vue({el:#zz,data(){return{yanzhi:60,}},})/script/body /html 3 v-for 类似JS的遍历    遍历数组: v-foritem in items, items是数组item为数组中的数组元素       遍历对象: v-for(value,key,index) in stu, value属性值,key属性名index下标 html代码 !DOCTYPE html html langen headmeta charsetUTF-8title指令/title!– jQuery–script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script!– vue.js–script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script /head body !– 定义边界 – div idapph1v-for的使用/h1下拉框select v-modelhobbySelectedoption v-forh in hobby :valueh.id{{h.name}}/option/selectbr复选框div v-forh in hobbyinput :valueh.id typecheckbox/{{h.name}}/div /div /body script typetext/javascript// 绑定边界 new Vue({el: #app,data() {return {hobby: [{id: 1, name: 一杀},{id: 2, name: 二杀},{id: 3, name: 三杀},{id: 4, name: 四杀}]};}}) /script/html 4 动态参数      从2.6.0开始可以用方括号括起来的JavaScript表达式作为一个指令的参数     a v-bind:[attrname]url … /a    同样地你可以使用动态参数为一个动态的事件名绑定处理函数   button v-on:[evname]dt点击事件/button    注1动态参数表达式有一些语法约束evName无效,evname有效回避大写 !DOCTYPE html htmlheadmeta charsetutf-8title过滤器/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script/head!– 定义边界 –div idapph1动态参数/h1input v-modelevname /button v-on:[evname]test点击/button/divscript typetext/javascript// 构建vue实例 绑定边界 new Vue({el:#app,data(){return{evname:click};},methods: {test(){alert(点一点更棒!);}}})/script /html 三过滤器 3.1 局部过滤器   vue允许自定义过滤器一般用于常见的文本格式化过滤器可用的两个地方双花括号插值与v-bind表达式过滤器应该被添加在js表达式的尾部使用管道运算符 | !DOCTYPE html htmlheadmeta charsetutf-8title过滤器的使用/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script/headbody!– 定义边界 –div idB{{msg}}br /{{msg|single}}br /{{msg|param(0,2)}}/divscript typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #B,data() {return {msg: 或许就像他们说~};},filters: {single: function(val) {return val.substring(4, 8);},param: function(val, start, end) {return val.substring(start, end);}}})/script/body /html 3.2 全局过滤器 拷入date.js日期格式化放入项目js目录中在页面中引入。 定义全局过滤器  !DOCTYPE html html headmeta charsetUTF-8title全局过滤器/title!– vue.js–script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srcdate.js/script /head body !– 定义边界 – div idBh3全局过滤器/h3{{time}}br{{time | fmtDateFilter}} /div /body script typetext/javascript// 全局过滤器Vue.filter(fmtDateFilter, function (value) {return fmtDate(value);});// 绑定边界 ES6具体体现new Vue({el: #B,data() {return {time: new Date()};}}) /script /html 四计算属性监听器 4.1 计算属性 计算属性可用于快速计算视图View中显示的属性。这些计算将被缓存并且只在需要时更新。 使用场景当一个属性需要复杂的逻辑运算之后才能获取其值可以使用计算属性在一个计算属性中可以完成各种复杂的逻辑包括运算方法调用等只要最终返回一个结果就可以了 语法computed:{} !DOCTYPE html html langen headmeta charsetUTF-8title计算属性/title!– vue.js–script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script /head body div idB单价input v-modelprice数量input v-modelnum总价input v-modelcount /div /body script typetext/javascriptnew Vue({el: #B,data() {return {price: 50,num: 1}},computed: {count: function () {return this.price * this.num}}}) /script /html 4.2 监听器 !DOCTYPE html html langen headmeta charsetUTF-8title监听属性/title!– vue.js–script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script /head body !– 定义边界 – div idBp监听属性/p千米input v-modelkm/米input v-modelm/ /div /body script typetext/javascript// 绑定边界 ES6具体体现new Vue({el: #B,data() {return {km: 2,m: 2000};},watch: {// v指的是m变量m: function (v) {this.km parseInt(v) / 1000;},// v指的是km变量km: function (v) {this.m parseInt(v) * 1000;}}}) /script/html 五、购物车实现 购物车代码 !DOCTYPE html html head meta charsetUTF-8 !–引入vue.js–script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script title购物车/title styleth, td {padding: 15px;text-align: center;} /style /head body div idBdiv h1购物车/h1table width80% border1 cellspacing1 cellpadding1theadtrth商品名/thth数量/thth单价/thth小计/th/tr/theadtbodytr v-foritem in items :keyitem.idtd h3 class{{ item.name }}/h3/tdtd classbutton clickupdatetity(item, -1)-/button!– 绑定事件 –span classquantity-label{{ item.quantity }}/spanbutton clickupdatetity(item, 1)/button/tdtd class{{ item.price }}/tdtdp class{{ subtotal(item) }}/p/td/tr/tbodytfoottrtd colspan3/tdtdp class colspan4 sty总计{{ count() }}/p/td/tr/tfoot/center/table/div /divscript new Vue({el: #B,data: {items: [{ id: 1, name: 乒乓球, price: \(2, quantity: 1 },{ id: 2, name: 足球, price: \)109, quantity: 2 },{ id: 3, name: 篮球, price: \(150, quantity: 1 },{ id: 4, name: 羽毛球, price: \)99, quantity: 2 },]},methods: {updatetity(item, amount) {item.quantity amount;},subtotal(item) {return \( (parseFloat(item.price.slice(1)) * item.quantity).toFixed(2);},count() {let total 0;for (let item of this.items) {total parseFloat(item.price.slice(1)) * item.quantity;}return \) total.toFixed(2);}} }); /script /body /html