<!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>