1. mount point, templates, examples
-
Mount point: Vue means dom node corresponding to the instance attribute in el bound
-
Template: Vue instance refers to the content and internal mount point in the template properties in the content, template: Template
-
Example: In the example which specify a mount point, write on the template, the content will be presented in the mount point
2. Data, events, methods
- data: {} variables can be specified, stored data
- v-text and v-html similarities and differences:
- The same point: Vue may be used in instances where the data tag specifies {{msg}}
- Different points: native type dom, text escape all content, including tag, html tags can be identified
- v-on: click = @ click, abbreviated, after the @
- {{Number}}: This is an interpolation expression
- Method defined functions: "{} methods" in the "function name: function () {}" in the example.
such as,
methods: {
handleClick:function(）{}
}
3. Binding Properties and two-way data binding
-
v-bind: Individual Data Binding
-
v-model: a two-way data binding
-
v-model: to provide two-way binding
-
V-on instruction abbreviation is "@"
-
V-bind command abbreviation is ":"
<body>
<!-- v-bind:简写为: -->
<!--<div id="root" :title= "title">{{msg}}</div>-->
<div id="root" :title="title">
<input v-model="content">
<!--双向绑定 输入框的数据变化，data里的content变量的数据也跟着变化-->
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
msg: "hello world!",
title: "This is a hello world.",
content: "This is a content"
}
})
</script>
</body>
4. Calculate the listener properties and
- computed attribute values may be calculated, the function returns a write
computed: {
fullName: function(){
return this.firstName+" "+this.lastName;
}
}
- watch listener, the listener properties, if changed, perform the function
watch: {
fullName : function(){
this.count++;
}
}
5.v-if、v-show、v-for指令
- v-if: When the property is false, delete the label directly from the dom
<!--点击按钮，h1的元素在html中消失-->
<h1 v-if ="show">{{msg}}</h1>
- v-show: When the property is false, style tags as display: none
<!--点击按钮，h1的标签样式增加display:none-->
h1 v-show ="show">{{msg}}</h1>
- v-for: display cycle data, a key property is preferably added when using v-for, which can improve rendering speed page, and the unique key value for the holding of the v-for.
<ul>
<!--list数组中的元素循环指定为li标签的内容，index表示下标，item为每一项的值-->
<li v-for = "(item,index) of list" :key="index">{{item}}</li>
</ul>
The difference between v-if and v-show:
- When their corresponding data entry is false, "v-if" tag where he will be removed in the DOM, "v-show" where he will add a label "display: none;" the hidden attribute .
- v-show will not be re-created as the v-if every destroyed, v-show performance relative v-if higher
- If the frequency of the tag display is not so big, only need to do one show or hide, this time with v-if is a better choice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue实例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="ss">
<h1 v-show="show">{{msg}}</h1>
<button @click="handleClick">Toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#ss",
data: {
msg: "hello world!",
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function () {
this.show = !this.show
}
}
})
</script>
</body>
</html>
