Vue examples
1, el: Example
new Vue({
el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容2, 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实例直接或间接访问-->3, methods: Method
<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为事件提供实现体-->4, computed: Calculation
Calculation of property: property defined method, the method returns the value of property, do not repeat defined elsewhere, all variables listens methods arise.
1) is actually the method vue properties, a method name can be used as an attribute, the attribute value of the return value of the method
2) A method in computed attribute declaration, a statement can not be repeated in the data, the attribute declaration per cent more than the data written in the logical place
3) the method attribute, comes sensing mechanism, variable appears in the method properties, will be monitored, if there is any variables being monitored value update occurs, the method attribute update method will be called property values.
4) a method attribute must render the page, using the method attribute significance, repeatedly rendering method attribute only be called once
The method of application scenario properties: a variable dependent on a plurality of variables, and requires a certain logic operation
<div id="app">
<input type="text" v-model="a">
<input type="text" v-model="b">
<div>
{{ c }}
</div>
</div>
<script>
// 一个变量依赖于多个变量
new Vue({
el: "#app",
data: {
a: "",
b: "",
},
computed: {
c: function() {
// this代表该vue实例
return this.a + this.b;
}
}
})
</script>Calculator Case:
<div id="app">
<!-- type="number"表示只能写数字 -->
<input type="number" v-model="num1" max="100" min="0">
+
<input type="number" v-model="num2" max="100" min="0">
=
<button>{{ sum }}</button>
</div>
<script>
new Vue({
el: '#app',
data: {
// sum: '', // 重复声明
num1: '',
num2: '',
},
computed: {
sum () {
// num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用
if (this.num1 && this.num2) {
return +this.num1 + +this.num2; // +this.num1是将字符串快速转换澄数字
}
return '结果';
}
}
})
</script>5, watch: monitor
Listen: listen to any variable with a method of the same name, monitor variable values will be updated listener callback method.
1) watch is not defined attributes, just listen attributes, so the return value does not make any sense, but whether to update the monitor variable values occur
2) the method name in the watch, is being monitored attribute (method name with the name attribute being monitored)
3) updates the value of the variable being monitored the event, the listener method will be called
Scenario:
Applications: a variable that affects the other variables by logic or business (graphic)
i) k chart: stock data changes, k chart re-render the page (needed to convert the data to a logical pattern)
ii) Split Name: name entry, split into first and last name (required logic data split into a plurality of data)
<div id="app">
<input type="text" v-model="ab">
<div>
{{ a }}
{{ b }}
</div>
</div>
<script>
// 多个变量依赖于一个变量
new Vue({
el: "#app",
data: {
ab: "",
a: "",
b: "",
},
watch: {
ab: function() {
// 逻辑根据需求而定
this.a = this.ab[0];
this.b = this.ab[1];
}
}
})
</script>6, delimiters: Separator
For changing the sign of the interpolation expression
<div id='app'>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>