<!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> <script src="./vue.js"></script> <div id="app"> <!-- 1.2插值表达式，既可以用来接收值，支持表达式，如下 --> <p>{{ title }}</p> <!-- 如果前后有值，则会进行拼接 --> <p>哈哈哈 {{ title }} 啊啊啊</p> <p>{{content}}</p> <p>{{ 1+2+3 }}</p> <p>{{ 1>2?'对':'错' }}</p> <p>{{ output() }}</p> <p>{{ output() }}</p> <p>{{ output() }}</p> <!-- computed的方法调用无需括号，具有缓存性质 --> <p>{{ outputContent }}</p> <p>{{ outputContent }}</p> <p>{{ outputContent }}</p> <p>{{ outputContent }}</p> <!-- 4. 指令 --> <!-- 内容指令 --> <p v-text = 'data222'>123</p><!-- 直接用响应式数据替换标签值，就算里面有值，也会全部替换掉 --> <p v-html = 'data222'>123</p><!-- 直接用响应式数据替换标签值，如果里面有html，则会解析成html --> <!-- 渲染指令 for循环 通过遍历响应式数据进行自动生成标签和值--> <p v-for="item in arr"> 这是内容 {{item}}</p> <!-- for循环的方式读取数据arr，并循环渲染更多标签 --> <p v-for="(item,key,index) in obj"> 这是内容2: {{item}}{{key}}{{index}}</p> <!-- for循环的方式读取obj数据，可以读取对象的key、value、下标，并循环渲染更多标签 --> <!-- 渲染指令 if指令 通过响应式数据控制标签的显示隐藏，这里bool就是下面定义的响应式数据，v-if会完全销毁标签，v-show则是用display属性隐藏标签--> <p v-if="bool"> 我是标签内容 </p> <p v-show="bool"> 我是标签内容 </p> <!-- 属性指令 控制标签的属性--> <p v-bind:title = "attr1">属性指令测试</p><!-- 这个title是鼠标悬停的提示属性，也可以控制其他属性--> <p :title = "attr1">属性指令测试2</p><!-- 也可以直接用冒号简写的方式--> <!-- 事件指令 --> <button v-on:click="output">按钮</button><!-- 直接调用事件--> <button @click="output">按钮2</button><!-- 也可以直接用@简写--> <!-- 表单指令 v-model可以实现双向数据绑定--> <input type="text" v-model="inputValue"> <p v-text = 'inputValue'></p> <!-- 修饰符 可以对输入值进行限制约束，按键响应等--> <input type="text" v-model.trim="inputValue"><!--例如在v-model后面加上.trim 就可以对这个响应式数据进行去除前后空格的操作--> </div> <script> //1.响应式数据与插值表达式 （小技巧，可以直接在浏览器控制台vm.响应式数据，修改数据） //创建一个vue实例 const vm = new Vue({ // #选择器可以选择到标签id，如果是类则是用. el: '#app', data(){ return{ //这里定义的是响应式数据 title: '这是标题', content: '这是文本内容', data222: '这是一个<span>我是span标签</span>标签', arr:['a','b','c','d'], obj:{'aa':'请问','bb':'水电费','cc':'东莞好地方'}, bool:true, attr1:'属性绑定演示', inputValue:'输入框内容' } }, //1.methods属性，里面可以封装对外的方法,由插值表达式调用，里面可以用this调用响应式数据 methods:{ output(){ console.log('methods执行了'); return '标题是：' + this.title + ',' + '内容为' + this.content } }, //2.计算属性：具有缓存性，响应式数据没变，则返回之前已经计算过的数据 computed:{ outputContent(){ console.log('computed执行了'); return '计算属性' + this.title + ',' + '666' + this.content } }, //侦听器，可以监听到数据修改，只能监听响应式数据 watch:{ title (newValue,oldValue){ console.log('监听到了数据修改，老值是' + oldValue + '，新值是' + newValue) } } }) </script> </body> </html>