vue 的指令(v-bind,v-mode,v-on,v-if,v-show,v-for,v-text,v-html,v-cloak,v-once,v-pre)的基本使用
v-bind / v-model
<body>
<div id="app">
<!-- v-bind(单向绑定) -->
<input type="text" v-bind:value="text1">
<!-- v-bind 简写 -->
<input type="text" :value="text1">
<!-- v-model(双向绑定) -->
<input type="text" v-model:value="text2">
<!-- v-model 简写 -->
<input type="text" v-model="text2">
</div>
<script>
new Vue({
el: "#app",
data: {
text1: "请输入内容",
text2: "请输入内容"
}
})
</script>
</body>
v-on
<body>
<div id="app">
<!-- v-on(事件处理) -->
<button v-on:click="show">点击</button>
<!-- v-on 简写 -->
<button @click="show">点击</button>
<!-- $event-事件修饰符 -->
<button @click="showData($event,'事件修饰符测试')">点击</button>
<!-- 键盘事件-@keydown.[键名] -->
<input type="text" placeholder="键盘事件测试" @keydown.en="showText($event)" />
<!-- 注意：
1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
2).配合keydown使用：正常触发事件。
-->
</div>
<script>
//自定义按键别名：Vue.config.keyCodes.自定义键名 = 键码
Vue.config.keyCodes.en = 13
new Vue({
el: "#app",
data: {
},
methods: {
show(){
alert("提示信息")
},
showData(event, data){
alert(data)
},
showText(event){
alert(event.target.value)
}
}
})
</script>
</body>
Vue中的事件修饰符：
*prevent：阻止默认事件（常用）；
*stop：阻止事件冒泡（常用）；
*once：事件只触发一次（常用）；
*capture：使用事件的捕获模式；
*self：只有event.target是当前操作的元素时才触发事件；
*passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
v-if / v-show
<body>
<div id="app">
<p>count: {{count}}</p>
<!-- v-show-->
<p v-show="count % 2 === 0">v-show测试</p>
<!-- v-if-->
<p v-if="count % 3 === 0">v-if测试</p>
<p v-else-if="count % 3 === 1">v-else-if测试</p>
<p v-else>v-else测试</p>
<button @click="count++">点击 +1</button>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
}
})
</script>
</body>
v-for
<body>
<div id="app">
<ul>
<!-- 遍历数组 -->
<li v-for="(obj, index) in arrObj" :key="obj.id">
{{index}} --- {{obj.name}} --- {{obj.age}}
</li>
</ul>
<hr/>
<ul>
<!-- 遍历对象 -->
<li v-for="(value, key, index) in arrObj[0]" :key="key">
{{index}} --- {{key}} --- {{value}}
</li>
</ul>
<hr/>
<ul>
<!-- 遍历数值 -->
<li v-for="(number, index) in 6" :key="index">
{{index}} --- {{number}}
</li>
</ul>
<hr/>
<ul>
<!-- 遍历字符串 -->
<li v-for="(character, index) in arrObj[0].name" :key="index">
{{index}} --- {{character}}
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data: {
arrObj: [
{id: "1", name: "abcd", age: 20},
{id: "2", name: "cdef", age: 10},
{id: "3", name: "abef", age: 15},
]
}
})
</script>
</body>
v-text / v-html
<body>
<div id="app">
<p v-text="text"></p>
<p v-html="text"></p>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "<h1>测试数据</h1>"
}
})
</script>
</body>
v-cloak
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<script type="text/javascript" src="../js/vue/vue.js"></script>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app">
<!-- Vue实例创建完毕后，会删掉v-cloak属性 -->
<p v-cloak>{{text}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
text: "测试数据"
}
})
</script>
</body>
</html>
v-once
<body>
<div id="app">
<!-- v-once所在节点在初次动态渲染后，就视为静态内容了 -->
<p v-once>count初始值: {{count}}</p>
<p>count当前值: {{count}}</p>
<button @click="count++">点击 +1</button>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
}
})
</script>
</body>
v-pre
<body>
<div id="app">
<!-- v-pre 跳过其所在节点的编译过程 -->
<p v-pre>count初始值: {{count}}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
count: 0
}
})
</script>
</body
浙公网安备 33010602011771号