vue模板语法
<!DOCTYPE html> <html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="styleObject">{{message}}</div> <!-- 调用绑定的样式 --> <hr> <div v-html="vmessage"></div> <!-- 输出绑定的html --> <hr> <div> {{5+10}}<br>{{flag?'yes':'no'}}<br> {{message.split('').reverse().join('')}} <div v-bind:id="'list-'+id">I'm vue</div> </div> <hr> <div> <p v-if="show">This is a text.</p><!-- data中的show为true则显示标签内容 --> </div> <hr> <div> <pre> <a v-bind:href="url">百度</a><!-- 绑定链接地址（完整语法） --> <a :href="url">百度</a><!-- 简写 --> </pre> </div> <hr> <div> <input type="text" v-model="vcontent"> <p>{{vcontent}}</p> </div> <hr> <div> {{vcontent|capitalize}}<!-- 使用过滤器 --> </div> <hr> <div> <a v-on:click="doSomething"></a><!-- 完整语法 --> <a @click="doSomething"></a><!-- 缩写 --> </div> </div> <script> var app = new Vue({ el: '#app', data: { message: 'I\'m vue!', vmessage: '<h1><strong>vue</strong></h1>',//设置绑定的html styleObject: {//设置绑定样式 color: 'green', fontSize: '25px' }, flag: true, id: 10, show: true, url: 'http://www.baidu.com', vcontent: 'hello vue!' }, //过滤器 filters: { //让第一个字母大写 capitalize: function (value) { if (!value) return '' value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); } }, //生命周期 //Vue生命周期钩子常用的的有created和mounted //created函数在实例创建完成后调用，此阶段完成了data数据的初始化，但el还没有初始化 created: function () { console.log('creadted创建完毕====》'); //undefined console.log("%c%s", "color:red", "el：" + this.$el); //已被初始化 console.log("%c%s", "color:red", "message：" + this.message); }, //mounted函数在el挂载到实例上之后调用，此阶段完成了挂载，可以开始处理业务逻辑 mounted: function () { console.log('mounted挂载结束状态====》'); //已被初始化 console.log("%c%s", "color:red", "el：" + this.$el); console.log(this.$el); //已被初始化 console.log("%c%s", "color:red", "message：" + this.message); } }) </script> </body> </html>
