Table of contents
Directives in Vue
Summary of v-xxx instructions
Previously learned designations:
v-bind: One-way binding parsing expression, which can be abbreviated as: xxx
v-model : two-way data binding
v-for : traverse arrays, objects, strings, etc.
v-on : Binding event listener, which can be abbreviated as @
v-if : conditional rendering (dynamic control node exists)
v-else : conditional rendering (dynamic control node exists)
v-show : conditional rendering (dynamically control whether the node is displayed)
v-text instruction: render text content to the node where it is located, the difference from the interpolation value is that v-text will replace the content in the node
v-html instruction: render text content to the node where it is located, and can recognize html syntax. Note: v-html has security problems. It is dangerous to dynamically render arbitrary html on the website, which may easily lead to xss attacks. Try not to Use v-html in the user's input box.
v-cloak command (no value): It is essentially a special attribute. After the Vue instance is created and takes over the container, the v-cloak attribute will be deleted. Cooperating with cssv-cloak can solve the problem of { {xxx}} displayed on the page when the network speed is slow. The problem
v-once instruction: After the initial dynamic rendering of the node where v-once is located, it is regarded as static content. Subsequent data changes will not cause the structure where v-once is located to be updated.
v-pre instruction: the compilation of the node where the skipper is located can be used to skip the street that does not use the instruction syntax and the difference syntax. Third, vue will not parse it and use it directly on the page to speed up compilation
v-text
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<div id="root">
插值语法:<div>{
{name}}</div>
v-text指令:<div v-text="name"></div>
v-text指令:<div v-text="name">abc</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name:'hello'
}
});
console.log(vm)
</script>
v-html
<div id="root">
v-text:<p v-text="name"></p>
v-text:<p v-text="htmlName"></p>
v-html:<p v-html="htmlName">你好</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
name:'世界杯',
htmlName:'<h2>世界杯2</h2>'
}
});
</script>
v-cloak
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue-->
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<div id="root">
<div v-cloak>{
{name}}</div>
</div>
v-once
<div id="root">
<div v-once>初始的n值为：{
{n}}</div>
<div>之后的n值为：{
{n}}</div>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n:10,
},
methods: {}
});
console.log(vm)
</script>
in-for
<div id="root">
<div>{
{cool}}</div>
<div v-pre>{
{cool}}</div>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
cool:'天气只有十来度'
},
});
</script>
custom directive
Functional
Define a v-big command, which is similar to v-text, but will increase the bound value by 10 times
</head>
<div id="root">
<div v-text="n" ></div>
<div v-big="n"></div>
<button @click="n++">n++</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n:1,
},
directives:{
big(element,binding) {
element.innerText=binding.value*100
}
}
});
console.log(vm)
</script>
object style
Requirement: Define a v-fousbind command, and v-bind functional type, but allow the inout element bound to it to get the focus by default
<div id="root">
<div>n的值为:{
{n}}</div>
<input type="text" v-fousbind="n" value="n"></input>
<button @click="n++">n++按钮</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
n:1
},
directives:{
fousbind:{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模版被重新解析时
update(element,binding){
element.value=binding.value
element.focus()
}
}
}
});
console.log(vm)
</script>