1. Introduction to Vue
(1) Several key words
- Template
- Data binding
- Componentization
- Virtual DOM
- MVVM mode
(2) Small features
vue can easily introduce plug-ins or third-party libraries (very convenient)
It is very convenient and small in size. It is suitable for mobile terminal / pc terminal development
(3)MVVM
Model: model, data object
View: view, template page
viewModel: view model, which is an instance of vue
The view layer obtains the data in the model through data binding. When an instance of vue changes in the view, it will listen to the change and modify the data in the model
(4)vue instruction
- v-model
Be able to monitor user input and update data
<body>
<div id="demo">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
const vm = new vue({
el:"#demo",
data:{
msg:'abc'
}
})
</script>
</body>
- v-bind
Specify the changed attribute value and force data binding
Complete writing: v-bind:xxx="yyy", concise writing: xxx="yyy"
<div id="demo">
<a v-bind:href="url">My link</a>
<!--Abbreviation-->
<a :href="url">My link</a>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
const vm = new vue({
el:"#demo",
data:{
url:'http://www.baidu.com'
}
})
- v-on
Bind the callback function of the specified event name
Complete writing v-on:click="yyy", concise writing @ click="yyy"
<div id="demo">
<button @click="test">Submit</button>
<button v-on:click="test">Submit</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
const vm = new vue({
el:"#demo",
methods:{
test(){
alert("Submitted successfully")
}
}
})
- v-if and v-else
When the condition does not hold, the child node will not be resolved
<body>
<div id="demo">
<p v-if="ok">Successful use</p>
<p v-else>Use failed</p>
<hr>
<p v-show="ok">Successful writing</p>
<p v-show="!ok">Writing failed</p>
<button @click="ok = !ok">switch</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#demo',
data:{
ok:true
}
})
</script>
</body>
- v-show
(example code combined with v-if)
Differences between v-if and v-show:
When used for hiding, v-show is implemented by changing the block and none of the display of the element, while v-if is not resolved because it does not meet the conditions - v-for
Used for traversal of arrays or objects
Traversal array
<body>
<div id="demo">
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}--{{p.name}}--{{p.age}}
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#demo',
data:{
persons:[
{name:'one',age:10},
{name:'two',age:11},
{name:'three',age:12},
]
}
})
</script>
</body>
Traversal object
<body>
<div id="demo">
<ul>
<li v-for="(item,key) in persons[1]" :key="key">
{{key}}--{{item}}
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#demo',
data:{
persons:[
{name:'one',age:10},
{name:'two',age:11},
{name:'three',age:12},
]
}
})
</script>
</body>
- v-text
Can update the text content of the element - v-html
Tags that recognize incoming text - v-cloak
When the network speed is slow and the data is not displayed, the page will display the source code. Use v-cloak to solve this problem. Even if the data is not loaded, the source code will not be displayed - ref
A unique indicator that can be found using properties
(7-10 code cases)
<body>
<div id="demo">
<p v-cloak>{{content}}</p>
<p v-text="content"></p>
<p v-html="content"></p>
<p ref="msg">1234</p>
<button type="button" @click="show">Tips</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new vue({
el:"#demo",
data:{
content:'<a href="http://www.baidu. Com "> Baidu < / a > '
},
methods:{
show(){
alert(this.$refs.msg.innerHTML)
}
}
})
</script>
</body>
(5) Life cycle of Vue
First, take a look at the official vue life cycle diagram
Note: you cannot use arrow functions to define lifecycle hooks
beforeCreate:
After instance initialization, data observer and event/watcher events are called before configuration
created:
Called immediately after the instance is created. In this step, the instance has completed the following configuration: Data observer, operation of property and method, and callback of watch/event event event. However, the mount phase has not yet started and $el property is not yet available
beforeMount:
Called before the mount starts: the relevant render function is called for the first time.
This hook is not called during server-side rendering
Mounted:
Called after the instance is mounted
beforeUpdate:
Called during data update, which occurs before the virtual DOM is patched. For example, before adding an existing DOM listener, it is appropriate to manually update the event here.
updated:
The hook is called after the virtual DOM is re rendered and patched due to data changes.
When this hook is called, the component DOM has been updated, so you can now perform DOM dependent operations. However, in most cases, you should avoid changing state during this period. If you want to change the state accordingly, it is usually best to use calculated properties or watcher s instead.
beforeDestroy:
Called before the instance is destroyed. At this step, the instance is still fully available
destroyed:
Called after the instance is destroyed. After the hook is called, all instructions corresponding to Vue instances are unbound, all event listeners are removed, and all sub instances are destroyed.
(6) Use of filters
Display the data to be displayed after specific formatting
2.vue construction
(1)vue scaffold construction
-
Install Vue cli
NPM install - G Vue cli (global installation) -
Construction project
Vue init webpack mydemo (name)step: 1)Project name entry name 2)Project description Project description 3)Author author 4)Vue build Compile (select the first) 5)Install vue-router Install routing(y) 6)Use ESlint to lint your code Syntax check(n) 7)set up unit tests Unit test( n) 8)setup e2e tests (n) 9)Yes,use npm (choose)
cd mydemo1 to enter the folder
npm install (judge whether to install dependent package software)
npm run dev run project
(2) Communication between components
1. One of the props of communication
This method is used for communication. It is used for the parent component to transfer data to the child component. If it needs to be transferred to non child components, it needs to be carried out with the help of the parent component; At the same time, this method needs to be passed layer by layer (the parent passes to the child, and the parent cannot pass directly to the children of the child)
There are three ways to declare props of attributes:
- Specify only the name props:{'addContent','name'}
- Specify the name and type props:{addContent:Function,name:String}
- Specify name, type, necessity, default value
props:{ addContent:{ type:Function, required:true //default:xxx } }
3. Using ajax in Vue
(1)vue-resource
npm install vue-resource --save
// Introduction module
import VueResource from 'vue-resource'
// Using plug-ins
Vue.use(VueResource)
// Send ajax requests through vue / component objects
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //Return result data
}, (response) => {
// error callback
console.log(response.statusText) //error message
})
(2)axios
npm install axios --save
// Introduction module
import axios from 'axios'
// Send ajax request
axios.get(url)
.then(response => {
console.log(response.data) // Get the returned result data
})
.catch(error => {
console.log(error.message)
})
4. UI component library of Vue
Mint UI vue based mobile terminal component library
Attach a link to the official website: http://mint-ui.github.io/#!/zh-cn
Elment UI vue based PC component library
Link: http://element-cn.eleme.io/#/zh-CN
It is the foundation of vue foundationThe notes learned by yourself will continue to be supplemented in the follow-up learning process