The reading material referred to during the study is the definitive guide to Vue.js. If there is any incorrect understanding, please correct me. I will actively understand and correct it. Hope to make progress with everyone.
1. v-cloak
1.1 Purpose: Used to solve the flickering problem of interpolation expressions.
1.2 Reasons for flickering: When the internet speed is particularly slow, the externally referenced package is not completely loaded, and the page will render a
screen like { {xx}},
and the content in { {}} will be displayed after all loading is completed It is rendered normally.
1.3 Code display:
/* 利用属性选择器，选择有v-cloak属性的元素，
在未完全加载完时，不显示该元素的内容 */
[v-cloak] {
display: none;
}
<div id="app1">
<div v-cloak>{
{ msg }}</div>
</div>
var vm = new Vue ({
el: '#app1',
data: {
msg: '我是前端小白'
},
})
2. v-text
2.1 Purpose: Update the content inside the element.
2.2 Code display:
<!-- v-text会自动覆盖这个元素里面本来有的内容，渲染到页面上内容是msg里的内容。 -->
<div id="app2" v-text="msg">我本来是这个内容</div>
var vm = new Vue ({
el: '#app2',
data: {
msg: '我是前端小白'
},
})
2.3 Page effect display:
2.4
The difference between v-text and { {}} (interpolation expression):
①v-text has no flicker problem.
②v-text will overwrite the content of the original element, {
{}} will not overwrite the content of the original element. The original content of the element will be rendered on the page normally, {
{}} is the content that replaces its placeholder.
3. v-html
3.1 Purpose: You can update the innerHTML of the element, and the content will be inserted as normal HTML.
3.2 Code display:
<div id="app3" v-html="msg"></div>
var vm = new Vue ({
el: '#app3',
data: {
msg: '<p>插入一个段落结构</p>'
},
})
3.3 Page effect display:
4. v-bind
4.1 Purpose: bind attributes to elements.
4.2 Code display:
<input id="btn" value="按钮" type="button" v-bind:title="title" >
var vm = new Vue ({
el: '#btn',
data: {
title: '添上了吧'
},
})
4.3 Page effect display:
4.4 v-bind abbreviation ":"
<input id="btn" value="按钮" type="button" :title="title" >
5. v-on
5.1 Purpose: Used to bind events to elements.
5.2 Code display:
<div id="app4" v-on:click="show" >
{
{msg}}
</div>
var vm = new Vue ({
el: '#app4',
data: {
msg: '点我点我'
},
methods: {
show() {
alert("我弹出来了吧")
}
}
})
5.3 v-on can be abbreviated as @
<div id="app4" @click="show" >
{
{msg}}
</div>
5.4 Page effect display:
5.5 Event modifier
5.5.1 .stop To prevent bubbling, call event.stopPropagation() method.
Sample code:
<div id="wrap">
<div id="inner" @click="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
#inner {
width: 400px;
height: 200px;
background-color: blueviolet;
}
var vm = new Vue ({
el: '#wrap',
data: {
},
methods: {
divClick() {
console.log("这里触发的是div的点击事件");
},
buttonClick() {
console.log("这里触发的是button的点击事件");
}
}
})
Output result:
The event of the current element is triggered first, and then the peripheral event is triggered.
If you want to prevent the triggering of peripheral events, you can directly add the .stop method to the event.
Code example:
<div id="wrap">
<div id="inner" @click="divClick">
<input type="button" value="点击" @click.stop="buttonClick">
</div>
</div>
Output result:
5.5.2 .prevent To prevent the default event, call the event.preventDefault() method.
Code example:
<div id="wrap">
<a href="http://www.baidu.com" @click.prevent="aClick">跳转链接</a>
</div>
5.5.3 .capture Use event capture mode when adding event listeners.
Code example:
<div id="wrap">
<div id="inner" @click.capture="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
var vm = new Vue ({
el: '#wrap',
data: {
},
methods: {
divClick() {
console.log("这里触发的是div的点击事件");
},
buttonClick() {
console.log("这里触发的是button的点击事件");
},
}
})
Print result: The
event is captured from the outside to the inside.
5.5.4 .self When the event is triggered on the current element itself, trigger the callback.
Code example:
<div id="wrap">
<div id="inner" @click.self="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
The js code is consistent with capture.
Print result:
.self will only prevent its own bubbling behavior from being triggered, and will not really prevent the bubbling behavior.
5.5.5 .once event value is triggered once.
Code example:
<div id="wrap">
<div id="inner" @click.once="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
The js code is the same as above.
Print result: the
event can only be triggered once.
6. v-model
6.1 Purpose: Two-way data binding ( This is the only instruction that can realize two-way data binding. )
6.2 Code example:
<div id="app">
<p>{
{msg}} </p>
<input class="text" type="text" v-model="msg">
</div>
var vm = new Vue ({
el: '#app',
data: {
msg: '我是前端初学者，我们一起来学习。'
},
})
Page effect:
In the vm instance, the data content is also modified.
Note: The v-model directive can only be applied to form elements.
7. v-for
7.1 Purpose: loop, traverse, and re-render elements.
7.2 Loop over the array
code example
<div id="app">
<p v-for='item in list'>{
{item}}</p>
</div>
var vm = new Vue ({
el: '#app',
data: {
list: [1,2,3,4,5]
},
})
Effect: when
array traversal needs to get index:
code example
<div id="app">
<p v-for='(item,i) in list'>{
{i}}+++{
{item}}</p>
</div>
Effect:
7.3 Traversal of object array:
code example:
<div id="app">
<p v-for='course in list'>{
{course.id}}+++{
{course.name}}</p>
</div>
var vm = new Vue ({
el: '#app',
data: {
list: [
{
id: 1, name: 'Vue'},
{
id: 2, name: 'ES6'},
{
id: 3, name: 'Webpack'},
{
id: 4, name: 'jQuery'},
{
id: 5, name: 'angular'}
]
},
})
Effect:
7.4 Cycle of objects
Code example:
<div id="app">
<p v-for='(val, key) in list'>{
{key}}+++{
{val}}</p>
</div>
var vm = new Vue ({
el: '#app',
data: {
list: {
id: 1,
name: '王大个',
gender: '男'
}
},
})
Effect:
7.5 Number loop
Code example:
<div id="app">
<!-- 循环数字的话，count从1开始。 -->
<p v-for='count in 6'>这是第{
{count}}次的循环了。</p>
</div>
Effect:
8, v-if and v-show
8.1 Purpose:
v-if is used to generate or remove an element.
v-show is used to show or hide an element.
8.2 Code example:
<div id="app">
<input type="button" @click="toggle()" value="有惊喜">
<!-- 每次都会重新创建和删除元素,切换性能消耗比较大. -->
<h1 v-if="flag" >这个是使用v-if的测试标题</h1>
<!-- 不会重新创建和删除元素，只是改变了元素的display:none.有较高的初始渲染消耗。 -->
<h1 v-show="flag" >这个是使用v-show的测试标题</h1>
</div>
var vm = new Vue ({
el: '#app',
data: {
flag: true,
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
})
Effect: After
clicking the button: the
article is over, you are welcome to correct me if there are errors, thank you!