XIYUETA.COM
源代码：
点击运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 1.2插值表达式 --> <p>{{ title }}</p> <p>{{ content }}</p> <p>{{ 1+2+3 }}</p> <p>{{ 1 > 2 ? '对' : '错' }}</p> <p>{{ output() }}</p> <p>{{ output() }}</p> <p>{{ output() }}</p> <p>{{ outputComtent }}</p> <p>{{ outputComtent }}</p> <p>{{ outputComtent }}</p> <!-- 4. 指令 --> <!-- 内容指定 --> <p v-text="htmlContent">123</p> <p v-html="htmlContent">123</p> <!-- 渲染指定 --> <p v-for="item in 5">这是内容</p> <p v-for="item in arr">这是内容：{{ item }} </p> <p v-for="(item,key,index) in obj">这是内容：{{ item }} {{key}} {{index}}</p> <p v-if="false">标签内容</p> <p v-show="false">标签内容</p> <p v-show="boll">标签内容</p> <!-- 属性指令 --> <p v:bind:title="title">这是内容</p> <p :title="title">这是内容</p> <!-- 事件指令 --> <button v-on:click="output">按钮</button> <button @click="output">按钮</button> <!-- 表单指令：v-model可以实现双向数据绑定 --> <input type="text" v-model="inputValue"> <p v-text="inputValue"></p> <!-- 5. 修饰符 --> <input type="text" v-model.trim="inputValue"> </div> <!-- <script src="vue.min.js"></script> --> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script> const value='这是内容' // document.getElementById('app').textContent=value // 1.响应式数据与插值表达式 const vm=new Vue({ el:'#app', data(){ return { title:'这是标题文本', content:'这是内容文本', htmlContent:'这是一个<b>标签</b>', arr:['a','b','c','d'], obj:{a:10,b:20,c:30}, boll:true, inputValue:'默认内容' } }, // 1.3 methods 属性 methods:{ output(){ console.log('methods执行了') return '标题为' + this.title + '，内容为' + this.content } }, // 2. 计算属性：具有缓存性 computed:{ outputComtent(){ console.log('computed执行了') return '标题为' + this.title + '，内容为' + this.content } }, // 3. 侦听器 watch:{ title(newValue,oldValue){ console.log(newValue,oldValue) } } }) </script> </body> </html>
运行结果