Vue01
Development process of front-end development technology
- Earliest: native DOM cooperates with JS to operate web pages
- Development: use encapsulation techniques to encapsulate the native DOM into a jQuery framework
- At present: a large number of market shares are occupied by vue – at present, there are few, and most old projects are maintained
- Now?
- Since 2009, the first engineering framework - angular - Google has emerged
- In 2013, the second framework – react – Facebook emerged
- In 2014, you Yuxi, an open source author of Vue, a domestic framework
- At present, it occupies a large market share in China
Vue
Comparison of core ideas:
- jQuery idea: write less, do more
- Using function encapsulation techniques to simplify DOM operation code
- Vue's idea: do not write DOM operations, but operate DOM as well
Official documents: https://cn.vuejs.org/v2/api/
Vue has developed into three versions:
- vue1: it has been eliminated
- vue2: current mainstream version – mainly explained at this stage
- vue3: future trends – follow up at this stage
vue can be developed in two ways:
- Scripting, similar to jQuery through the introduction of scripts - suitable for beginners
- Scaffold mode: highly automated / highly engineered, suitable for actual development
Script address: https://cn.vuejs.org/v2/guide/installation.html
[the external link image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-OFg6uuya-1642606234405)(Vue01.assets/image-20220113144202609.png)]
Vue's idea of automation
<!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="box"></div>
<script>
var data = { msg: null }
// vue idea: listen for attribute changes in the object. When the attribute is modified, update the DOM elements related to the attribute synchronously
Object.defineProperty(data, 'msg', {
// Add an assignment listening set for the msg attribute of data
// data.msg = value / value
set(value) {
console.log('msg Assigned as:', value)
// Update to the element with id=box
box.innerHTML = value
},
})
//By writing this code, you can automatically update the text to the id=box element
data.msg = 'Hello Vue!'
</script>
</body>
</html>
Interpolation syntax
<!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>
<!-- id Random name, But I'm used to writing app -->
<div id="app">
<!-- Previous template string, use ${} representative JS Code range -->
<!-- vue Used in {{}} representative JS Code range -->
<div>{{ 8 * 9 }}</div>
<!-- {{}} Can be used in data Data items in -->
<div>{{msg}}, {{name}}</div>
</div>
<script src="./vendor/vue.js"></script>
<script>
// vue carries out more perfect encapsulation and automates the operation of DOM
// The writing method is fixed format, must recite!!!
// Configuration items: all are fixed configurations, and each has its own meaning
const options = {
// Abbreviation of element el: element, #app stands for id='app '
// vue manages the element with id='app '
el: '#app',
// Data item: fixed attribute. Only the content stored in this attribute can be displayed in HTML
data: { msg: 'Hello', name: 'the height is' },
}
// Create a vue object. The parameter is a configuration item
new Vue(options)
</script>
</body>
</html>
Interpolation syntax
<!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">
<!-- <h1>Spring Festival holiday: 29~6</h1> -->
<!-- Interpolation syntax: {{}} -->
<div>full name: {{ename}}</div>
<div>Age: {{eage}}</div>
</div>
<script src="./vendor/vue.js"></script>
<script>
var a = new Vue({
el: '#app ', / / elements to manage
// Data: data item. The internal value can be written freely
data: { ename: 'Bright', eage: 22 },
})
// From the printout, you can see that the data items in data will be automatically added with a get/set listener to achieve the effect of updating DOM when data changes
console.log(a)
</script>
</body>
</html>
event
<!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">
<!-- Native grammar: οnclick="Function name()" -->
<!-- vue1.0 edition: v-on:click="Function name" -->
<!-- vue2.0 edition: @click="Function name" -->
<button @click="hit">hit{{name}}</button>
<button @click="hitGD">Hit GAODA</button>
<button @click="hitGreen">Little green</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { name: 'Bright' },
//Fixed attribute: methods is used to store functions
methods: {
// Original format attribute name: function
// hit: function () {},
// Syntax sugar:
hit() {
console.log('Liangliang said: It hurts...')
},
hitGD() {
console.log('Hit GAODA...')
},
hitGreen() {
console.log('green...green...')
},
},
})
</script>
</body>
</html>
this of the event
<!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">
<button @click="add1">{{num}}</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
var a = new Vue({
el: '#app',
data: { num: 5 },
methods: {
add1() {
// this of the function: the object on which it is executed
// this points to the object obtained by the current new Vue()
// Vue bottom layer will pull out the methods in methods and put them in itself
console.log('this:', this)
// !!! Remember: the structure of this is the real data format through printing. num is written in data, but it is not in the runtime
this.num++
},
},
})
console.log(a)
</script>
</body>
</html>
Event practice
<!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">
<div>Unit Price: ¥9999</div>
<!-- disabled=true Representative not available -->
<!-- New grammar: Attribute JS grammar -->
<!-- vue1.0: v-bind:Attribute name="JS code" -->
<!-- vue2.0: :Attribute name="JS code" -->
<!-- Remember: Don't write:, Attribute name="value" This value is a string type -->
<!-- num Yes 1 , be num==1 yes true, Not available is true -->
<!-- num Not 1, num==1 yes false, Not available is false, Representative available -->
<button @click="jian1" :disabled="num==1">-</button>
<b>{{num}}</b>
<button @click="jia1">+</button>
<div>Subtotal: ¥ {{9999 * num}}</div>
<!-- vue When the underlying layer detects a property change, All related are automatically updated DOM element -->
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { num: 5 },
methods: {
// Do not use the arrow function: this points to different points, which will cause problems
jian1() {
this.num--
},
jia1() {
this.num++
},
},
})
</script>
</body>
</html>
attribute
<!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>
<br>
<div id="app">
<!-- No: yes HTML code, Ordinary string in quotation marks -->
<li title="title">{{title}}</li>
<!-- vue1 grammar: v-bind:Attribute name="JS code" -->
<!-- vue2 grammar: :Attribute name="JS code" -->
<li :title="title">{{title}}</li>
<hr />
<li title="9*9">9*9</li>
<li :title="9*9">9*9</li>
<!-- !!!be careful: {{}}Is used in double label content, Writing in properties is not supported, Property is required :grammar -->
<li title="{{9*9}}">9*9: {{9*9}}</li>
<input :placeholder="title" />
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { title: 'Here comes Golda' },
})
</script>
</body>
</html>
Event parameters
<!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">
<div>{{num}}</div>
<!-- Functions without parameters, Can be omitted() -->
<!-- With parameters: -->
<button @click="add(1)">+1</button>
<button @click="add(2)">+2</button>
<button @click="add(3)">+3</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { num: 5 },
methods: {
// Parameter n is the number to add
add(n) {
this.num += n
},
},
})
</script>
</body>
</html>
Parameter exercise
<!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">
<p>Gundam's wife is: {{name}}</p>
<button @click="chooseWife('Delireba')">Delireba</button>
<button @click="chooseWife('Gulinaza')">Gulinaza</button>
<button @click="chooseWife('Marzaha')">Marzaha</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { name: null },
methods: {
chooseWife(name) {
this.name = name
},
},
})
</script>
</body>
</html>
Parameter exercise
<!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">
<div>Price: {{price}}</div>
<button @click="changePrice(100)">100</button>
<button @click="changePrice(500)">500</button>
<button @click="changePrice(1000)">1000</button>
<div>quantity: {{count}}</div>
<!-- shift+The letters are capitalized -->
<button @click="changeCount(10)">10</button>
<button @click="changeCount(20)">20</button>
<button @click="changeCount(30)">30</button>
<p>Total price: {{price * count}}</p>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: '#app',
data: { price: 0, count: 0 },
methods: {
changePrice(value) {
this.price = value
},
changeCount(value) {
this.count = value
},
},
})
</script>
</body>
</html>
Construction process of 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>
</head>
<body>
<div id="app"></div>
<script>
// Briefly explain: what did new Vue() do
function Vue(options) {
// Source code: fixed read options el
this.$el = document.querySelector(options.el)
// Fixed read in source code: data attribute name
for (let key in options.data) {
// Traverse the properties of the data object and save them to the current vue object one by one
this[key] = options.data[key]
}
for (let key in options.methods) {
this[key] = options.methods[key]
}
}
var a = new Vue({
// Why is it a fixed attribute: el
el: '#app',
// Fixed data attribute: because data is read in the source code
data: { num: 4, name: 'Bright' },
methods: {
add1() {},
add2() {},
},
})
console.log(a)
</script>
</body>
</html>
task
- Click + and - to modify the quantity, and the total price in the rear will change with it
- When the quantity is 1, the subtraction button cannot be clicked
- Click - 100 and + 100 to modify the unit price. Note that the unit price at the top does not change with the change
- So: you need two price related attributes to store the upper and lower unit prices respectively
- Click the modify price button to update the unit price to the price above
[the external chain picture transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-ucbAkFQV-1642606234407)(Vue01.assets/image-20220113180934379.png)]
Why is it a fixed attribute: el
el: '#app',
//Fixed data attribute: because data is read in the source code
Data: {num: 4, name: 'Liangliang'},
methods: {
add1() {},
add2() {},
},
})
console.log(a) </script>
## task - click + and - Quantity can be modified, The total price of the rear will change with the time - When the quantity is 1, The subtraction button is not clickable - click -100 and +100 Unit price can be modified, Note that the unit price at the top does not change with time - therefore: You need two price related attributes, Store the upper and lower unit prices respectively - Click the modify price button, You can update the unit price to the price above [External chain picture transfer...(img-ucbAkFQV-1642606234407)]