Web front end advanced technology (Vue.js) notes
Chapter I Vue.js overview
1, Three frameworks of Web front-end advanced technology
1,Angular
Bidirectional data binding Angular is an excellent front-end JS framework, which has been used in many Google products
Angular property:
- Good application structure
- Bidirectional data binding
- instructions
- HTML template
- Can be embedded, injected and tested
- Good compatibility
Angular advantages:
- Rich angular instructions
- Perfect front-end framework
- Custom instruction
- ng modularity introduces Java
- Google development
Angular disadvantages:
- In depth, there are many concepts
- Documentation examples are very few
- Poor compatibility
- Few practical tutorials
2,React
React properties:
- Declarative design: declarative paradigm
- Efficient: Simulation of DOM
- Flexibility: known libraries or frameworks work well together
React advantages:
- Fast speed
- Cross browser compatibility
- modularization
- Unidirectional data flow
- Isomorphic, pure Javascript
- Good compatibility
React disadvantages:
- React itself is just a V, not a complete framework.
- Only ReactRouter and Flux can write large applications.
3,Vue
Vue is a library for building data-driven Web interfaces written by you Yuxi. It is not exactly a framework. It focuses on the V (view) view layer.
Vue properties:
- Lightweight framework
- Bidirectional data binding
- instructions
- Plug in
Vue benefits:
- Easy to learn
- Fast – update DOM in asynchronous batch mode
- combination
- compact
- powerful
- Module friendly
Vue disadvantages:
- newborn
- The impact is not great
- IE8 is not supported
2, Install Vue.js and WebStorm
slightly
3, Create Vue instance
1. Create the first Vue instance, write code in the WebStorm tool, and output "I like Vue.js" in the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="Js/vue.js"></script>
<title>first Vue example</title>
</head>
<body>
<div id="example">
<h1>{{message}}</h1>
</div>
<script type="text/javascript">
var demo01 = new Vue({
el:'#example',
data:{
message:'I like Vue.js'
}
});
</script>
</body>
</html>
Basic steps for using Vue
- Labels are required to populate the data
- Import vue.js file
- You can use the syntax of vue to do the function
- Fill the tag with the data provided by vue
2. Create a Vue instance, create an input box, and output the contents of the input box in the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Third Vue example</title>
<script type="text/javascript" src="JS/vue.js"></script>
</head>
<body>
<div id="example">
<input type="text" v-model="message" placeholder="Your Name">
<h1>Hello,{{message}}</h1>
</div>
<script type="text/javascript">
var demo = new Vue({
el:'#example',
data:{
message:''
}
});
</script>
</body>
</html>
Chapter II Basic Characteristics
1, Vue instances and options
//Syntax format
var vm = new Vue ({
//option
})
1. Mount elements (3 ways)
<div id = "box" class = "box">
</div>
//Mode 1
var vm = new
Vue({
el: '#box'
})
//Mode 2
var vm = new
Vue({
el: '.box'
})
//Mode 3
var vm = new
Vue({
el: 'div'
})
2. Data
data options
<div id = "box">
<h3>Website name:{{name}}</h3>
<h3>Website address:{{url}}</h3>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#box',
data: {
name: 'Changshu Institute of Technology', //Website name
url: 'http://www.cslg.cn '/ / website address
}
});
</script>
A Vue instance passes in an object, and the Vue instance will proxy all the properties of the object
<div id = "app">
</div>
<script type = "text/javascript">
var data = {name: 'Changshu Institute of Technology', url: 'http://www.cslg.cn'}
var vm = new Vue({
el: '#app',
data: data
});
vm.url = 'http://http://www.cslg.cn';
document.write(data.url);
data.url = 'http://www.mrbccd.com';
document.write('<br>' + vm.url);
</script>
Unable to determine some attribute values, set some initial values
<div id = "box">
<h3>Website name:{{name}}</h3>
<h3>Website address:{{url}}</h3>
</div>
<script type = "text/javascript">
var data = {name: 'Changshu Institute of Technology', url: 'http://www.cslg.cn'}
var vm = new Vue({
el: '#app',
data: data
});
document.write(vm.$data === data);
</script>
3. Method
methods options: interpolation and event invocation
<div id = "box">
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#box',
data: {
name: 'Changshu Institute of Technology', //Website name
url: 'http://www.cslg.cn '/ / website address
}
methods:{
showInfo: function(){
return this.name + ':' + this.url;
}
}
});
</script>
4. Lifecycle hook function
- beforeCreate: called when the Vue instance begins to initialize.
- Created: called after the instance is created, and DOM compilation has not yet started.
- mounted: called after the DOM document is rendered. It is equivalent to the window.onload() method in JavaScript.
- beforeDestroy: call before destroying the instance, and the instance is still valid at this time.
- Destroyed: called after the instance is destroyed.
<!DOCTYPE html>
<html>
<head>
<title>Hook function</title>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="button" @click="change" value="Update data" />
<input type="button" @click="destroy" value="Destroy" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message : "Welcome Vue"
},
methods:{
change() {
this.message = 'Datura is me';
},
destroy() {
vm.$destroy();
}
},
beforeCreate: function () {
console.group('beforeCreate Pre creation status===============>');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message);//undefined
},
created: function () {
console.group('created Create complete status===============>');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:green","data : " + this.$data); //[object] = > initialized
console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue = > initialized
},
beforeMount: function () {
console.group('beforeMount Pre mount status===============>');
console.log("%c%s", "color:green","el : " + (this.$el)); //Has been initialized
console.log(this.$el); // Currently hanging element
console.log("%c%s", "color:green","data : " + this.$data); //Has been initialized
console.log("%c%s", "color:green","message: " + this.message); //Has been initialized
},
mounted: function () {
console.group('mounted Mount end status===============>');
console.log("%c%s", "color:green","el : " + this.$el); //Has been initialized
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data); //Has been initialized
console.log("%c%s", "color:green","message: " + this.message); //Has been initialized
},
beforeUpdate: function () {
alert("Status before update");
console.group('beforeUpdate Status before update===============>'); //This refers to the page before rendering new data
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
alert("Status before update 2");
},
updated: function () {
console.group('updated Update completion status===============>');
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy Status before destruction===============>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed Destroy complete status===============>');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</body>
</html>
2, Data binding
1. Interpolation
Text interpolation
Use double brace label {}
example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text interpolation</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
<h3>Hello {{name}}</h3>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
name : 'Vue.js'//Define data
}
});
</script>
</body>
</html>
Insert HTML
Output HTML content ----- > use v-html instruction, for example: v-html = "message"“
example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>insert HTML</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
<p v-html="message"></p>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
message : '<h1>Science and technology is the primary productive force</h1>'//Define data
}
});
</script>
</body>
</html>
HTML element binding attributes
Bind attributes for HTML elements ----- > use the v-bind instruction, for example: < img v-bind: SRC = "imagesrc" >
example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Binding properties</title>
<style type="text/css">
.title{
color:#FF0000;
border:1px solid #FF00FF;
display:inline-block;
padding:5px;
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
<span v-bind:class="value">Dream into reality</span>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
value : 'title'//Defines the property value of the binding
}
});
</script>
</body>
</html>
attribute
Use the shorthand form of the v-bind instruction to bind attributes to pictures.
For example, < a v-bind: href = "URL" > Changshu Institute of technology < / a > can be rewritten as < A: href = "URL" > Changshu Institute of technology</a>
example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>v-bind Short form of instruction</title>
<style type="text/css">
.myImg{
width:300px;
border:1px solid #000000;
}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
<img :src="src" :class="value" :title="tip">
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
src : 'images/js.png',//Picture URL
value : 'myImg',//Picture CSS class name
tip : 'Zero Basics JavaScript'//Picture prompt text
}
});
</script>
</body>
</html>
expression
Each data binding can contain only a single expression, not JavaScript statements
example:
<div id = "box"
{{number + 10}} <br>
{{boo ? 'really' : 'false'}} <br>
{{str.toLowerCase()}}
</div>
<script type="text/javascript">
var demo = new Vue({
el: '#box',
data: {
number: 10,
boo: true,
str: 'MJH My Love'
}
});
</script>
Comprehensive exercise: according to the qq email address, use the expression to obtain the qq number
example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Get the QQ In email address QQ number</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
e-mail address:{{email}}<br>
QQ Number:{{email.substr(0,email.indexOf('@'))}}
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
email : '4006751066@qq.com'//Define email address
}
});
</script>
</body>
</html>
2. Filter
Filters: data binding for complex calculations.
In double braces: {{message | myfilter}}
In the v-bind instruction: < div v-bind: id = "rawld | formatid" > < / div >
Two ways
Apply the Vue.filter() method to define the global filter
Syntax format: Vue.filter(ID,function() {})
Example: use the Vue.filter() method to define a filter, obtain the current date and week, and output it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gets the current date and week</title>
<style>
span{
font-size:16px;font-family:Microsoft YaHei ;color:#FF9900}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
<span>{{date | nowdate}}</span>
</div>
<script type="text/javascript">
Vue.filter('nowdate',function(value){
var year=value.getFullYear(); //Get current year
var month=value.getMonth()+1; //Get current month
var date=value.getDate(); //Get current date
var day=value.getDay(); //Get current week
var week=""; //initialize variable
switch(day){
case 1: //If the value of the variable day is 1
week="Monday"; //Assign values to variables
break; //Exit switch statement
case 2: //If the value of the variable day is 2
week="Tuesday"; //Assign values to variables
break; //Exit switch statement
case 3: //If the value of the variable day is 3
week="Wednesday"; //Assign values to variables
break; //Exit switch statement
case 4: //If the value of the variable day is 4
week="Thursday"; //Assign values to variables
break; //Exit switch statement
case 5: //If the value of the variable day is 5
week="Friday"; //Assign values to variables
break; //Exit switch statement
case 6: //If the value of the variable day is 6
week="Saturday"; //Assign values to variables
break; //Exit switch statement
default: //Default value
week="Sunday"; //Assign values to variables
break; //Exit switch statement
}
return "Today is:"+year+"year"+month+"month"+date+"day "+week;
});
var demo = new Vue({
el : '#box',
data : {
date : new Date()
}
});
</script>
</body>
</html>
Apply the filters option to define local filters
Composition of local filter: name of filter and filter function
Example: use the filters option to define local filters, intercept and output the headlines of the mall.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Intercept the headlines of the mall</title>
<style>
a {
text-decoration: none;
color:#000000;
font-size:14px;
font-family:"Microsoft YaHei "
}
ul,li{
list-style:none;}
li{
height: 30px;
line-height: 30px;
font-size: 12px;
overflow: hidden;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li><a href="#"> < span > [Special] < / span > {title1 | substr}}</a></li>
<li><a href="#"> < span > [announcement] < / span > {title2 | substr}}</a></li>
<li><a href="#"> < span > [Special] < / span > {title3 | substr}}</a></li>
<li><a href="#"> < span > [announcement] < / span > {title4 | substr}}</a></li>
<li><a href="#"> < span > [Special] < / span > {title5 | substr}}</a></li>
</ul>
</div>
<script type="text/javascript">
var demo = new Vue({
el : '#box',
data : {
title1 : 'Mall explosion 1 second kill',
title2 : 'The mall signed a strategic cooperation agreement with Changchun',
title3 : 'Yanghe promoted at the end of the year, as low as 50% off two pieces',
title4 : 'Delivery delays in North and central China',
title5 : 'Home appliance Carnival 100 billion gift certificates buy 1 get 1 free!'
},
filters : {
subStr : function(value){
if(value.length > 10){ //If the string length is greater than 10
return value.substr(0,10)+"..."; //Returns the first 10 characters of a string, and then outputs an ellipsis
}else{ //If the string length is not greater than 10
return value; //Returns the string directly
}
}
}
});
</script>
</body>
</html>
Multiple filters are used in series
See textbooks P24~P26
3. Instruction
Instruction: a special attribute with a v-prefix.
parameter
The argument is between the instruction and the expression
Example:
The v-if instruction determines whether to insert a p element based on the value of the expression show.
<p v-if = "show"> mingrisoft</p>
Bind the src attribute of the img element to the imageSrc value of the expression
<img v-bind: src = "imageSrc">
The login() method is called when the click event of the login button is triggered
<button v-on: click = "login"> Sign in </button>
Modifier
When the form is submitted, the event.preventDefault() method is called to block the default behavior of the browser
<form v-on: submit.prevent = "onSubmit"></form>