This Vue basics will be summarized from 4 directions and 1 project.
Basic grammar
1. Object format of data
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<p>{{student. The name}} {{student. Age}} years old this year, is {{student. Sex}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: "#app".data: {
student : {
name : 'Joe'.age : 23.sex : 'male'}}})</script>
Copy the code2. Bidirectional binding
Requirements: Input box input data, will be displayed to h3 elements, respectively through JS and VUE implementation
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
/ / v - model instruction
new Vue({
el: "#app".data: {
msg : ""}})</script>
Copy the codeEffect:
3. Easy implementation of bidirectional data binding (native JS to achieve vUE bidirectional binding)
<! DOCTYPEhtml>
<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></title>
</head>
<body>
<input type="text" value="" id="ipt" oninput="iptChange(this.value)">
<h3 id="title" ></h3>
</body>
</html>
<script>
// Get the element
var ipt = document.getElementById('ipt')
var title = document.getElementById('title')
// Declare a data object for storing data
var data = {};
// Add attributes to the object.
// object.defineProperty (Object name, attribute name, configuration item)
Object.defineProperty(data, 'msg', {
// get method: the data to assign when defining this MSG
get: function () {
return Hello world
},
// Set method: represents what you need to do when you get the latest value
set: function (newVal) {
title.innerHTML = newVal
ipt.value = newVal
console.log(newVal); }})// console.log(data.msg);
// Initial style
title.innerHTML = data.msg
ipt.value = data.msg
// Input value changed
function iptChange(val) {
data.msg = val // Modifying the data source automatically triggers the set method
}
</script>
Copy the codeEffect drawing: the effect of vUE is the same as that of vUE
4. MVVM in Vue
1.) the View layer:
The view layer, in the front end, is often referred to as the DOM layer, which is mainly used to present various information to the user;Copy the code2). The Model layer:
Data layer (logical layer), the data may be our custom data, or the data from the network request;Copy the code3). The ViewModel layer:
View Model layer is the bridge between View layer and Model layer. On the one hand, it implements Data Binding, which reflects Model changes to View in real time. On the other hand, it implements DOM listening. When the DOM changes, it can change Data accordingly.Copy the code5. v-pre
Concept: Skip compilation of this element and its children. You can use it to display the original Mustache tag. Skipping a large number of nodes without instructions speeds up compilation.
In plain English: disabling the mustache syntax shows what the {{}} should be
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<! -- V-pre: Disables the mustache syntax to show what {{}} should be -->
<p>When you enter<span v-pre>{{msg}}</span>You can see {{MSG}}</p>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: "#app".data: {
msg : Hello world.}})</script>
Copy the codeEffect:
6. V – HTML and v – text
Concept: The mustache syntax is the same as v-text syntax, it does not parse HTML tags, v-HTML is more powerful and can parse HTML tags
V-html can not only render data, but also parse tags
V-text and {{}} expressions render data without parsing labels
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<! The syntax of v-text is the same as that of v-text, it can't parse HTML tags.
<div id="app">
<ul>
<li>{{msg}}</li>
<li v-html="msg"></li>
<li v-text="msg"></li>
<div>------------</div>
<li>{{msg}}</li>
<li v-html="content"></li>
<li v-text="content"></li>
</ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
msg:Hello world..content:"<b>hello world</b>"}})</script>
Copy the codeEffect:
7. v-cloak
Concept: The V-cloak directive is used to hide the tag until the data is rendered so the user can’t see the mustache syntax
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<! The v-cloak command is used to cloak the tag until the data is rendered so that the user can't see the beard syntax.
<div id="app">
<ul>
<li>{{msg1}}</li>
<li v-cloak>{{msg2}}</li>
</ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
msg1:Hello World 1.msg2:Hello World 2}})</script>
Copy the code8. V – show and v – the if
Difference between V-show and V-if:
1). Show and hide:
V-show's display hiding controls the display property of CSS. V-if's display hiding is realized by creating and destroying DOM elements. In terms of performance, V-show has better performance, while V-IF causes performance wasteCopy the code2). Usage Scenarios:
When you need to switch the show hide of an element frequently, use v-show when rendering the element once and never modifying it again, then both will workCopy the code<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box{width: 100px;height: 100px;background-color: red; }</style>
</head>
<body>
<div id="app">
<div class="box" v-show="flag"></div>
<div class="box" v-if="flag2"></div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
flag : true.flag2 : false}})</script>
Copy the codeWe can see from the console that the V-if element is destroyed and the V-show element is just style
9. v-on
Binding events to elements can be v-on directly on the element :click=” method name ()”, or simply @click=” method name ()”.
The corresponding method should be written in the methods in the Vue object. If you want to access the data in the data attribute in the instruction, you can add the attribute name of your own definition by this, this. Custom attribute name
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box{width: 100px;height: 100px;background-color: red; }</style>
</head>
<body>
<div id="app">
<div>
<button @click='btnClick'>button</button>
<div class="box" v-show='flag'></div>
</div>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".// Data is a place where data is stored
data: {
flag : true
},
// Methods are places where methods are stored
methods: {btnClick(){
// Controls the display and hiding of boxes, essentially controls the true and false of boxes
console.log(this);
this.flag = !this.flag
}
}
})
</script>
Copy the codeEffect:
Two. Common instructions
1. v-bind
V-bind: SRC =”” v-bind: SRC =””
1.1 Attribute Binding
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<a :href="link" v-text="msg"></a>
<button @click="gobili">Switch to station B</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
link : "http://baidu.com".msg:'Do a search.'
},
methods: {gobili(){
this.link = "http://bilibili.com"
this.msg = 'Billie Billie'}}})</script>
Copy the codeEffect:
There are two ways to bind classes: object syntax and array syntax.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.green{
color: green;
}
.italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<p class="green">green</p>
<p v-bind:class="{'green':isgreen}">green</p>
<p :class="{'green':isgreen,'italic':isItalic}">green</p>
<h3 :class="greenplay ? 'green italic' : '' ">Green -- Important</h3>
<p :class="['green','italic']">green</p>
<p :class="setItalic()">green</p> <! -- parentheses for immediate execution -->
<button v-text='msg' @click="huan"></button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
greenplay:true.isgreen:true.isItalic:true.msg : Switch 'false'.flag : true
},
methods: {setItalic(){
return ['green'.'italic']},huan(){
if(this.flag){
this.greenplay = false
this.msg = 'Switch to true'
}else{
this.greenplay = true
this.msg = 'Switch to false'
}
this.flag = !this.flag
}
}
})
</script>
Copy the codeEffect:
Note:
- We can use hump syntax: for example
font-size—>fontSize - Or a short line
font-size
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li style="background-color: pink; color:orange;">Background powder, text orange</li>
<li :style="{'background-color':bgColor,color:fontColor}">Background powder, text orange</li>
<li :style="colorObj">Background powder, text orange</li>
<li :style="[colorObj,fontStyle]">Background powder, text orange</li>
<li :style="getStyle()">Background powder, text orange</li>
<! The key value of the object is the string background-color.
<! Add '' to string hump -->
</ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
bgColor:'pink'.fontColor:'orange'.colorObj: {background:'pink'.color:'orange'},
fontStyle: {fontSize:'20px'}},methods: {getStyle(){
return [this.colorObj,this.fontStyle]
}
}
})
</script>
Copy the codeEffect:
2. Loop through the use of v-for and key
V-for: v-for=”(item,index) in array name”
Item corresponds to each item in the array
Index Index (subscript)
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<! If the key is used as a unique identifier, it will lose its uniqueness if the index is used as a unique identifier. If the index is used as a unique identifier, it will change when the array changes. When the array does not change (one-time render), the key can be index or ID. When the array changes, this will cause the HTML rearrangement.
<div id="app">
<ul>
<li v-for="(item,index) in arr" :key="item.id">{{item.name}} <input type="checkbox"></li>
</ul>
<button @click="unshiftOne">Additional elements</button>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
arr: [{id:1.name: 'Joe' },
{ id:2.name: 'bill' },
{ id:3.name: 'Cathy'}},],methods: {unshiftOne(){
this.arr.unshift({ id: 4.name: 'the dog egg'}}}})</script>
Copy the codeRenderings: Create an effect that adds elements in front of it
3. Calculate attributes
Write functions that need to be computed in computed
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li>Name: {{xing}}</li>
<li>Name: {{Ming}}</li>
<li>Name:<input type="text" v-model="username"></li>
</ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
xing: 'Michael'.ming: 'Jackson'.// There is no way to call data in data
// username : xing + ming
},
computed: {
username: {
get() {
return this.xing + ' ' + this.ming
},
set(newVal) {
// Setters are automatically triggered when the value of username changes
console.log(newVal); // String; 'Michael Jack'
let arr = newVal.split(' ') // ['Michael','Jack']
this.xing = arr[0]
if (this.ming === undefined) {
this.ming = ' '
return
} else {
this.ming = arr[1]}}}}})</script>
Copy the codeEffect:
The difference between computed and methods
Computed: Execute once because computed has a cache
Methods: Execute as many times as you call them, because methods have no cache
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li>Name: {{xing}}</li>
<li>Name: {{Ming}}</li>
<li>Name: [computed] {{username}}</li>
<li>Name: [computed] {{username}}</li>
<li>[methods] name: {{with username1 is ()}}</li>
<li>[methods] name: {{with username1 is ()}}</li>
<li>[methods] name: {{with username1 is ()}}</li>
</ul>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
xing: 'Michael'.ming: 'Jackson',},computed: {
username() {
console.log('computed');
return this.xing + ' ' + this.ming
}
},
methods: {
username1() {
console.log('methods');
return this.xing + ' ' + this.ming
}
}
})
</script>
Copy the codeEffect:
4. V – model principle
The V-Model is a syntactic sugar that essentially contains two operations:
v-bindBind the value attribute of the input elementv-onThe directive binds the input event of the input element
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<! -- <input type="text" v-model="msg"> -->
<! -- <input type="text" v-bind:value="msg" v-on:input="iptChange"> -->
<! -- $event replaces e -->
<input type="text" :value="msg" @input="msg=$event.target.value">
<h3>{{msg}}</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
msg : Hello world
},
methods: {iptChange(e){ // e event object element DOM object
/ / modify MSG
this.msg = e.target.value
}
}
})
</script>
Copy the codeEffect:
5. Array operations
Array operation from just began to learn JS has been used again, do not write renderings and code, simple summary of a few commonly used…
Push: Adds from the end of the array and returns the deleted data
Pop: Deletes from the back of the array
Unshift: Adds from the front of the array, returns the deleted data
Shift: Deletes from the front of the array
-Leonard: Splice
ForEach: loop (no return value)
Map: loop (with return value)
Filter: filter
Superposition of the reduce:
6. Customize filters
Global filter
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<! < H3 > </h3> -->
<h3>{{price | filterMoney}}</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
/ / filter
// Vue. Filter (filter name, callback function)
Vue.filter('filterMoney'.val= > {
// toFixed number method goes after the decimal point (digit)
// toFixed is not function
return A '$' + Number(val).toFixed(2) + '元'
})
new Vue({
el: "#app".data: {
price: 21.8}})</script>
Copy the codeEffect:
Local filter
There is little difference between local filters and global filters, the only difference being that global filters can all be shared
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<! < H3 > </h3> -->
<h3>{{price | filterMoney}}</h3>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el: "#app".data: {
price: 21.8
},
filters: {
filterMoney(val) {
return A '$' + val.toFixed(2) + '元'}}})</script>
Copy the codeEffect:
7. Local storage
LocalStorage Permanent storage
// Add data; The value of setItem is string data
localStorage.setItem('name'.'Joe');// Get data
localStorage.getItem('name'); / / zhang SAN
// Delete data
localStorage.removeItem('name');
/ / to empty
localStorage.clear();
Copy the codeSessionStorage temporary sessionStorage
// Add data; The value of setItem is string data
sessionStorage.setItem('name'.'Joe');// Get data
sessionStorage.getItem('name'); / / zhang SAN
// Delete data
sessionStorage.removeItem('name');
/ / to empty
sessionStorage.clear();
Copy the codecookie
You need to open it with live Server
Document. cookie = 'username '