<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <script src="https://vuejs.org/js/vue.js"></script> --> <script src="Vue.2.6.10.js"></script></head><style> [v-cloak]{ display: none; }</style><body> <div id="app1" v-cloak> {{ message }} </div> <div id="app2"> <input type="text" v-model=‘message‘> <span> {{ message }} </span> <span v-once> {{ message }} </span> </div> <br> <div id="app3"> <input type="text" v-model=‘message‘ v-model=‘odevity‘> <p v-if = "message == 1">一</p> <p v-else-if = "message == 2">二</p> <p v-else>其他</p> <template v-if = "odevity == ‘大于100‘"> <p>大于100</p> <p>是真的，真的大于100</p> <!-- 一次判断多个元素时这样安排 --> </template> </div> <div id="app4"> <template v-if = "type === ‘name‘"> <label>用户名</label> <input type="text" placeholder="用户名"> </template> <template v-else > <label>密码</label> <input type="text" placeholder="密码"> </template> <button @click = "toggleType">切换输入类型</button> </div> <div id="app5"> <p v-show=‘show == true‘>为true时显示改行</p> <button @click = "toggleShow">切换显示状态</button> </div> <!-- 列表渲染指令 --> <div id="app6"> <!-- 遍历数组 --> <ul> <template v-for = "(book,index) in books"> <li>{{ index+1 }} - {{ book.name }},{{ book.author }}</li> <!-- <span v-for = ‘value in author‘>{{ value }}</span> 如果写在这里，相当于遍历中嵌了一个遍历--> </template> <br> <!-- 遍历对象 --> <li v-for = ‘(value,key,index) in author‘>{{ index }} - {{ key }}:{{ value }}</li> </ul> </div> <div id="app7"> <!-- 数组更新及方法 --> </div> <div id="app8"> <!-- 方法与事件 --> 点击次数：{{ counter }} <button @click = "counter++">+1</button> <button @click = "add">+1</button> <button @click = "add(10)">+10</button> </div> <div id="app9"> <a href="https://www.4399.com" @click = "handleClick(‘禁止打开哈‘,$event)">无法被打开的链接</a> </div> <div id="app10"> <!-- 使用修饰符简化操作 --> <a href="#" @click.stop = "handle">阻止单击事件冒泡</a> <form action="#" @submit.prevent = "handle">提交事件不再重载页面</form> <form action="#" @submit.prevent>提交事件不再重载页面（仅有修饰符而无回调函数）</form> <a href="#" @click.stop.prevent = "handle">串联修饰符</a> <a href="#" @click.capture = "handle">添加事件侦听器时，使用事件捕获模式</a> <a href="#" @click.self = "handle">只当事件在元素本身触发时触发</a> <a href="#" @click.once = "handle">只触发一次</a> </div></body><script> // console.log(new Vue()); //v-cloak 无需表达式 会在Vue实例结束编译后从绑定的html元素上移除，常和display：none结合使用 var app1 = new Vue({ el:"#app1", data:{ message:‘这是一段文本~‘//防止在网速较慢是页面上会出现{{ message }}的字样 } });//解决初始化慢导致页面闪动 var app2 = new Vue({ el:"#app2", data:{ message:‘test‘//v-once 定义它的元素/组件只渲染一次 以后将视为静态内容 } }); var app3 = new Vue({ el:"#app3", data:{ message:‘‘, }, computed: { odevity:function(){ if(this.message > 100){ return "大于100"; }else{ return "小于100"; }; }, }, }); var app4 = new Vue({ el:"#app4", data:{ type:‘name‘ }, methods: { toggleType:function(){ this.type = this.type === ‘name‘ ? ‘mail‘:‘name‘; } }, //虽然DOM改变了，但是之前键入的内容并没有改变，<input>元素被复用了 //不想这样做？在不希望被复用的<input>元素中添加key属性 key的值必须是唯一的 }); var app5 = new Vue({ el:"#app5", data:{ show:true }, methods:{ toggleShow:function(){ // console.log(show,this.show);//未定义的show console.log(this.show);// show = !this.show;//错误的写法，会重新定义一个收未变量 console.log(show,this.show); this.show = !this.show; console.log(this.show); } } }); var app6 = new Vue({ el:"#app6", data:{ books:[ {name:‘book1‘,author:‘1‘}, {name:‘book2‘,author:‘2‘}, {name:‘book3‘,author:‘3‘}, {name:‘book4‘,author:‘4‘}, {name:‘book5‘,author:‘5‘} ], author:{ name:‘Harold‘, gender:‘男‘, age:‘20‘ } } }); var app7 = new Vue({ }); var app8 = new Vue({ el:"#app8", data:{ counter:0 }, methods:{ add:function(count){ count = count || 1; this.counter += count; console.log(count); //（不带括号打印count）MouseEvent {isTrusted: true, screenX: 211, screenY: 612, clientX: 152, clientY: 456, …} // 10 //如果以不带()的形式供@click调用，且后该方法有参数，则会默认将原生时间对象event传入 即第二个按钮不会+1 } } }); var app9 = new Vue({ el:"#app9", data:{ }, methods: { handleClick:function(message,event){ alert(message); event.preventDefault(); } }, }); </script></html>
