1, Getting to know Vue
First acquaintance vue:
(1) To make vue work, you must create a vue instance and pass in a configuration object
(2) The code in the root container still conforms to the html specification, but mixed with some special vue syntax
(3) The code in the root container is called vue template
(4) vue instances and containers correspond one-to-one
(5) There is only one vue instance in real development, and it will be used together with components
(6) xxx in {{xxx}} needs to write js expression, and xxx can automatically read all attributes in data
(7) Once the data in the data changes, the places where the data is used in the page will also be updated automatically
Pay attention to distinguish between js expressions and js code (statements)
(1) Expression: an expression will produce a value, which can be placed wherever a value is required
(2) Statement: the value if for will not be generated
<!--Prepare a container-->
<body>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //Prevent vue from generating production prompts at startup
//Create vue instance
new Vue({
el:'#root',//el is used to specify which container the current vue instance serves. The value is usually the css selector string
data:{//Data is used to store data. The data is used by the container specified by el. The value is written into an object temporarily
name:'Zhang San'
}
})
</script>
Two. Template syntax
vue template syntax has two categories:
1. Interpolation syntax:
(1) Function: used to parse label body content.
(2) {{xxx}},xxx is a js expression, and all attributes in data can be read directly
2. Instruction syntax:
(1) Function: used to resolve tags (including tag attributes, tag body contents, binding events...)
(2) For example: v-bind:href = "xxx" or abbreviated as: href = "xxx". xxx also needs to write js expression,
And all attributes in data can be read directly
(3) Note: there are many instructions in vue in the form of: V -, Here we just take v-bind as an example
<body>
<div id="root">
<h1>Interpolation syntax</h1>
<h3>Hello,{{name}}</h3>
<hr />
<h1>Instruction syntax</h1>
<a :href="school.url">Let me go{{school.name2}}study</a>
</div>
</body>
<script>
Vue.config.productionTip = false //Prevent vue from generating prompts at startup
new Vue({
el:"#root",
data:{
name:'jack',
school:{
name2:'Zhang San',
url:'http://www.baidu.com'
}
}
})
</script>
3, Data binding
There are 2 data binding methods in vue:
1. One way binding (v-bind): data can only flow from data to page
2. Two way binding (v-model): data can not only flow from data to pages. You can also flow from page to data
remarks:
(1) Bidirectional binding should generally be on form elements (such as input and select)
(2) v-model:value can be abbreviated as v-model, because v-model collects value by default
<body>
<!--Prepare a container-->
<div id="root">
<!--Common writing-->
<!--Single data binding:<input type="text" v-bind:value="name" /><br />
Two item data binding:<input type="text" v-model:value="name" />-->
<!--Abbreviation-->
Single data binding:<input type="text" :value="name" /><br />
Two item data binding:<input type="text" v-model="name" />
<!--The following code is wrong because v-model Can only be applied to form class elements (input class elements). need value attribute-->
<!--<h2 v-model:x="name">How do you do</h2>-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //Prevent vue from generating prompts at startup
new Vue({
el:'#root',
data:{
name:'Zhang San'
}
})
</script>
4, Two ways of writing el and data
1. el can be written in two ways:
(1) Configure the el property when. new Vue
(2) First create the vue instance, and then specify the value of el through vm.$mount('#root')
2. data can be written in two ways
(1) 3. Object type
(2) 1. Functional formula
How to choose: you can write either way at present. When learning components in the future, the data must use a functional formula, otherwise an error will be reported
3. An important principle:
For functions managed by vue, do not write arrow functions. Once arrow functions are written, this is no longer an instance of vue
<!--Define a container-->
<body>
<div id="root">
<h1>Hello,{{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false //Prevent vue from generating production prompts at startup
//Two ways of writing el
/*const v = new Vue({
//el:'#root', //The first way to write
data:{
name:'Zhang San '
}
})
console.log(v);
v.$mount('#root')*/ //The second way to write
//Two ways of writing data
new Vue({
el:'#root',
/*data:{
name:'Zhang San '/ / the first way to write
}*/
data(){
return{
name:'Zhang San'
}
}
})
</script>
5, MVVM model
MVVM model
Code in M Model data
V View template code
VM ViewModel Vue instance
Observations:
(1) All the attributes in data finally appear on the VM
(2) All attributes of VM and vue prototype can be directly used in vue template
<!--Define a container-->
<body>
<div id="root">
<h1>School Name:{{name}}</h1>
<h1>School address:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //Prevent vue from generating production prompts at startup
const vm = new Vue({
el:'#root',
data:{
name:'Zhang San',
address:'China'
}
})
console.log(vm)
</script>
6, Data proxy
1. Review Object.definedProperty
<script type="text/javascript">
let number = 18
let person = {
name:'Zhang San',
sex:'female'
}
Object.defineProperty(person,'age',{
//value:18,
//enumerable:true, / / controls whether attributes can be enumerated. The default value is false
//writable:true, / / controls whether the attribute can be modified. The default value is false
//configurable:true / / controls whether the attribute can be deleted. The default value is false
//When someone reads the age attribute of person, the get function (getter) will be called, and the return value is the value of age
get:function(){
return number
}
//When someone modifies the age attribute of person, the set function (setter) will be called and the modified specific value will be received
set(value){
number = value
}
})
/*console.log(Object.keys(person))*/
console.log(person);
</script>
2. What is a data broker
<!--Data broker: an operation (read) on an attribute in another object through an object broker/(write)-->
<script>
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
}
set(value){
obj.x = value
}
})
</script>
3. Data broker in vue
1. Data proxy in vue: the VM object is used to proxy the operation (read / write) of attributes in the data object
2. Benefits of data broker in vue: more convenient operation of data in data
3. Basic principle:
(1) Add all properties in the data object to the VM through Object.definedProperty()
(2) Specify a getter/setter for each property added to the VM
(3) Operate (read / write) the corresponding properties in data inside getter/setter
<!--Create a container-->
<div id="root">
<h2>School Name:{{name}}</h2>
<h2>School address:{{address}}</h2>
</div>
</body>
<script>
Vue.config.productionTip = false //Prevent prompt when vue starts
/*let data = { //Verify VM_ data = options.data = data
name:'Zhang San ',
address:''Beijing'
}*/
const vm = new Vue({
el:'#root',
data:{
name:'Zhang San',
address:'Beijing'
}
})
</script>
7, Event handling
1. Basic use of events
Basic use of events:
(1) Bind the event using v-on:xxx or @ xxx, where xxx is the event name
(2) The callback of the event needs to be configured in the methods object and will eventually be on the VM
(3) The functions configured in methods, do not use arrow functions! Otherwise, this is not a VM
(4) The functions configured in methods are all functions managed by vue, and this points to VM or component instance objects
(5) @ click = "demo" and @ click = "demo($event)" have the same effect, but the latter can be passed as parameters
<!--Define a container-->
<body>
<div id="root">
<h2>Welcome to{{name}}study</h2>
<!--<button v-on:click="showInfo">Click my prompt</button>-->
<button @click="showInfo1">Click my prompt 1</button>
<button @click="showInfo2(66,$event)">Click my prompt 2</button>
</div>
</body>
<script>
Vue.config.productionTip = false //Prompt message generated when preventing vue startup
const vm = new Vue({
el:'#root',
data:{
name:'Zhang San'
},
methods:{
showInfo1(event){
alert("Hello, classmate 1")
//console.log(this) / / this here is vm
},
showInfo2(number,event){
console.log(number)
}
}
})
</script>
2. Event modifier
Event modifiers in vue:
(1) prevent: block default events (common)
(2) stop: prevent event bubbling (common)
(3) Once: the event is triggered only once (common)
(4) Capture: capture mode using events
(5) self: the event is triggered only when event.target 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
<style type="text/css">
.demo1 {
height: 50px;
background-color: skyblue;
}
* {
margin-top: 10px;
}
.box1 {
padding: 10px;
background-color: skyblue;
}
.box2 {
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: pink;
overflow: auto;
}
li {
height: 100px;
}
</style>
<body>
<!--Create a container-->
<div id="root">
<h2>Welcome to{{name}}To learn</h2>
<!--Block default events-->
<a href="http://Www.baidu.com "@ click. Prevent =" showinfo "> click my tips</a>
<!--Prevent event bubbling-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">Click my prompt</button>
</div>
<!--Modifiers can be written continuously-->
<!--Block default events before bubbling. Can be reversed, the effect is the same-->
<a href="http://Www.baidu. Com "@ click. Stop. Prevent =" showinfo "> click on my tips</a>
<!--The event is triggered only once-->
<button @click.once="showInfo">Click my prompt</button>
<!--Capture mode using events-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!--self: only event.target Is the element of the current operation-->
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">Click my prompt</button>
</div>
<!--passive: The default behavior of the event is executed immediately without waiting for the event callback to complete-->
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley'
},
methods:{
showInfo(e){
alert("I'm sure")
/*console.log(e.target)*/
},
showMsg(msg){
console.log(msg)
},
demo(){
for(let i=0;i<100000;i++){
console.log('#')
}
console.log("I'm tired")
}
}
})
</script>
3. Keyboard events
(1) Key aliases commonly used in vue:
enter
Delete delete
Exit esc
space
Linefeed tab (special, must cooperate with keydown)
up
down
left
right
(2) vue keys that do not provide aliases can be bound with the original key value of the key, but note that they should be changed to kebab case (named by a short horizontal line)
(3) System modifier key (special usage): ctrl alt shift meta
----Use with keyup: press the modifier key while pressing other keys, and then release other keys before the event is triggered
----Used with keydown: normal trigger event
(4) You can also use keyCode to specify the specific key (not recommended) keydown.13
(5) Vue.config.keyCode user defined key name = key code. You can customize key alias
<body>
<!--Create a container-->
<div id="root">
<h2>Welcome to{{name}}To learn</h2>
<input type="text" placeholder="Press enter to prompt for input" @keyup="showInfo">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
Vue.config.keyCodes.huiche = 13 //An alias key is defined
new Vue({
el:'#root',
data:{
name:'Shang Silicon Valley'
},
methods:{
showInfo(e){
console.log(e.key,e.keyCode)
/*console.log(e.target.value)*/
}
}
})
</script>
8, Calculation properties
1. Implementation of name case interpolation syntax
<body>
<!--Create a container-->
<div id="root">
Last name:<input type="text" v-model='firstName'/><br /><br />
Name:<input type="text" v-model='lastName'/><br /><br />
Full name:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'Zhang',
lastName:'three'
}
})
</script>
2. Name case _methods implementation
<body>
<!--Create a container-->
<div id="root">
Last name:<input type="text" v-model='firstName'/><br /><br />
Name:<input type="text" v-model='lastName'/><br /><br />
Full name:<span>{{fullName()}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'Zhang',
lastName:'three'
},
methods:{
fullName(){
return this.firstName+"-"+this.lastName
}
}
})
</script>
3. Name case calculation attribute implementation
Calculation properties:
(1) Definition: the attribute to be used does not exist and must be calculated from the existing attribute
(2) Principle: the bottom layer uses getter s and setter s provided by the Object.definepeoperty method
When does the get function execute?
(1) It will be executed once for the first reading
(2) It will be called again when the dependent data changes
Advantages: compared with the methods implementation, there is an internal caching mechanism (reuse), which is more efficient and convenient for debugging
remarks:
(1) The calculated attributes will eventually appear on the vm and can be read and used directly
(2) If the calculation attribute is to be modified, the set function must be written to affect the modification, and the data in the set will change
<!--Create a container-->
<div id="root">
Last name:<input type="text" v-model='firstName'/><br /><br />
Name:<input type="text" v-model='lastName'/><br /><br />
Full name:<span>{{fullName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'Zhang',
lastName:'three'
},
computed:{
fullName:{
//Get function: when someone reads fullName, get will be called, and the return value will be used as the value of fullName
//When is get called?
//1. When reading fullName for the first time
//2. When the dependent data changes
get(){
return this.firstName+"-"+this.lastName
},
//When is set called? When fullName is modified
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
4. Name case calculation attribute abbreviation
<!--Create a container-->
<div id="root">
Last name:<input type="text" v-model='firstName'/><br /><br />
Name:<input type="text" v-model='lastName'/><br /><br />
Full name:<span>{{fullName}}</span>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'Zhang',
lastName:'three'
},
computed:{
//Complete writing
/*fullName:{
get(){
return this.firstName+"-"+this.lastName
},
//set When to call? When fullName is modified
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}*/
//Abbreviation: read only without modification
fullName(){//Equivalent to getter function
eturn this.firstName+"-"+this.lastName
}
}
})
</script>