标签：org size script inner 支持 注意 strong 按钮 gui
Vue.js 是一套构建用户界面的 渐进式框架。 https://cn.vuejs.org/v2/guide/
Vue介绍：
特点：MVVM框架 易学，轻量，灵活
MVVM框架：Model（数据） View（视图） View Modle（视图数据）
VM:通过视图去操作数据，也能通过数据操作视图（双向数据绑定）
拓展 MVC：Model View Control (数据、视图、控制器)
Vue和angular简单对比：
Vue----简单，易学，弱主张，只要会点html、css、js，加点vue的思想就能学会（自由）
指令以v-xxx，属性方法均挂在Vue的实例上，适用于移动端项目
angular---学习曲线陡峭，框架粘性很强（强主张）只要一开始用，那么这个项目就要一直用它，不能喝别的框架耦合。
指令以ng-xxx，属性方法均挂在$scope上，使用与pc端项目
均不支持IE8以下版本
Vue全家桶：vuejs + vue-router + vuex + vue-cli
项目全家桶：框架全家桶 + node + 数据库
<style> .active{ background: yellow; } </style> /************************************/ <body> <div id="ppa"> <!-- 循环数据，当点击的时候把当前的key传到changeC中 --> <button v-for="(val,key) in content" @click="changeC(key)" :class="{active:key==num}" > 按钮{{key+1}} </button> <!-- 循环数组，只要key等于num的就显示 --> <div v-for="(val,key) in content" v-show="key==num" >{{val}}</div> </div> <script src="vue.js"></script> <script> new Vue({ el:‘#ppa‘,//父元素的id 或 class methods:{//method 方法 :{ 放事件函数 } changeC(key){ this.num = key; } }, data:{//放数据 content:[‘1111‘,‘2222‘,‘3333‘], num:0 } }) </script> </body>
<style> #app-div div{ width: 100px; height: 100px; } .red{ background: red; } .green{ background: green; } </style> </head> <body> <div id=‘app-div‘> <button @click=‘changeC‘>点击变绿</button> <button @click=‘changeR‘>点击变红</button> <button @click=‘change‘>变</button> <!-- <div :class="c"></div> --> <div :class=‘[c1,c2]‘></div>//c1.class,c2.class哪个是true，就显示哪个class。都为true，后面的会覆盖前面的 </div> <script src="./Vue.js"></script> <script> new Vue({ el:‘#app-div‘, methods:{ changeC(){ this.onOff = false; this.c1.red=this.onOff; this.c2.green=!this.onOff; }, changeR(){ this.onOff = true; this.c1.red=this.onOff; this.c2.green=!this.onOff; }, change(){ this.onOff=!this.onOff this.c1.red = this.onOff this.c2.green = !this.onOff } }, data:{ onOff:true, c1:{ red:‘‘ }, c2:{ green:‘‘ } } }) </script> </body>
标签：org size script inner 支持 注意 strong 按钮 gui
原文地址：https://www.cnblogs.com/MrZhujl/p/10197891.html
