Table of contents
1、 v-if 、v-else、v-else-if、v-show
Introduction to VUE
progressive framework
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications.
Progressive: build projects from simple to complex
Advantages of Vue
1. The compressed file is only 33k in size.
2. The operation efficiency is higher. The virtual machine DOM is used, a technology that can calculate the data in advance through javaScript. Calculate and optimize the final DOM operation. Because this DOM operation belongs to the pre-set The processing operation does not actually operate the DOM, so it is called virtual DOM
3. Two-way data binding allows developers to no longer operate the DOM, and put more experience into the business
4. Rich ecology There are a large number of open source projects on the market based on Vue is mature and stable for development.
two core points
(1) Responsive data binding
When the data changes, the view is automatically updated, that is, two-way data synchronization. The principle uses the setter/getter proxy data in Object.definedProperty in ES6 to monitor the operation of the data.
(2) Combined view components
That is, the page is finally mapped to a component tree, which is designed with a tree data structure, which is convenient for maintenance and reuse.
Virtual DOM
The data structure corresponding to the real DOM is generated in memory, and the structure generated in memory is called virtual DOM. When data changes, it can intelligently calculate the minimum cost of re-rendering components and apply it to DOM operations.
MVVM
1). Letter explanation
1.M model data
2.V view view
3.VM (view-model) data and view control
2). When the page data changes, the data is passed to the model through dom monitoring.
When the data of the model changes, it is bound to the page through data binding
Declarative rendering
At its core, Vue.js is a system that allows data to be declaratively rendered into the DOM using a concise template syntax.
Additional supplement:
Rendering is divided into: imperative rendering and declarative rendering.
Imperative rendering: command our program to do something, and the program will follow your command to execute
declarative rendering step by step: just tell the program what effect you want, The rest is left to the program. For
specific differences, see the following codes. The execution results are the same, but the implementation methods are different.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>命令式渲染和声明式渲染</title>
</head>
<body>
<script type="text/javascript">
var arr = [1,2,3,4,5];
// 命令式渲染：关心每步，关心流程，用命令去实现
var newArr = [];
for(var i = 0, len = arr.length; i < len; i++) {
newArr.push(arr[i] * 2);
}
console.log(newArr);
// 声明式渲染：不关心中间流程，只需要关心结果和实现条件
var arr1 = arr.map(function(item) {
return item*2;
});
console.log(arr1)
</script>
</body>
</html>
1. Getting Started with Vue
1.1 Getting Started Example
1. Installation
(1) CDN introduction
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
(2) NPM installation
npm install vue
2. helloworld
<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<!--第二步：引入Vue库-->
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--第三步:创建一个Div-->
<div id="app">
<!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
{
{message}}
</div>
<!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
<script type="text/javascript">
var app=new Vue({ // 创建Vue对象。Vue的核心对象。
el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data:{ // data: 是Vue对象中绑定的数据
message:'hello Vue!' // message 自定义的数据
}
})
</script>
</body>
</html>1.2 Internal Instructions
1、 v-if 、v-else、v-else-if、v-show
These conditional instructions are used to show and hide various elements, and are used as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构语法</title>
</head>
<body>
<div id="app" align="center">
<h1>根据根据分数评级</h1>
<!-- v-if当判断条件成立时 div展现 控制dom元素增加 开销较大 -->
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80">良好</div>
<div v-else-if="score>=70">中等</div>
<div v-else>不及格</div>
<!-- 直接渲染到页面中采用display: none;隐藏属性 如果频繁展现的元素 使用v-show -->
<div v-show="flag">测试show数据</div>
<button @click="flag= !flag">展现</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
//定义分数
score: 100,
flag: false
}
})
</script>
</body>
</html>
The difference between v-if and v-show
- v-if: The event listeners and subcomponents inside the conditional block are destroyed and rebuilt appropriately during the switch process, the overhead is high, and it is used when the runtime condition rarely changes.
- v-show: Adjust the css display property, the overhead is small, and it is used when switching frequently.
2、v-for
(1) Basic usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--模板-->
<div id="app">
<ul>
<li v-for="item in items">
{
{item}}
</li>
</ul>
</div>
<!--js代码-->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65]
}
})
</script>
</body>
</html>
(2) Object traversal
Parameters: the first is the value, the second is the key name, and the third is the index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script></head>
</head>
<body>
<!--模板-->
<div id="app">
<ul>
<li v-for="(value,key,index) in object">
{
{ index }}. {
{ key }} - {
{ value }}
</li>
</ul>
</div>
<!--js代码-->
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
object:{
firstName: 'John',
lastName: 'Doe'
}
}
})
</script>
</body>
</html> 
3、v-text 、v-html
（1）v-text
The value of { {xxx}} has a disadvantage. When the network speed is slow or javascript errors, { {xxx}} will be displayed on the page (interpolation flickering). The v-text provided by Vue can solve this problem
Role: directly display the analysis data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div>
{
{ message }}
</div>
<!--和下面的一样-->
<div v-test="message"></div>
</body>
</html>
（2）v-html
Data for parsing html
<!-- v-html指令 直接显示html效果 容易被攻击 本网站内可以使用
第三方数据来源不要使用-->
<p v-html="html"></p>4、v-on
(1) Conventional usage
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<!--v-on常规用法-->
<div id="add">本场比赛得分: {
{count}}
<button v-on:click="add">加分</button>
</div>
<!--//JS-->
<script type="text/javascript">
new Vue({
el: '#add',
data:{
count: 1
},
methods: {
add: function(){
this.count++;
}
}
});
</script>
</body>
</html>
(2) Abbreviation
<button @click="add">加分</button>5、v-model
Usage: Create a two-way binding on a form control or component. When the js data is modified, the page content changes. When the page content is modified, the data changes.
The following models all need to declare initial values in data
data: {
message: "a",
count: 1,
status: [],
sex: '男',
selected: ''
}（1）input
<input type="text" v-model="message">（2）textarea
<textarea cols="30" rows="10" v-model="message"></textarea>（3）checkbox
<input type="checkbox" id="first" value="1" v-model="status">
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status">
<label for="second">无效</label>
<div>状态：{
{status}}</div>（4）radio
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<div>性别：{
{sex}}</div>（5）select
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {
{ selected }}</div>The complete code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/>
<br>
<textarea cols="30" rows="10" v-model="message"></textarea>
<br>
<input type="checkbox" id="first" value="1" v-model="status"/>
<label for="first">有效</label>
<input type="checkbox" id="second" value="2" v-model="status"/>
<label for="second">无效</label>
<div>状态:{
{status}}</div>
<br>
<input type="radio" id="one" value="男" v-model="sex"/>
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex"/>
<label for="one">女</label>
<div>性别:{
{sex}}</div>
<br>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected {
{ selected }}</div>
<br>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: "a",
count: 1,
status: [],
sex: '男',
selected: ''
}
})
</script>
</body>
</html>
6、v-bind
It is used to handle dynamic attributes of html tags, that is, dynamic assignment.
(1) General usage
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-blind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" width="400px">
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
imgSrc: "../img/20220114112403.png"
}
})
</script>
</body>
</html>
(2) Abbreviation
<img :src="imgSrc" width="400px">7、v-pre、v-cloak、v-once
（1）in-for
Usage: Skip the compilation process of this element and its child elements. Can be used to display raw Mustache tags. Skipping lots of nodes without instructions speeds up compilation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-pre>{
{ message }}</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'A'
}
})
</script>
</body>
</html>
（2）v-cloak
Description:
This directive remains on the element until the associated instance finishes compiling. When used with CSS rules such as [v-cloak] { display: none }, this directive hides uncompiled Mustache tags until the instance is ready.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<div id="app">
<div v-cloak>{
{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '欢迎使用'
}
})
</script>
</body>
</html>
（3）v-once
Usage:
Render elements and components only once. Subsequent re-renders, the element/component and all its children will be considered static content and skipped. This can be used to optimize update performance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="vue.min.js"></script>
</head>
<body>
<div id="app">
<span v-once>{
{message}}</span>
</div>
<script>
new Vue({
el:'#app',
data: {
message: '0'
}
})
</script>
</body>
</html>