主要简单的介绍一下Vue.js这个轻量级的前端框架的指令部分
Vue.js提供了很多的指令 ， 简化了我们写JS的复杂度，下面简单的介绍各个指令的常规用法 。
- v-text : 这个指令它的效果与双大括号效果是一样的，使用v-text可以避免因为js出错，而暴露了双括号里面的内容
1 <div id="app-text"> 2 //下面两个效果一样 3 <span v-text="msg"></span> 4 <span>{{msg}}</span> 5 </div> 6 7 <script> 8 new.Vue({ 9 el:"#app-text", 10 data(){ 11 return { 12 msg:"hello Vue.js" 13 } 14 } 15 16 }) 17 </script>
- v-html ：这个指令的主要功能是把规范的html字符串渲染成浏览器可以解析的html内容
<div id="app-text">
//v-html会使用h1标签，而v-text会输出原内容
<span v-text="msg"></span>
<p v-html="html-one"></p>
<span v-text="html-two"/>
</div>
new new Vue({
el: "#app-text",
data() {
return {
msg: "hello world",
html-one: "<h1>hello world</h1>",
html-two:"<h1>hello world</h1>"
};
}
});
- v-show : 这个指令作用是使标签是否可以显示出来，可以使标签存在于html内容中
<div id="app-text">
//v-html会使用h1标签，而v-text会输出原内容
<span v-text="msg"></span>
//显示在页面中
<p v-show="true" v-html="html-one"></p>
//存在于页面中，但是不显示
<span v-show="false" v-text="html-two"/>
</div>
<script>
new Vue({
el: "#app-text",
data() {
return {
msg: "hello world",
html-one: "<h1>hello world</h1>",
html-two:"<h1>hello world</h1>"
};
}
});</script>
- v-if : 用法于v-show一样， 不过如果值为False，那么就不会存在于页面中，一般如果页面只判断一次可以使用它
- v-else-if : 与v-if 和 v-else连起来用 ， 如果v-if不符合那就判断这个指令是否符合
- v-else : 如果v-if和v-else-if都不符合，那么就执行v-else里面的内容
v-for : 循环指令，可以传入Array | Object | number | string | Iterable 这些类型数据，然后去循环遍历
<div id="app-text">
<span v-text="msg"></span>
<p v-show="false">{{msg}}</p>
<ul>
<li v-for="(user,index) in users" :key="index">{{index}}--{{user}}</li>
</ul>
<!-- <p v-html="html"></p> -->
</div>
<script>
new Vue({
el: "#app-text",
data() {
return {
msg: "hello world",
html: "hello world html",
users: ["小猪佩奇", "汪汪战队", "皮卡丘"]
};
}
});
</script>
- v-on : 绑定监听事件，可以缩写为@
<!-- 方法处理器 -->//doThis 是一个method
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 内联语句 -->//加上括号，可以传递需要的参数到method中
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->//@=v-on:
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
<!-- 停止冒泡 -->//<button>//阻止触发第二个方法
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
- v-bind : 动态的绑定一个或多个prop组件到表达式,可缩写为:
<!-- 绑定一个属性 -->//相当于 <img src="imageSrc">
<img v-bind:src="imageSrc">
<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->//<div id="someProp" other-attr="otherProp">
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
- v-model : 双向绑定数据 ， 使用后在页面中输入，可以同步修改data中的属性,限制为：
<input><select><textarea>- components
<div id="app-text">
<!--
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤 -->
<input type="text" v-model = "name">
</div>
<script>
new Vue({
el:"#app-text",
data(){
return {
name:""
}
}
})
</script>
- v-slot : 可以在父节点中向子节点添加内容
<!-- 具名插槽 -->
<base-layout>
<template v-slot:header>
Header content
</template>
Default slot content
<template v-slot:footer>
Footer content
</template>
</base-layout>
<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
<template v-slot:item="slotProps">
<div class="item">
{{ slotProps.item.text }}
</div>
</template>
</infinite-scroll>
<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</mouse-position>
- v-pre : 这个指令的作用是跳过元素编译的过程
<div id="app-text">
//v-html会使用h1标签，而v-text会输出原内容
<span v-text="msg"></span>
//显示为{{msg}}
<span v-pre>{{msg}}</span>
</div>
new new Vue({
el: "#app-text",
data() {
return {
msg: "hello world",
html-one: "<h1>hello world</h1>",
html-two:"<h1>hello world</h1>"
};
}
});
- v-cloak : 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。一般在网速较慢的时候会显示未经渲染的页面
//可以用这个方法测试体验一下
setTimeout(() => {
new Vue({
el: "#app-text",
data() {
return {
msg: "hello world",
html: "hello world html",
users: ["小猪佩奇", "汪汪战队", "皮卡丘"]
};
},
methods: {
sayHello() {
alert("say hello");
},
sayHi() {
alert("say hello");
}
}
});
}, 2000);
- v-once : 这个指令只渲染一次组件和元素，后面再次渲染就会变成被视为静态而忽略掉
来源：https://www.cnblogs.com/GaryNie/p/12176665.html