Vue.js实战 章五：内置指令
<!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>
更多精彩
