Vue
Componentization, virtualization dom, MVVM (features)
Author of vue: you Yuxi (official website) Vue.js)
Use of vue:
vue features:
What is a component? Encapsulate the code into a component that everyone can use
Virtual dom is a virtual space (space for time)
Ajax requests an array. How to put it in the array? Add one or more for loops
Model data is the data found from the database and reflected to the front end (spliced and displayed by operating dom nodes)
If there are other operations, such as adding, dom needs to retrieve the model data and splice it into the page
The virtual dom is equivalent to opening up a new cache space: the model data is put into the virtual dom, and the front end takes the data from it
The advantage of this is that when changing data, the existing data does not need to be updated repeatedly and captured to the DOM, but directly from the virtual dom
1. Introduction to Vue
Vue.js: a progressive JavaScript framework for building user interfaces (official website description), which is a front-end MVVM framework
Special: applied layer by layer from bottom up - write the foundation first, and then add functions and effects layer by layer
jQuery: binding data to pages
vue devtools: installed on the browser to facilitate testing and debugging
2. Install Vue
(1) Install node.js first
(2) Download the developed version of vue.js on the official website and introduce < script SRC = ".. / JS / Vue. JS" > < / script > in html
Vue instances and containers correspond one-to-one;
There is only one vue instance in real development, and it will be used together with components
xxxx in {xxxx}} needs to write a js expression, and xxxx can automatically read all the attributes in data
Once the data in the data changes, the places where the data is used in the page will also be updated automatically
First vue
<!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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
// Eliminate error prompts in console
Vue.config.productionTip=false;//Set to false to prevent vue from generating production prompts at startup.
// A vue instance can only specify one container, and a container can only be served by one vue instance
new Vue({
el:"#app", // Specify which container this vue serves
data:{message:"hello"}
//Data is used to store data. The data is supplied to the container specified by el for use. The value is temporarily written as an object
})
</script>
</body>
</html>3. Interpolation syntax and instruction syntax of Vue
Interpolation syntax: < label > {{XXX} < / label >
Instruction syntax: < tag v- attribute = "" > < / tag >
(1) Binding data to attributes: v-bind: href = "url" data: {url:“ www.baidu.com" }
Abbreviation: href = "url"
4. Data binding
One way binding: v-bind (all properties can be used, the background changes, the foreground changes, and the background remains unchanged)
Abbreviation: < input: value = "address" > < / input >
Bidirectional binding: v-model (can only be used for form types, that is, those with value)
Abbreviation: < input V-model = "address" > < / input >
5. Two ways of writing el and data
{{name}} - name is not accessible because she appears in data
Instead, all the fields in the data are converted into the attributes of the vue instance
So he can also access the data properties in the prototype
data: {
name: "Neusoft"
}
Two ways of writing el
const c = new Vue({
//el mode 1:
el:"#app",
data:{
name: "Neusoft"
}
});
//el mode 2:
c. $mount ("#app") / / $mount mount mount, bind
Two ways of writing data
const c = new Vue({
el:"#app",
//Method 1: object
data:{
name:"Neusoft"
}
//Method 2: functional formula (more commonly used because components are used)
data: function(){
return {name:"Zhang San"}
}
//Can be abbreviated
data(){
return {name:"Zhang San"}//Returns an object
}
//Remember that you cannot use arrow functions
this Refers to the current vue example
With arrow function this Point to window
data: ()=>{}
});6. Understand MVVM
vue is inspired by MVVM
And v-model
vue instances mount data into containers
M: model data / / is the data in the vue instance 5: V iew / / is the container VM: ViewModel / / the view model is the vue instance ----- listening to data and binding data //Why does V change to m, and M change to v? The role of VM is to listen to data and bind data for vue instances
7.Object.defineProperty adding properties to an object
If variable 1 becomes the attribute of variable 2, and both can achieve the same change
Set (E) {name = E; ----- the important thing is this. When e=name, it cannot change}
-----When assigning a value to the attribute of variable 2, its set() method is used by default
-----When accessing the properties of variable 2, the get () method is used by default
<!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>
<script>
var name="zhangsan";
var per={age:10,address:"Neusoft"}
Object.defineProperty(per,"name",{//Add the name attribute to the variable per
// getter is called automatically when the name attribute in per is accessed
get(){
console.log("Someone visited name Yes")
return name;
},
// When the name attribute in per is assigned a value, the setter will be called automatically
set(e){
name=e;
}
})
// name="lisi";
per.name="lisi";
console.log(name)
console.log(per.name)
</script>
</body>
</html>8. Data broker
What is a data broker?
One object represents the data operation of another object
Object. Defineproperty (object 1, "proxy property 1"{
get() {return object 1. Attribute 1;}
set (E) {object 1. Property 1=e}
})
Data broker in Vue: the operation performed by VM Object.defineProperty()
In the properties of Vue instances, there will be the attribute in data, and there will also be an important attribute _data
_The data attribute (the proxy vue instance listens and binds) stores the key value pairs in date,
//Fundamentals of data broker in Vue (1) Add all the properties in the data object to vm (vue instance) through Object.defineProperty() (2) Add a getter/setter method to each property added to the VM (3) Operate (read / write) the corresponding attribute in the data attribute inside the getter/setter So that you can change what I think
9. Basic instructions
(1) Text instruction
v-html: the tag will be parsed, such as < p > Hello < / P > print out hello
v-text: no label parsing, such as < p > Hello < / P > print out < p > hello</p>
(2) Attribute instruction
02.Vue basic grammar · language sparrow
1) Attribute binding instruction
2) Binding style
----Bind styles using object syntax:
----Bind style using ternary operation:
----Bind inline styles directly
(3) Event instruction
v-on: click = "method 1" ---- abbreviated @ click = "method 1"
methods: {
Method 1 () {alert ("I love learning!")}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Basic use of events:
1.use v-on:xxx or @xxx Bind event, where xxx Is the event name;
2.Event callback needs to be configured in methods Object, eventually vm On;
3.methods Do not use the arrow function for the function configured in. Otherwise this No vm Yes;
4.methods The functions configured in are Vue Managed functions, this The point is vm Or component instance object;
5.@click="demo" and @click="demo($event)" The effect is the same, but the latter can be transmitted;
-->
<div id="app">
<p>Welcome,{{name}}</p>
<button v-on:click="showmsg">I love learning 1</button>
<button @click="showmsg1(111,$event)">I love learning 2</button>//You want to pass parameters and operate events
<button @click="showinfo">I love learning 3</button>
</div>
<script>
Vue.config.productionTip=false;
var vm = new Vue({
el: '#app',
data: {
name:"jack"
},
methods:{
showmsg(){
alert("I also love learning!")
},
showmsg1(number,event){
alert("I also love learning!"+number)
console.log(event.target.innerText)
},
showinfo(event){//Event is the current event of the click (dom node)
console.log(event.target.innerText)//. target target object / / innerText/innerHtml get the currently clicked content
}
}
})
</script>
</body>
</html>
(4) Event modifier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.one{
padding: 10px;
height: 100px;
width: 200px;
background: skyblue;
}
.two{
height: 30px;
width: 100px;
background:goldenrod;
}
.three{
padding: 0px;
width: 200px;
height: 200px;
border: 2px solid red;
overflow: auto;
}
.three li{
margin: 0px;
width: 200px;
height:100px;
background: greenyellow;
}
</style>
</head>
<body>
<!--
Vue Event modifiers in:
1.prevent: Block default events (common);
2.stop: Prevent event bubbling (common);
3.once: The event is triggered only once (common);
4.capture: Use the capture mode of events;
5.self: only event.target The event is triggered only when it is the element of the current operation;
6.passive: The default behavior of the event is executed immediately without waiting for the event callback to complete;
-->
<div id="app">
<!--prevent: Block default events (common)-->
<a href="http://Www.baidu. Com "@ click. Prevent =" showmsg "> welcome, {name}}</a></br>
<!--Prevent event bubbling (common)-->
<div class="one" @click="showmsg">
<div class="two" @click.stop="showmsg" ></div>
</div>
<!--once: Event triggered only once (common)-->
<button @click.once="showmsg">Order me</button>
<!--capture: Use the capture mode of events;-->
<div class="one" @click.capture="showinfo(2)">
div1
<div class="two" @click="showinfo(2)" >
div2
</div>
</div>
<!-- only event.target The event is triggered only when it is the element of the current operation; -->
<div class="one" @click.self="showmsg1($event,1)">
div1
<div class="two" @click="showmsg1($event,2)" >
div2
</div>
</div>
<!--passive: The default behavior of the event is executed immediately without waiting for the event callback to complete-->
<ul class="three" @scroll.passive="show">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
Vue.config.productionTip=false;
var vm = new Vue({
el: '#app',
data: {
name:"zhangsan"
},
methods: {
showmsg(){
alert("I love China!");
},
showinfo(number){
console.log(number)
},
showmsg1(event,number){
console.log(event.target)
console.log(number)
},
show(){
for(var i=0;i<10000;i++){
console.log(i)
}
}
}
})
</script>
</body>
</html>(5) Keyboard events
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1.Vue Key aliases commonly used in:
enter => enter
delete => delete (Capture delete and backspace keys)
sign out => esc
Space => space
Line feed => tab (Special, must cooperate keydown To use)
upper => up
lower => down
Left => left
right => right
2.Vue For keys that do not provide an alias, you can use the original key key Value, but be careful to turn to kebab-case((DASH name)
3.System modifier key (special usage): ctrl,alt,shift,meta(namely window (key)
(1).coordination keyup Use: press the modifier key at the same time, then press other keys, and then release other keys to trigger the event.
(2).coordination keydown Use: normal trigger event.
4.You can also use keyCode To specify specific keys (not recommended)
5.Vue.config.keyCodes.Custom key name = Key code, you can customize the key alias
-->
<div id="app">
<p>Welcome,{{name}}</p></p></p>
<input type="text" placeholder="enter one user name" @keydown.huiche="showmsg"></input>
</div>
<script>
Vue.config.productionTip=false;
//Vue.config.keyCodes.huiche = 13;
var vm = new Vue({
el: '#app',
data: {
name:"zhangsan"
},
methods: {
showmsg(event){
// alert(event.target.value)
console.log("keyCode:"+event.keyCode+" key:"+event.key)
}
}
})
</script>
</body>
</html>