Self-cultivation of Full-time Engineers Part I of vue
1. Environmental Construction
It is mainly to build nodejs environment, set up Taobao source and install cnpm. As mentioned in previous articles, it will not be repeated.
Next, install the vue scaffolding globally:
cnpm install vue-cli -g
Then we can install it successfully, and after the installation, we can eat it as much as we like.
Online acceleration of cdn can also be used:
<! - The development environment version contains helpful command line warnings - > <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. Initialize a project
We have vue2.x installed here, so use a command
vue init webpack
It's better not to use es lint6, so all the first four will return and fill in no at the back.
In this way, the cd is put into the directory and used
cnpm run dev
Open localhost:8080 to see our first vue hello,world project.
3. From crawling to drag racing
3.1 Declarative Rendering
The core of Vue.js is a system that allows for declarative rendering of data into DOM using concise template syntax:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Output: hello,vue
3.2 Data Binding v-bind
<div:title="title">mouse binding event </div>
data() {
return {
msg: "Hello vue",
title: "This is a title!",
message: '',
todos: [{ text: 'Study JavaScript' },{ text: 'Study Vue' }, { text: 'The whole cattle project' }],
formData: 'username',
}
},
When the mouse is placed on it, it will show: This is a title! This is v-bind, abbreviated as:
3.3 Event Binding v-on
<div id="app-1">
<p>{{msg}}</p>
<button v-on:click="reverseMessage">Reverse message</button>
</div>
//Inside Method
reverseMessage(){
this.msg = this.msg.split('').reverse().join('');
},
Clicking on the reverse Message button will show: Ev Hello, this is v-on, abbreviated as@
3.4 Data Binding v-model
<div id="app-6">
<p>message : {{message}}</p>
<input type="text" v-model="message" name="message" id="message">
</div>
Data Synchronization Update
3.5v-for
<div>
<ul>
<li v-for="item in todos">
{{item.text}}
</li>
</ul>
</div>
Display todos content
3.6 v-if
<p v-if="see">Now you see me</p>
Here, the v-if instruction inserts/removes < p > elements based on the truth or falsity of the value of the expression seed.
3.7 Other modifiers
v-html
v-on Modifier
.stop - call event.stopPropagation().
.prevent - call event.preventDefault().
.capture - Use when adding event listeners capture Pattern.
.self - Callbacks are triggered only when the event is triggered from the element itself bound by the listener.
.{keyCode | keyAlias} - Callbacks are triggered only when the event is triggered from a particular key.
.native - Listen for native events of component root elements.
.once - Only one callback is triggered.
.left - (2.2.0) Triggered only when the left mouse button is clicked.
.right - (2.2.0) Triggered only when the right mouse button is clicked.
.middle - (2.2.0) Triggered only when the middle mouse button is clicked.
.passive - (2.3.0) with { passive: true } Mode add listener
3.8 ref dom operation
<div id="app-5">
<input type="text" ref="userInfo">
<div id="box" ref="box">I am a box</div>
<button @click="getInputValue()">Obtain input value</button>
</div>
//In methods
// ref operation dom node
getInputValue(){
alert(this.$refs.userInfo.value);
this.$refs.box.style.background= 'red';
}
ref specifies the object, and in the method obtains the object value through this.$refs. object.
3.9 Method Value Transfer
<div id="app-7">
<button @click="requestData()">Request data</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
//data
list: []
//methods
requestData(){
for(var i=0;i<10;i++){
this.list.push(i);
}
}
Click on the button to display a list of 0-9
3.10 Summary - todolist
Step 1===== Requirements: Addition and deletion of todolist
<template> <div> //form <input type="text" v-model="todolist" placeholder="Please input todo list" class="inputText"> <button @click="pushData()" class="btn">+</button> //Print to'do'list <ul> <li v-for="(item,key) in list"> {{item}} ----- <button @click="del(key)">delete</button> </li> </ul> </div> </template> <script> export default { name: 'helloworld', data() { return { todolist: '', list: [] } }, methods: { //Adding element operations pushData(){ this.list.push(this.todolist); this.todolist = '' }, //Deleting element operation splice is the method of js array operation. This means deleting the first one from key, that is, the value represented by key. If splice(1,3,'wiinfud') means deleting three from the first one and adding a'wiidfd'. del(key){ this.list.splice(key,1) } }, } </script> //style <style> .inputText{ border-radius: 20px; border: solid 1px gray; padding: 20px 10px; display: inline; } .btn{ background: skyblue; border: 2px red solid; padding: 20px 10px; display: inline; } </style>
Part 2===== Requirements: Click to change status
<template> <div> <input type="text" v-model="todolist" placeholder="Please input todo list" class="inputText"> <button @click="pushData()" class="btn">+</button> <h2>Have in hand</h2> <ul> <li v-for="(item,key) in list" v-if="!item.checked"> <input type="checkbox" name="" id="" v-model="item.checked">{{item.title}} ----- <button @click="del(key)">delete</button> </li> </ul> <br> <hr> <h2>Completed</h2> <ul> <li v-for="(item,key) in list" v-if="item.checked"> <input type="checkbox" name="" id="" v-model="item.checked">{{item.title}} ----- <button @click="del(key)">delete</button> </li> </ul> </div> </template> <script> export default { name: 'helloworld', data() { return { todolist: '', checked: false, list: [ { title: 'vue', checked: true }, { title: 'nodejs', checked: false } ] } }, methods: { pushData(){ this.list.push({ title: this.todolist, checked: this.checked }); this.todolist = '' }, del(key){ this.list.splice(key,1) } }, } </script> <style> .inputText{ border-radius: 20px; border: solid 1px gray; padding: 20px 10px; display: inline; } .btn{ background: skyblue; border: 2px red solid; padding: 20px 10px; display: inline; } </style>
3.11 todolist upgrade
Requirement: Save status, use enter click event
storage technology for HTML 5
<template>
<div>
<input type="text" v-model="todolist" placeholder="Please input todo list" class="inputText">
<button @click="pushData()" class="btn">+</button>
<h2>Have in hand</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" name="" id="" v-model="item.checked" @change="saveList()">{{item.title}} ----- <button @click="del(key)">delete</button>
</li>
</ul>
<br>
<hr>
<h2>Completed</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" name="" id="" v-model="item.checked" @change="saveList()">{{item.title}} ----- <button @click="del(key)">delete</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'helloworld',
data() {
return {
todolist: '',
checked: false,
list: [
{
title: 'vue',
checked: true
},
{
title: 'nodejs',
checked: false
}
]
}
},
methods: {
pushData(){
this.list.push({
title: this.todolist,
checked: this.checked
});
this.todolist = ''
localStorage.setItem('list',JSON.stringify(this.list))
},
del(key){
this.list.splice(key,1);
localStorage.setItem('list',JSON.stringify(this.list))
},
saveList(){
localStorage.setItem('list',JSON.stringify(this.list))
}
},
mounted() {
var list = JSON.parse(localStorage.getItem('list'))
if(list){
this.list = list;
}
},
}
</script>
<style>
.inputText{
border-radius: 20px;
border: solid 1px gray;
padding: 20px 10px;
display: inline;
}
.btn{
background: skyblue;
border: 2px red solid;
padding: 20px 10px;
display: inline;
}
</style>
storage can be encapsulated as a module and exposed for reference.
more details
For more details, please visit: juntech