<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 1、僅僅只需要關注數據、業務邏輯和事件，dom直接的操作隱藏起來，不用再重復去做這個事情。 2、大大增加團隊效率，團隊協作能力 3、模塊化，降低耦合度 4、數據的雙向綁定,視圖和模型的數據是綁定在一起的，變更1個，那么所有都變更 --> <!--視圖--> <div id="app"> <h1>{{jsonMsg}}</h1> <p>{{jsonContent}}</p> <h1> 這是H1內容： {{ isA ? a : b}}</h1> <!--將變量綁定到屬性上--> <a v-bind:href="httpUrl">鏈接地址</a> <a :href="httpUrl">鏈接地址</a> <div> {{htmlElement}} </div> <div v-html='htmlElement'></div> <h1>{{msg}}</h1> <h1 v-once>{{msg}}</h1> <input type="text" v-model='msg' name="" id="" value="" /> <button v-on:click='changeUrl'>更改為淘寶地址</button> <!-- v-on:可以縮寫成@ --> <button @click='changeMsg'>更改msg</button> </div> <!-- vue模板： 1、變量放在{{}}里面，里面可以正常運行JS表達式 2、變量如果要放在HTML的屬性里面，那么就需要使用v-bind,縮寫即前面加冒號 3、默認是將HTML以字符串的形式輸出到視圖，如果想要以HTML的形式輸出到視圖，那么需要使用v-html這個指令 4、v-once只渲染1次 5、綁定事件的書寫方式：v-on, vue應用生命周期（即執行過程） new Vue(配置變量) ---》初始化 ---》beforecreate ---》created --》beforeMount(渲染之前、掛載之前) ---》mounted --》beforeupdate ---》updated ---》beforeDestory ---》destoryed 條件渲染： --> <script type="text/javascript"> var obj = { el:'#app', data:{ msg:'helloworld', num:'123456778', isA:false, a:8, b:4, httpUrl:'http://www.baidu.com', htmlElement:'<button>這是一個按鈕</button>', jsonMsg:'', jsonContent:'' }, methods:{ changeMsg:function(){ this.msg = '今天天氣不錯' }, changeUrl:function(){ this.httpUrl = 'http://www.taobao.com' } }, beforeCreate:function(){ console.log('創造之前執行的函數') }, created:function(){ console.log('創造之后') }, beforeMount:function(){ console.log('掛載之前') var that = this $.ajax({ url:'abc.json', success:function(res){ console.log(res) that.jsonMsg = res.msg that.jsonContent = res.content } }) }, mounted:function(){ console.log('掛載之后') }, beforeUpdate:function(){ console.log('更新之前') }, updated:function(){ console.log('更新之后') } } var app = new Vue(obj) console.log(app) </script> </body> </html>