襄阳建设网站首页,潮阳网站建设公司,用什么工具修改wordpress,自己做一个app最近听到很多人都在用Vue.js ,我也想凑凑热闹#xff0c;来个入门 啥的 #xff0c;要不以后人家说#xff0c;啥都不知道#xff0c;多low 看到官网 是这样介绍Vue.js Vue.js#xff08;读音 /vjuː/, 类似于 view#xff09; 是一套构建用户界面的 渐进式框架。与其他重…最近听到很多人都在用Vue.js ,我也想凑凑热闹来个入门 啥的 要不以后人家说啥都不知道多low 看到官网 是这样介绍Vue.js Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层。 在我第一天的学习后我觉得它和angular.js 有点像至于到底是不是这样 还需要深入学习。 我的理解 这个框架 让我在前端数据显示方面很简单 不用再写一堆js “” 什么的 这只是我目前浅层的理解 更深的以后会学习再说。 下面是我今天学习的代码里面有很多注释 是我自己的理解希望对有需要的人有帮助不需要的人自动略过谢谢。 一 !DOCTYPE
html
headmeta charsetutf-8titlevue01/titlescript typetext/javascript src../vue.js/script
/head
body!--声明式渲染 将数据渲染进DOM系统有一个特点 元素是响应式的 在浏览器控制台里改变 app.message的值 相应页面上的值也会改变--div idapp{{message}} !-- 数据 --/div
scriptvar app new Vue({el:#app,//这个应该就是包含data数据的元素的class或者id我是这么理解的data:{message:Hello Vue! // 渲染在页面上的数据}})
/script
/body
/html 二 body!--条件判断指令--div id appp v-ifseen我在呢/pp v-ifnoseen我在呢/p/div!-- 条件循环指令 在控制台里输入 app1.items.push({text:第四条}) 页面会多加一条--div idapp1olli v-foritem in items{{item.text}}/li/ol/div
scriptvar app new Vue({el:#app,//这个应该就是包含data数据的元素的class或者id我是这么理解的data:{seen:true, // 渲染在页面上的数据noseen:false}})var app1 new Vue({el:#app1,//这个应该就是包含data数据的元素的class或者id我是这么理解的data:{items:[{text:第一条},{text:第二条},{text:第三条}]}})
/script
/body 三 body!--绑定事件 单击事件v-on:click--div id appp v-on:mouseenterchange{{message}}/pbutton v-on:clickreversereverse/button/divscriptvar app new Vue({el:#app,//这个应该就是包含data数据的元素的class或者id我是这么理解的data:{message:Hello Vue.js!},methods:{ //方法reverse:function(){this.message this.message.split().reverse().join()},change:function(){this.message 你好吗;}}})/script
/body 四 body!--双向数据绑定 用v-model 连接数据--div id appp{{message}}/pinput v-modelmessage/divscriptvar app new Vue({el:#app,//这个应该就是包含data数据的元素的class或者id我是这么理解的data:{message:Hello Vue.js!},})/script/body 转载于:https://www.cnblogs.com/wangwei-exits/p/6253370.html
