Vue Beginner's Guide

May 29, 2021 Article blog

Vue Quick Start

preface

For a novice in programming, JavaScript's syntax is complex, and choosing a Vue library can be a good experience. In many ways, Vue simplifies the JavaScrip syntax and enables two-way binding of data to views for responsive page purposes.

The blogger is a sophomore programming white, the following content is their understanding of Vue, the purpose of writing this blog is to consolidate their basic knowledge of Vue, you can watch as a note, if you can help the school Vue's friends, it is a great honor, for there are many expressions of inappropriate and logical errors, but also hope that everyone is right.

Resources: Vue .js 1.0 Tutorials

1. Vue instance and template syntax

<body>
	<div id="app"> 
		<p>{{message}}</p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			message:'hello,word!'
		},
		methods:{
		},
	})
</script>
</body>

el

The Vue syntax is written in script like JavaScript, through id selector binding DOM, in Vue, only the id of the DOM needs to be mounted in el which can simply be understood as a hook, el hooks everything in the <div > through the characteristics of id="app" so that we can implement the operation on the DOM in Vue.

data

data in Vue is used to declare the data we want to use, which makes it easier for us to maintain or manipulate documents with clear data that needs to be modified by a particular section, and does not require direct manipulation of the DOM, where the data is tied to the DOM in both directions, and when we modify the data declared in data there are also responsive changes in the DOM.

methods

Methods the entire logic of the page and the trigger events on the page, which are equivalent to function content in JavaScript

2. Built-in instructions

There are many built-in instructions in Vue that replace the actions on documents and events in JavaScript.

v-html

v-html Update the data as an html tag

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<p>{{website}}</p>
		<p v-html="message">{{website}}</p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			website:'Vue，js',
			message:'<h1>hello,word!</h1>'
		},
		methods:{
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide1

As you can see, the second <p> the Vue bound in the label .js is hello, word! Updated, and in the declared message '<h1>hello,word!<\h1>' updated its contents with the html tag, see this is a first-level title of hello, word!.

v-text

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<p>{{website}}</p>
		<p v-text="message">{{website}}</p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			website:'Vue,js',
			message:'<h1>hello,word!</h1>'
		},
		methods:{
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide2

With the v-txet directive, although <p> label are still replaced, they are displayed only as strings, not as html tags.

v-cloak

When the code loads, the HTML is loaded first, the interpolation syntax is loaded onto the page as HTML content, and the interpolation syntax is replaced after the js is loaded, so we see a flashing problem, and v-clock solves the problem.

<div v-cloak>{{msg}}</div>
<style type="text/css">
 [v-cloak]{
  display: none;
 }
 </style>

v-once

v-once instruction renders elements and components only once, and subsequent renderings that use the elements, components, and all their child nodes of the directive are treated as static and skipped, which can be used to optimize update performance.

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<p v-once>can not change:{{website}}</p>
		<p>change: {{website}}</p>
		<p ><input type="text" v-model = "website"></p> 
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			website:"hello"
		},
		methods:{
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide3

v-on

Event binding for Vue is done using the built-in v-on instruction, as well as passing parameters.

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<input type="button" value="单击事件" v-on:click="alert">
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		},
		methods:{
		alert:function() {
			alert('触发了点击事件');
		}	
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide4

The method named alert was added after v-on:click click event, and before that I tried to use v-on:click="alert('触发了点击事件')" but after clicking the console reported the error, I don't know if there was a god who understood why this was the case.

When using v-on instruction, not only can you trigger click events, such as double-click events and keyboard tapping events, but you only need to modify v-on:click or (mousedown, mouseup, etc.), and we can reduce v-on:click to @click and the method to trigger the event must be written in methods.

v-if

v-if v-show enable conditional rendering, and Vue renders elements based on true and false conditions of expression values. There are also v-else, v-else-if instructions that can be paired with v-if, similar to if-else in JavaScript.

Simply put, v-if is equivalent to the conditional operation of the DOM in JavaScript, which is conditional based on the true and false expression of the value, so let's see how we do it.

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"> 
		<input type="button" value="切换"  @click="go">
		<p v-if="jump">我跳出来拉</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide5

Note that the default Boolean value for v-if is false and v-if is a direct action on DOM and the subsequent v-show is an action on the style.

v-show

v-show usage is much the same as v-if except that elements with v-show are always rendered and retained in the DOM, v-show simply switches the CSS property display of the element, and when the template property is true, the console displays display:block and when the property value is false, the console displays display:none
v-show does not support <tempalte> syntax, nor does it support v-else.

<body>
	<div id="app"> 
		<input type="button" value="切换"  @click="go">
		<p v-show="jump">我跳出来拉</p>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
			jump:false
		},
		methods:{
			go:function(){
				this.jump=!this.jump;
			}
		},
	})
</script>
</body>

The difference between v-show and v-if

Are based on the expression's true and false judgment elements display and hide
v-if renders an element only if the condition is true, and v-show always renders the element regardless of the initial condition.
v-show has a higher initial overhead and v-if has a higher switching overhead
Use v-show when switching frequently, v-if when operating conditions rarely change

v-for

In Vue, a v-for instruction is provided to loop the data.

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h>开始循环</h>
		<li v-for="index in item">
			{{index}}
		</li>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5],
		},
		methods:{
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide6

<body>
<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>w3cschool</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h>开始循环</h>
		<li v-for="(index,items) in item">//index表示数组中的元素，items表实元素的下标
			{{index}},{{items}}
		</li>
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		item:[1,2,3,4,5],
		},
		methods:{
		},
	})
</script>
</body>
</html>

Vue Beginner's Guide7

v-model

The most important thing about v-model is two-way data binding. When you use Vue to manipulate DOM elements, the view and the data change at the same time as either party.

<body>
	<div id="app">
        输入内容：<input type="text" v-model="message"><br/>    <!--v-model绑定了输入框与message中的内容-->
        反转内容：{{reversedMessage}}
    </div>
<script>
	new Vue({
            el:'#app',
            data:{
                message:''
            },  
            computed:{              //计算属性在computed选项中定义，当计算属性所依赖的值发生变化时，这个属性的值会自动更新
                                    //computed可以换做methods定义一个方法实现相同的功能
                reversedMessage: function(){
                    return this.message.split('').reverse().join('') //选中message中的内容，反转后添加
                }
            }
        })
</script>
</body>

When we enter a value in the input input box, the bound message property value also changes, and when the binding is successful, any legitimate string or number we enter in the input, Vue re-updates the message's property value to match the value we reversedMessage and then reverses the message upside down and reprints it in reverse Message, which occurs simultaneously because it is a two-way data binding.

v-bind

The function of v-bind is to bind properties for elements, written as v-bind: property names, which can be abbreviated as ":property names".

<body>
	<div id="app">
		<img :src="imgsrc" :title="imgtitle">
	</div>
<script>
	new Vue({
		el:'#app',	
		data:{
		imgsrc:"xxx",
		imgtitle:"获得图片",
		},
		methods:{
		},
	})
</script>
</body>

Whether it's class or other labels, you can bind properties for elements by using : Label Name. The contents of the bound element are as a JavaScript variable, so you can write an expression of JavaScript for it.

The editor-in-chief recommends a few Vue good lessons for Xiaobai to learn efficiently: