為了學習基礎語法，我並沒有用vue-cli腳手架來vue init [基於什么類型] [項目名稱]初始化項目，而是直接<script>../vue.js</script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> 模板語法(各種指令、Mustache) <div v-bind:class="clas">666</div> <button v-on:click="say(678)">按鈕</button> <p></p>計算屬性和觀察者 <div> <input type="text" v-model="ipt"> </div> <div>{{toUp}}</div> <input type="text" v-model="ipt2"> <p></p>自定義指令 <div v-color="'green'">用於測試</div> <p></p>自定義組件[簡單] <div> <simple></simple> </div> <p></p>自定義組件[復雜] <div> <do-list v-bind:data="list"></do-list> </div> </div> <script src="./bower_components/vue/dist/vue.min.js"></script> <script> // 注冊一個全局自定義【指令】 v-color Vue.directive("color", function(el,binding){ /* el就是頁面的dom */ console.log(binding) el.style.color = binding.value; }) // 注冊一個全局自定義組件 v-color Vue.component("simple",Vue.extend({ template: '<div>A custom component!</div>' })) // 注冊一個復雜全局自定義【組件】 v-color Vue.component("do-list",Vue.extend({ //(父子傳參)子組件要顯式地用 props 選項聲明它預期的數據： props: ['data'], template: ` <ul> <li v-for="item in data">{{item.name}}</li> </ul> ` })) //一個vue的實例 new Vue({ el: '#app', //model data: { msg: 'Hello!', clas:'active', ipt:'dsh', ipt2:'wx', list:[ {name:'小明',age:20}, {name:'小紅',age:16} ] }, //計算屬性 computed:{ toUp:function() { var that=this; var temp=that.ipt.toUpperCase(); return temp; } }, //函數 methods:{ say:function(i) { alert(i) } }, //觀察者 watch:{ // 如果 `ipt2` 發生改變，這個函數就會運行 ipt2:function (newVal) { this.say(newVal) //console.log(this.ipt2); } } //至於路由，我暫時先用官方支持的 vue-router 庫，而不用基礎的自帶路由 }) </script> </body> </html>
動態顯示時間和過濾器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> 當前時間：{{nowDate | dataFmt('yyyy-MM-dd HH:mm:ss')}} </div> <script src="./bower_components/vue/dist/vue.min.js"></script> <script> // vue2.0后，刪除了所有內置的過濾器，都需要自己定義 Vue.filter('dataFmt',function(data,type){ that = new Date(data) var o = { "M+": that.getMonth() + 1, //月份 "d+": that.getDate(), //日 "h+": that.getHours() % 12 == 0 ? 12 : that.getHours() % 12, //小時 "H+": that.getHours(), //小時 "m+": that.getMinutes(), //分 "s+": that.getSeconds(), //秒 "q+": Math.floor((that.getMonth() + 3) / 3), //季度 "S": that.getMilliseconds() //毫秒 }; var week = { "0": "\u65e5", "1": "\u4e00", "2": "\u4e8c", "3": "\u4e09", "4": "\u56db", "5": "\u4e94", "6": "\u516d" }; if (/(y+)/.test(type)) { type = type.replace(RegExp.$1, (that.getFullYear() + "").substr(4 - RegExp.$1.length)); } if (/(E+)/.test(type)) { type = type.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "\u661f\u671f" : "\u5468") : "") + '周' + week[that.getDay() + ""]); } for (var k in o) { if (new RegExp("(" + k + ")").test(type)) { type = type.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); } } return type; }) //一個vue的實例 new Vue({ el: '#app', data: { nowDate:new Date() }, //生命周期函數：動態顯示時間，要不然時間是死的，刷新頁面才會更新 mounted: function () { var that=this; setInterval(function () { that.nowDate=new Date(); },1000) } }) </script> </body> </html>
