Vue examples
el: Create an instance of
new Vue({
el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容- Each application Vue is by creating a new instance of Vue Vue function starts with the
- Application of a Vue Vue instance created by the root of a new new Vue, and optionally nested, reusable components tree composition.
Data and Methods
data
- When a Vue instance is created, it is added all the properties which can be found in the data object to the Vue responsive system. When the values of these properties change, the view will produce a "response" that is updated to a new value matching.
- Instance is created only when data is present in response to the properties of the formula
- If you know you'll need a property at a later date, but a start it is empty or does not exist, then you only need to set some initial values
Examples of methods
Vue examples also exposed some examples of useful properties and methods. They have a $ prefix, so that the user defined attributes distinguish
- vm. $ the
- vm.$data
- vm.$watch(dataAttr, fn)
data: data
<div id='app'>
{{ msg }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '数据',
}
})
console.log(app.$data.msg);
console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->methods: Method
methods
methods can be used to load the function call, you can directly access these methods Vue example, or expressions in the instruction. A method for the automatic binding of this example Vue.
Note that should not be used to define the function arrow function methods (e.g., plus: () => this.a ++ ). The reason is a function of the arrow bound the context of the parent scope, so this will not be as desired point Vue instance, this.a will be undefined. Sample code is as follows.
If you want to trigger these functions through the operation of the DOM, you should use the v-on operation and events bind
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" v-on:click="pClick">测试</p>
<p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pClick () {
// 点击测试
},
pOver () {
// 悬浮测试
}
}
})
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->computed: computing
1, computed method defined attribute, the attribute data are defined, there is no need to repeat the definition (not the data)
Method value of 2, the method of binding properties derived from the return value of
3, the method must be in the page properties after the rendering method bindings will be enabled (call)
4, all variables that appear in the method will be monitored, the method will be called to update the value of any variable binding occurs once again update the look of the property value method
5, method attribute value can not manually set, must be provided by a method of binding
The expression in the template is very convenient, but They are primarily designed for simple operation. Putting too much logic in the template template will be too heavy and difficult to maintain, at this time should be used to calculate property
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>
<script>
console.log(1 + '2');
console.log(1 - '2');
console.log(+'2');
</script>watch: monitor
1, is provided in the watch to monitor the properties of an existing method
2, the attribute value is updated in the event listener, the listener method is called, to complete the process in the respective logic
3, the listener method does not return a value (return values of the active end of the process of effect)
Although the computing properties more appropriate in most cases, but sometimes requires a custom listener. That's why Vue provides a more general approach by the watch option to respond to changes in the data. When the need to perform asynchronous data change operation or large overhead, this approach is most useful
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>methodes, computed, watch the three differences
They are based on three main function, but each has its own differences between them.
The method of calculating row genus
We can define the same function as a method rather than a calculated property. The final results of the two methods is indeed identical. However, the difference is calculated based on their properties are dependent caching. Calculation of property will only be re-evaluated when it changed its dependencies. This means that as long as the message has not changed, many visits reversedMessage calculate property returns before the results immediately, without having to perform functions again.
In contrast, whenever the trigger re-rendering, calling the method will always execute the function once again.
Calculating properties with the listener properties
- watch good handling scenario: a plurality of data Data Effect
- good handling computed scene: a plurality of data by a data Effects
delimiters: Separator
Interpolation is used to modify the expression symbol
delimiters: ['{[', ']}']
<body>
<div id="app">
<p>{{ num }}</p>
<!--<p>{[ num ]}</p>-->
<p>{ num ]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100
},
// 用来修改插值表达式符号
// delimiters: ['{[', ']}'],
delimiters: ['{', ']}'],
})
</script>