Installation and use of VSCode
ECMASript 6
introduce
- ECMAScript 6.0 (ES6 for short) is the next generation standard of JavaScript language, which was officially released in June 2015. Its goal is to make JavaScript language can be used to write complex large-scale applications and become an enterprise development language.
- The relationship between ECMAScript and JavaScript is that the former is the specification of the latter and the latter is an implementation of the former (other ECMAScript dialects include Jscript and ActionScript)
Arrow function
Provides a more concise way to write functions
Parameter = > function body
Arrow functions are often used to define anonymous functions
//Defining functions in a traditional way
var f1 = function(a) {
return a
}
//console.log(f1(3))
//es6 uses arrow function definitions
//Parameter = > function body
var f2 = a => a
//console.log(f2(4))
// When the arrow function has no parameters or has multiple parameters, it should be enclosed with ().
// When the arrow function body has multiple lines of statements, it is wrapped with {} to represent the code block,
// When there is only one line of statement and the result needs to be returned, {} can be omitted and the result will be returned automatically.
var f3 = function(m,n) {
return m+n
}
//es6
var f4 = (m,n) => m+n
console.log(f4(4,5))
Getting started with vue
introduce
- Vue.js is a popular JavaScript front-end framework designed to simplify Web development. Vue focuses on the view layer in MVC mode. At the same time, it can easily obtain data updates and realize the interaction between view and model.
<body>
<script src="vue.min.js"></script>
<div id="app">
<!-- Interpolation expression-->
{{message}}
</div>
<script>
new Vue({
el:'#app',
data: {
message:'hello vue'
}
})
</script>
</body>
- This is declarative rendering: the core of Vue.js is a system that allows to declaratively render data into DOM using concise template syntax. The core idea here is that there are no cumbersome DOM operations. For example, in jQuery, we need to find div nodes, obtain DOM objects, and then perform a series of node operations
Basic grammar
- Basic data rendering and instructions
<script>
new Vue({
el: '#app',
data: {
msg:'color:green;'
}
})
</script>
The v-bind feature you see is called an instruction. Instruction with prefix V-
In addition to using the interpolation expression {}} for data rendering, you can also use the v-bind instruction, which is abbreviated as colon (:)
<div v-bind:style="msg">Unidirectional binding</div> <div :style="msg">Unidirectional binding</div>
- Bidirectional data binding
- What is bidirectional data binding?
When the data changes, the view will also change
When the data model changes, it will be displayed directly on the page
When the view changes, the data changes synchronously
The user's modifications on the page will be automatically synchronized to the data model
- What is bidirectional data binding?
<div id="app">
{{keyword}}
<br/>
<input type="text" :value="keyword"/>
<br/>
<input type="text" v-model="keyword"/>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
keyword:'Shang Silicon Valley'
}
})
</script>
- Event binding
<div id="app">
<button v-on:click="show()">Event binding 1</button>
<button @click="show()">Event binding 2</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
methods: {
show() {
console.log("show.....")
}
}
})
</script>
- conditional rendering
<div id="app">
<input type="checkbox" v-model="ok"/>
<br/>
<div v-if="ok">Checked</div>
<div v-else>Not selected</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
- List rendering
<div id="app">
<div v-for="user in userList"> {{user.name}} -- {{user.age}} </div>
<div v-for="(user,index) in userList">
{{index}} -- {{user.name}} -- {{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[ {"name":"lucy","age":20},{"name":"mary","age":30}]
}
})
</script>
axios
- axios is a project independent of vue and can be used to send ajax requests in browsers and node.js
<div id="app">
<table>
<tr v-for="user in userList">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList:[]
},
created() { //Execute before page rendering
//Call the method to get the returned json data
this.getList()
},
methods:{
getList() {
//ajax requests using axios
axios.get("user.json")
.then(response => {//Request succeeded
//console.log(response)
this.userList = response.data.data.items
console.log(this.userList)
})
.catch(error => {
console.log(error)
}) //request was aborted
}
}
})
</script>
element-ui
- Element UI is a Vue.js based background component library produced by the front-end, which is convenient for programmers to quickly layout and build pages
Node.js
JavaScript engine
- The browser kernel consists of two cores:
DOM rendering engine
JavaScript parsing engine - introduce
Node.js is a JavaScript running environment based on Chrome V8 engine: node.js has built-in Chrome V8 engine, which can directly run JavaScript programs in node.js environment.