Article directory
-
- foreword
- prospect
- Learn vue to master those skills-
- Why learn vue
- walk into vue
- Official use of vue.js
-
- If you want to use vue, you can't get around the life cycle. Here is the life cycle diagram:
- common command
-
- v-show (accepts a Boolean value true to show the current tab false to hide the current tab)
- v-if (accepts a Boolean value true to show the current tab false to hide the current tab)
- v-else (v-if value is true, v-else content will not be displayed, and v-else content will be displayed instead)
- v-for (can loop an array item is each item in the array; index is the subscript of the array)
- v-on can bind a function to realize the operation of the event click click change listen keyup keyboard event and so on
- v-bind
- v-model
- end of article
foreword
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.
IE8 and below versions do not support vue because vue uses the Object.defineProperty method that is not supported by IE8 and below versions, it is a must for vue
prospect
Vue's Long Term Technical Support (LTS), End of Support (EOL) and its Extended Service
-
How long will technical support for Vue 2 last?
-
Vue 2.7 is the current and last minor version update of Vue 2.x. Vue 2.7 will provide 18 months of long-term technical support (LTS: long-term support) starting from its release date, July 1, 2022. During this time, Vue 2 will provide necessary bug fixes and security fixes, but no new features.
-
The end of support for Vue 2 is December 31, 2023. After that, Vue 2 is still available in existing distribution channels (various CDNs and package managers), but will no longer be updated, including fixes for security issues and browser compatibility issues.
-
Although the official said that it will not be updated in the future, many projects still choose vue2. The reason: Compared with vue3, the technology is mature (the pits are basically filled in, the ecology is complete, and it is still the first choice for stable projects)
Learn vue to master those skills-
- Proficiency in using Html + JavaScript + Css / es5 es6 new features
Why learn vue
1 Low learning cost, low threshold and easy to learn
2 Lightweight, high performance, componentized
3 Great advantages in building single-page applications
4 Compared with the traditional mvc mode, vue. Developers can focus more on business logic
walk into vue
Hello World
hint:
- The easiest way to try out Vue.js is to use the Hello World example. You can open it in a new tab of your browser and follow the examples to learn some basic usage. Or you can create a .html file and import Vue as follows:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
or
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
If you are a novice, it is not recommended to use vue-cli to create projects step by step is a good choice
Example:
1 Right-click to create a test_01_helloWorld.txt text file
2 Copy the following code into it and change the file suffix .txt to .html Press Enter and the file will become test_01_helloWorld.html file
3 Double-click the test_01_helloWorld.html file to open it to complete the vue first time use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{
{
message }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
If you press F12 at this time, the right control bar will prompt: You are using vue
Example Analysis
From the above picture, it can be understood as:
1 Create html
2 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" Import vue.js
3 new Vue() Create a Vue instance for internal execution The initialization process of the root instance
4 el binds the dom (here refers to the div id="app" tag)
5 data: {} where the variable is defined
6 The data object defines a variable value of message whose value is the text of Hello World!
7 The view layer (in the body tag) uses the interpolation expression of vue.js in a div tag to use the message variable
Note : Only when el binds the dom area to use vue.js is valid, as shown in the figure:
correct writing:
in this way! We have completed the practice of using vue.js for the first time so easy!
Editor VSCode
Of course, it is definitely unrealistic and inefficient for us to write code in the way of .txt, so our editor
should be used. There are many editors used in the front end, such as Sublime Text / VS Code / HBuilder / Atom, etc.
Here we use vsCode to edit device
- Download vsCode
- After downloading the vsCode editor, there will be a shortcut key icon on the desktop
- Just press the left button on the test_01_helloWorld.html file and drag it to the shortcut icon to release the left button to open the file directly and start the editor
- Of course, you can also directly double-click the left button to open the editor and import the file to be opened in the editor, such as:
-
vsCode plugin
vsCode is a lightweight editor that can be used to quickly and efficiently edit code. Plug-ins are a highlight of vsCode. Install according to your needs.
Steps to install plug-ins: 1 Open the plug-in library 2 Enter the name of the plug-in installed 3 Click to install There are
many, many plug-ins to choose from The required installation can be recommended by the web-side plug-in , or you can install it yourself according to Baidu's needs
. Example:
Open the page in the editor Alt + B Quickly open the page
, so we have completed the preparations for learning vue.js
vsCode More usage can be Baidu very simple
Official use of vue.js
If you want to use vue, you can't get around the life cycle. Here is the life cycle diagram:
4 groups of commonly used life hook functions are proposed below
const app = new Vue({
el: '#app', // 绑定元素
生 beforeCreate () {
"这一组是创建阶段"} // Vue实例创建之前，什么都没有，一般不做操作
命 created () {
} // Vue已经创建实例，可做数据请求。但是没有实现挂载，也没有创建元素
周 beforeMount(){
"这一组是挂载阶段"} // 挂载之前。这里找到了主元素，但是里面知识模板，没有真实DOM。也可做数据请求
期 mounted() {
} // 挂载完成之后，这里真实DOM已经完成渲染和挂载，可以访问真实DOM，能做页面交互
一 beforeUpdate(){
"更新阶段"} // 跟新之前。这里不建议再次操作数据，容易造成死循环，导致内存溢出
共 updated() {
} // 跟新完成
四 beforeDestroy(){
"销毁阶段"} // 销毁前一般做一些无用的时间监听或者无效的定时器
组 destroyed(){
} // 销毁
})
还有一组：activated ()进入组件触发 deactivated ()离开组件触发
Introduction to common instance attributes (just like the life cycle, you don’t need to worry too much about its principles and know its functions)
const app = new Vue({
el: '#app', // 绑定元素
data: {
}, //管理数据。组件定义时，data必须是函数
computed: {
}, // 计算属性,会被缓存：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
methods: {
}, // 装方法的：计算属性会被缓存，而方法不会被缓存，通常计算属性效率会比方法更高
watch: {
}, // 用来监测Vue实例上的数据变动
filters: {
}, // 定义处理数据的地方
components: {
}, // 注册组件的地方
})
common command
v-show (accepts a Boolean value true to show the current tab false to hide the current tab)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-show 接受一个 Boolean 值 true 展示当前标签 false 隐藏当前标签 -->
<div v-show="true">{
{
message }}</div>
<div v-show="false">{
{
name }}</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
name: '孙悟空'
}
})
</script>
</html>
sample graph:
NOTE: The following examples will abbreviate redundant code
v-if (accepts a Boolean value true to show the current tab false to hide the current tab)
<div id="app">
<!-- v-if 接受一个 Boolean 值 true 展示当前标签 false 隐藏当前标签 -->
<div v-if="true">{
{ message }}</div>
<div v-if="false">{
{ name }}</div>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
name: '孙悟空'
}
})
Example picture:
It seems a bit familiar because v-if and v-show seem to be the same, so why are they both bright and bright?
analyze
- v-if controls whether the label/component should exist through a Boolean value (true / false) (true means that it should exist, rebuild the label/component; false means it should not exist, destroy the label/component)
- v-show is to control the css display: none of the label/component through the boolean value (true / false) to decide whether it should be hidden (true means not to hide the label/component at this time, remove display:none at this time, it is not to change the display to block , but keep the originality of the element style; false means to hide the label/component and the value of display at this time is none)
the difference
- 1 v-if label/component will not be rendered when the condition is not true; v-show will be rendered once regardless of whether the condition is true or not, because only when the dom is rendered will there be css
- 2 v-if has high switching performance consumption v-show has high initial performance consumption
scenes to be used
- Switch v-show frequently
- Conversely v-if
v-else (v-if value is true, v-else content will not be displayed, and v-else content will be displayed instead)
<div id="app">
<!-- v-if 值为 true 将不显示 v-else 内容 反之 显示 v-else 内容 -->
<div v-if="count == 0">{
{ message }}</div>
<div v-else>{
{ name }}</div>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
name: '孙悟空',
count: 1
}
})
sample graph:
v-for (can loop an array item is each item in the array; index is the subscript of the array)
<div id="app">
<!-- v-for 可循环一个数组 item 是数组里的每一项; index 是数组下标 -->
<div v-for="(item, index) in arr">名字:{
{ item.name }} / 编号: {
{ index }}</div>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
arr: [
{
name: '孙悟空'},
{
name: '猪八戒'},
{
name: '沙僧'},
]
}
})
sample graph:
v-on can bind a function to realize the operation of the event click click change listen keyup keyboard events etc.
<div id="app">
<!-- 此次测试： v-on:click 点击事件 keyup 键盘事件-->
<button v-on:click="clickFun_01">click 点我试试</button>
<button @click="clickFun_02">click 点我试试 简写</button>
<button @keyup="keyupFun_01">keyup 点我试试 简写</button>
<!-- 以上定义了通过 v-on 绑定了 clickFun_01 clickFun_02 keyupFun_01 3个事件-->
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
},
methods: {
// 事件实现区
clickFun_01() {
// 事件名
console.log('打印' + this.message) // 实现内容
},
clickFun_02() {
// 事件名
console.log('我是简写' + this.message) // 实现内容
},
keyupFun_01(e) {
// 事件名
console.log('按下了:' + e.key + '键，键码为:' + e.keyCode) // 实现内容
}
}
})
Example image:
v-on detailed tutorial>>
v-bind
Examples of keywords for binding properties:
<div id="app">
<!-- 此次测试： v-bind:style 绑定style -->
<div v-bind:style="myStyle_01"></div>
下面是 v:bind 简写
<div :style="myStyle_02"></div>
可以加入判断
<div :style="`${1 < 3 ? myStyle_02 : 'width: 150px;height: 50px;background-color: pink;'}`"></div>
上面判断 显示 true 结果 下面显示 false 结果
<div :style="`${1 > 3 ? myStyle_02 : 'width: 150px;height: 50px;background-color: pink;'}`"></div>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
myStyle_01: 'width: 50px;height: 50px;background-color: red;',
myStyle_02: 'width: 150px;height: 50px;background-color: blue;'
},
})
sample graph:
If you are interested in more usage, you can take a look at:
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<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 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>
Summary: To put it simply, when the attributes on the label are to be changed dynamically, use v-bind to bind it. To put it bluntly, it is to add a colon followed by your own variable value;
v-model
illustrate
- v-model is a kind of grammatical sugar, um, it’s a little sweet
- Use scenarios such as: create two-way data binding on input, textarea and select elements
Example:
<div id="app">
<!-- 此次测试： v-model 语法糖 -->
<input type="text" v-model="count">
<div>测试变量count:{
{ count }}</div>
<button @click="countFun">点击改变count</button>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
count: 0,
},
methods: {
countFun() {
this.count++
}
}
})
Let’s analyze what the above code does bit by bit.
1. The input tag uses v-model to bind the count variable.
2. The div tag refers to the count variable for easy observation.
3. The button button is bound to the countFun method.
Let’s see the running results
when When the button is clicked to trigger the countFun method, the count variable will be incremented by 1. At this time, the input and test variable numbers will also be automatically incremented.
If it is only used, it is enough to pass the above. To correct the principle, you have to continue to look down
principle
You can see that when the content in the above code input is modified, the test variable number also changes accordingly! ! ! Pay attention! The input tag is not bound to any event or listener,
there is only one v-model two-way binding, let's look at the principle of v-model
Principle analysis: Use the @input / change method of the input tag to change the variable count, and this variable is referenced by the div at the same time, and is also referenced by the v-bind:value="count" of the input tag; let's look at the effect of v-model the original method of
<div id="app">
<!-- 此次测试： v-model 语法糖 -->
<!-- v-bind:value 动态绑定 input 输入内容 -->
<input type="text" @input="inputFun" v-bind:value="count">
<div>不使用 v-model 测试变量count:{
{ count }}</div>
<button @click="countFun">不使用 v-model 点击改变count</button>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
count: 10086,
},
methods: {
countFun() {
this.count++
},
inputFun(e) {
// 以 @input 绑定的 inputFun 方法(事件) 通过 e（event）拿到输入的值 赋值给 count
this.count = e.target.value
}
}
})
Next, look at the example results:
the above example results can clearly see that there is no difference from using v-model, the principle of v-model is here so easy!
Tip: If you write a vue project in your interview resume, then the v-model principle will most likely be asked. The
above are some commonly used instructions in vue, but not all of them.
For example: v-else-if v-slot v-cloak v-once, etc. These are not currently available, you can check them yourself if you are interested
end of article
testimonials
Thank you for your patience in reading. If there are deficiencies, I hope you can correct me.
We will travel together in the long river of vue, so that we have a common goal. I
wish you every step of the way!