1, Initial 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;
Note: distinguish between js expression and js code (statement)
- Expression: an expression will produce a value, which can be placed wherever a value is required:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b' - js code (statement)
(1). if(){}
(2). for(){}
Part code:
<body>
<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
<script src="vue.js"></script>
<script type="text/javascript" >
Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.
//Create Vue instance
new Vue({
el:'#demo', //el is used to specify which container the current Vue instance serves. The value is usually css selector string.
data:{ //Data is used to store data. The data is used by the container specified by el. For the time being, we write the value as an object.
name:'atguigu',
address:'Beijing'
}
})
</script>
</body>
Operation results:
2, Vue template syntax
Vue template syntax has two main categories:
1. Interpolation syntax:
Function: used to parse the label body content.
Writing method: {xxx}}, xxx is a js expression, and all attributes in data can be read directly.
2. Instruction syntax:
Function: used to parse tags (including tag attributes, tag body contents, binding events...).
For example: v-bind:href = "xxx" or abbreviated as: href = "xxx", xxx also needs to write js expressions, and can directly read all attributes in data.
Note: there are many instructions in Vue in the form of: V -???, Here we just take v-bind as an example.
Part code:
<body>
<div id="root">
<h1>Interpolation syntax</h1>
<h3>Hello,{{name}}</h3>
<hr/>
<h1>Instruction syntax</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">I'll go{{school.name}}Learning 1</a>
<a :href="school.url" x="hello">I'll go{{school.name}}Learning 2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //Prevent vue from generating production prompts at startup.
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'Library',
url:'http://www.baidu.com',
}
}
})
</script>
Operation results:
3, Vue data binding
Vue There are two data binding methods in:
- V-bind: data can only flow from data to page.
- Two way binding (v-model): data can flow not only from data to page, but also from page to data.
remarks:
Bidirectional binding is generally applied to form elements (such as input, select, etc.)
v-model:value can be abbreviated as v-model, because v-model collects value by default.
<body>
<div id="app">
<!-- Single data binding:<input type="text" v-bind:value="name" />
<br>
Two item data binding:<input type="text" v-model:value="name" /> -->
Single data binding:<input type="text" :value="name" />
<br>
Two item data binding:<input type="text" v-model="name" />
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
name:"Shang Silicon Valley",
}
})
</script>
</body>
Operation results:
4, Two ways of writing data and el
1. There are two ways to write el
(1). Configure the el attribute when new Vue.
(2). Create a Vue instance first, and then through VM$ Mount ('#root') specifies the value of el.
2. There are two ways to write data
(2). Functional formula
How to choose: you can write either way at present. When learning components in the future, data must use functional formula, otherwise an error will be reported.
3. An important principle:
For functions managed by Vue, you must not write arrow functions. Once you write arrow functions, this is no longer an instance of Vue.
Part code:
<body>
<div id="root">
<p>Hello,{{name}}</p>
</div>
<script src="vue.js"></script>
<script>
// Two ways of writing el
// const v=new Vue({
// //el:"#root", / / first type
// data:{
// name: "Fanghua"
// }
// });
// console.log(v);
// v.$mount('#root');// Second
// Two ways of writing data
new Vue({
el:'#root',
// data:{
// name: 'Fanghua'
//}
data(){
console.log('@@@',this)//this here is the Vue instance object
return{
name:'youth'
}
}
})
</script>
</body>
5, Object defineProperty
Used to add or define attributes to an object;
Parameters:
The first parameter: the object to which the attribute is added;
Second parameter: added attribute name;
The third parameter: configuration attribute;
Part code:
<body>
<script src="../vue.js"></script>
<script>
var number=18;
// Add properties here, and you can traverse, modify, or delete them at will
var person={
naem:'Zhang San',
sex:'male',
// age:18,
}
// This method does not allow enumeration (traversal), modification or deletion. You need to set the property to enable it
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 is 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(){
console.log("Someone read age Attribute!")
return number
},
//When someone modifies the age attribute of person, the set function (setter) will be called and the specific value of the modification will be received
set(value){
console.log("Someone modified it age Property and the value is",value)
return number=value
}
})
console.log(this.person);
for(var key in person){
console.log('@',person[key]);
}
// The keys method passes in an object, and the traversal object is an array
console.log(Object.keys(person));
</script>
</body>
Operation results:
Before enumerable setting:
After enumerable is set:
Before setting writable:
After writable is set:
Before setting configurable:
After setting configurable:
Set get and set:
6, Event handling
(1) Basic use of events:
1. Use v-on:xxx or @ xxx to bind events, where xxx is the event name;
2. The event callback needs to be configured in the methods object and will eventually be on the vm;
3. For 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. The effects of @ click = "demo" and @ click = "demo" ($event) "are the same, but the latter can be passed to parameters;
Part code:
<body>
<div id="root">
<h2>{{mes}}</h2>
<button v-on:click="show1">Click I display message 1</button>
<br>
<button @click="show2($event,'Ha ha ha')">Click I display message 2</button>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#root',
data:{
mes:"Hi vue!",
},
methods:{
show1(){
alert("Nice to meet you!")
},
show2(event,str){
alert(str)
}
}
})
</script>
</body>
Operation results:
Click 1:
Click 2:
(2) Event modifiers in Vue
1.prevent: block default events (common);
2.stop: stop event bubbling (common);
3.once: the event is triggered only once (common);
4.capture: use the capture mode of events;
5.self: only event The event is triggered only when 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
Part code:
<body>
<div id="root">
<h2>{{mes}}</h2>
<!-- Block default events (common) -->
<a href="1.vueGrammar.html" @click.prevent="show">click</a>
<br/><br/>
<!-- Prevent event bubbling (common) -->
<div style="height: 30px; padding: 5px; background-color: #7FFFD4;" @click="show">
<button @click.stop="show">click</button>
</div>
<br/>
<!-- Event is triggered only once (common) -->
<button @click.once="show">click</button>
<br>
<br>
<!-- Capture mode using events -->
<div style="height:60px; background-color: #7FFFD4;"@click.capture="show1(1)">div1
<div style="height:30px; background-color: #FF7F50;" @click="show1(2)">div2</div>
</div>
<br>
<br>
<!-- only event.target The event is triggered only when it is the element of the current operation; -->
<div style="height:30px; background-color: #7FFFD4;" @click.self="show">
<button @click="show">Click my prompt</button>
</div>
</div>
<script src="../vue.js"></script>
<script>
var vm=new Vue({
el:'#root',
data:{
mes:"Hi vue!",
},
methods:{
show(){
alert("Hi vue!");
},
show1(number){
alert(number);
}
}
})
</script>
</body>
Operation results:
(3) Keyboard events
1. Key aliases commonly used in Vue:
Enter = > Enter
Delete = > delete (capture "delete" and "backspace" keys)
Exit = > ESC
Space = > space
Line feed = > tab (special, must be used with keydown)
Up = > up
Down = > down
Left = > left
Right = > right
2. For keys that Vue does not provide aliases, you can use the original key value of the key to bind, but pay attention to change it to kebab case (named by dashes)
3. System modifier keys (special usage): ctrl, alt, shift, meta
(1). Use with keyup: press the modifier key and then press other keys, and then release other keys to trigger the event.
(2). Use with keydown: normally trigger events.
4. You can also use keyCode to specify specific keys (not recommended)
5.Vue.config.keyCodes. User defined key name = key code. You can customize key alias
Part code:
<body>
<div id="root">
<h2>Hi,Vue!</h2>
<input type="text" placeholder="Press enter to prompt input" @keyup.enter="showInfo"></input>
</div>
<script src="../vue.js"></script>
<script>
var vm=new Vue({
el:'#root',
data:{
},
methods:{
showInfo(e){
alert(e.target.value);
},
},
})
</script>
</body>
Operation results:
7, Calculation properties:
1. Definition: the attribute to be used does not exist, but must be calculated from the existing attribute.
2. Principle: the bottom layer uses objcet Getters and setter s provided by the defineproperty method.
3. When does the get function execute?
(1). It is executed once on the first reading.
(2). When the dependent data changes, it will be called again.
4. Advantages: compared with the implementation of methods, there is an internal caching mechanism (reuse), which is more efficient and convenient for debugging.
5. Remarks:
1. The calculation attribute 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 respond to the modification, and the data that the calculation depends on in the set will be changed.
Part code:
<body>
<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><br />
</div>
</body>
<script src="../vue.js"></script>
<script>
var vm=new Vue({
el:'#root',
data:{
firstName:'Zhang',
lastName:'three',
x:'Hello',
},
computed:{
fullName:{
get(){
return this.firstName+'-'+this.lastName;
},
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
}
})
</script>
Operation results:
