跟着b站上的视频来学
首先什么是vue.js？
跟着b站上视频来学：(oﾟvﾟ)ノ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="vue.min.js"></script> <!-- 绑定数据--> <!-- <div id="app">--> <!-- <counter heading="Likes" ></counter>--> <!-- <counter heading="Disliakes" ></counter>--> <!-- </div>--> <!-- <template id="counter-template">--> <!-- <div>--> <!-- <h1>{{heading}}</h1>--> <!-- <button @click="count += 1" >Submit {{count}}</button>--> <!-- </div>--> <!-- </template>--> <!-- <script>--> <!-- Vue.component('counter',{--> <!-- template:'#counter-template',--> <!-- props:['heading'], //代表heading是变量--> <!-- data:function () {--> <!-- return{count:0};--> <!-- }--> <!-- })--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- mygame:"shsdhjsd"--> <!-- }--> <!-- })--> <!-- </script>--> <!-- 第一步：调用数据--> <!-- <div id="app">--> <!-- <p>game you love</p>--> <!-- <input v-model="mygame">--> <!-- </div>--> <!-- <script>--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- mygame:"超级马里奥"--> <!-- }--> <!-- })--> <!-- </script>--> <!-- v-on 调用不同的事件（简写为@）--> <!-- <div id="app">--> <!-- <p>你最喜欢的游戏:{{mygame}}</p>--> <!-- <button v-on:click="btnclick('我的世界')">我的世界</button>--> <!-- <button v-on:click="btnclick('塞尔达')">塞尔达</button>--> <!-- <button v-on:click="btnclick('勇者斗恶龙')">勇者斗恶龙</button>--> <!-- </div>--> <!-- <script>--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- mygame:"超级马里奥"--> <!-- },--> <!-- methods:{--> <!-- btnclick:function (pname) {--> <!-- this.mygame = pname;--> <!-- }--> <!-- }--> <!-- });--> <!-- </script>--> <!-- 组件：--> <!-- item循环games数组，得到元素，将得到的元素给组件中的变量game进行操作--> <!-- <div id="app">--> <!-- <ol>--> <!-- <game-item v-for="item in games" v-bind:game="item"></game-item>--> <!-- </ol>--> <!-- </div>--> <!-- <script>--> <!-- Vue.component('game-item',{--> <!-- props:['game'],--> <!-- template:'<li>{{game.title}}</li>'--> <!-- }--> <!-- )--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- games:[--> <!-- {title:'斗地主'},--> <!-- {title:'打麻将'},--> <!-- {title:'UNO'}--> <!-- ]--> <!-- }--> <!-- });--> <!-- </script>--> <!--过滤器：格式化变量内容的输出(日期格式化、字母大小写。。)--> <!-- <div id="app">--> <!-- <p>{{message}}</p>--> <!-- <p>{{message | toupper}}</p>--> <!-- <hr/>--> <!-- <p>现在的vue.js的学习进度是{{num | topercentage}}</p>--> <!-- </div>--> <!-- <script>--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- message:'hello world!',--> <!-- num : 0.3,--> <!-- },--> <!-- filters:{--> <!-- toupper:function (value) {--> <!-- return value.toUpperCase();--> <!-- },--> <!-- topercentage:function (value) {--> <!-- return value*100+'%';--> <!-- }--> <!-- }--> <!-- });--> <!-- </script>--> <!-- 计算属性：处理元数据，便于进行二次利用--> <!-- <div id="app">--> <!-- 今年发行的游戏的价格是{{price}}，含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.--> <!-- </div>--> <!-- <script>--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- price:29980,--> <!-- },--> <!-- computed:{--> <!-- priceInTax:function () {--> <!-- return this.price*1.08;--> <!-- },--> <!-- priceChinaRMB:function () {--> <!-- return Math.round(this.priceInTax/16.75);--> <!-- }--> <!-- }--> <!-- });--> <!-- </script>--> <!-- 监视属性(监视属性是否发生变化)：与computed属性类似，用于观察变量的变化，然后进行处理--> <!-- <div id="app">--> <!-- 今年发行的游戏的价格是{{price}}，含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.--> <!-- <hr/>--> <!-- <button @click="btnClick(10000)">加价10000</button>--> <!-- </div>--> <!-- <script>--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- price:29980,--> <!-- priceInTax:0,--> <!-- priceChinaRMB:0,--> <!-- },--> <!-- watch:{--> <!-- price:function (newVal,oldVal) {--> <!-- console.log(newVal,oldVal);--> <!-- this.priceInTax = Math.round(this.price *1.08);--> <!-- this.priceChinaRMB = Math.round(this.priceInTax /16.75);--> <!-- }--> <!-- },--> <!-- methods:{--> <!-- btnClick:function (newPrice) {--> <!-- this.price += newPrice;--> <!-- }--> <!-- }--> <!-- });--> <!-- </script>--> <!-- v-bind:为html标记绑定样式单属性--> <!-- <style>--> <!-- .active{--> <!-- color:red;--> <!-- }--> <!-- </style>--> <!-- <div id="app">--> <!-- <div v-bind:class="{active:isActive}">红色文本1</div>--> <!-- <div :class="{active:isActive}">红色文本1</div>--> <!-- <button @click="btnClick">改变文本颜色</button>--> <!-- </div>--> <!-- <script>--> <!-- new Vue({--> <!-- el: '#app',--> <!-- data:{--> <!-- isActive:true,--> <!-- },--> <!-- methods:{--> <!-- btnClick:function () {--> <!-- this.isActive = false;--> <!-- }--> <!-- }--> <!-- });--> <!-- </script>--> <!-- Class对象绑定:为html绑定class对象--> <style> .active{ color:red; } .big{ font-weight: bolder; font-size: 64px; } </style> <div id="app"> <div v-bind:class="myClass">红色文本1</div> <button @click="btnClick">改变文本大小</button> </div> <script> new Vue({ el: '#app', data:{ myClass:{ active:true, big:true, } }, methods:{ btnClick:function () { this.myClass.big = !this.myClass.big; } } }); </script> </body> </html>