Vue实例
1、el：实例
new Vue({
el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容2、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：方法
<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：计算
计算属性：定义方法属性，方法返回值是属性，不需要在其他地方重复定义，会监听方法中出现的所有变量。
1) 其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值
2）在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方
3）方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新，方法属性都会被调用更新方法属性的值。
4）方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次
方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算
<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>计算器案例：
<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：监听
监听：监听任何一个与方法同名的变量，监听变量值更新监听方法就会被回调。
1）watch中不定义属性，只是监听属性，所以方法的返回值没有任何意义，只是监听变量值是否发生更新
2）watch中的方法名，就是被监听的属性（方法名同被监听属性名）
3）被监听的变量值一旦发生更新，监听方法就会被调用
应用场景：
应用：一个变量通过逻辑影响着其他变量或是业务（图形）
i）k线图：股票数据变化，页面的k线图重新渲染（需要逻辑将数据转换为图形）
ii）拆分姓名：录入姓名，拆分为姓和名（需要逻辑将一个数据拆分为多个数据）
<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：分隔符
用于改变插值表达式的符号
<div id='app'>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>