Directive指令的本质是对DOM元素的处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>指令</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 指令是特殊标记，其本质是对DOM元素的处理 -->
<!-- 使用系统指令和自定义指令 -->
<div id="app">
<!-- 数据绑定 -->
<input v-model="message"/>
<input v-model.number="age" type="number">
<!--
//输入修饰符
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤-->
<!-- 属性插值 -->
<p>{{message}}</p>
<!-- 插入文本-->
<p v-text="value"></p>
<!-- 插入html代码-->
<p v-html="html"></p>
<!-- 显示或隐藏元素 -->
<p v-show="status">元素显隐</p>
<!-- 数据改变时禁止渲染 -->
<p v-once="">{{message}}</p>
<!-- 跳过编译 -->
<p v-pre>{{message}}</p>
<!-- 条件语句 -->
<p v-if ="status">status为真时显示if</p>
<p v-else="status">status为假时显示else</p>
<!-- 循环语句 -->
<p v-for='i in list'>{{i}}</p>
<!-- 绑定 html属性 -->
<img v-bind:src="url" />
<p v-bind:class="yellow"></p>
<p v-bind:class="[yellow,red]"></p>
<p v-bind:style="{backgroundColor:'#000',width:'200px',height:'200px'}"></p>
<!-- 绑定 dom事件 -->
<button v-on:click = "onclick">点击</button>
<input v-on:keyup.enter = "onboard">
<!--
//事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
//按键修饰符
.keyCode值
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right-->
<!-- 使用自定义指令 -->
<p v-order:value='message'></p>
</div>
<script>
//自定义指令
Vue.directive('order',{
bind:function(el,binding){
//这里的el指的就是当前指令绑定的DOM元素;
console.log(el);
//返回的是一个对象，包含有以下属性：
console.log(binding);
// 1.name ：指令名
// 2.value：指令的绑定值
// 3.expression：指令绑定值的字符串形式
// 4.arg:传递给指令的参数
// 5.modifiers：一个对象，包含当前的指令的修饰符
el.innerText = '自定义指令：'+binding.value;
}
})
var vm = new Vue({
//DOM节点
el:'#app',
//数据
data:{
message:'请输入用户名',
value :'数据值',
age :18,
html :'<div>插入html代码替换原有</div>',
status :true,
list :[1,2,3],
url :'http://#',
yellow :'yellow',
red :'red'
},
//侦听数据
watch:{
message:function(value){
console.log(value)
}
},
//函数
methods:{
onclick:function(e){
console.log(e.target)
},
onboard:function(e){
console.log(e.target)
}
}
})
</script>
<style>
.yellow {
width: 200px;
height: 200px;
background: #ff0;
}
.red {
width: 200px;
height: 200px;
background: red;
}
</style>
</body>
</html>
网友评论