什么是vue？
可以独立完成前后端分离式web项目的javaScript框架
为什么使用vue？
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
特点（使用vue的优点）
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
简单使用vue
<div id="app">
{{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
vue的‘挂钩’（挂载点）
new Vue({
el: '#app'
})
vue的data（数据）
<div id='app'>
{{ msg }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '数据',
}
})
console.log(app.$data.msg)；//还可以直接写app.msg
</script
vue的methods（方法）
<style>
.box { background-color: orange }
</style>
<div id='app'>
<p class="box" @mouseover="pOver">测试</p>
</div>
<script>
var app = new Vue({
el: '#app',
methods: {
pOver () {
// 悬浮测试
}
}
})
</script>
vue的computed（计算）
<input type="text" v-model="a">
<input type="text" v-model="b">
<div>
{{ c }}
</div>
</div>
// 一个变量依赖于多个变量
new Vue({
el: "#app",
data: {
a: "",
b: "",
},
computed: {
c: function() {
// this代表该vue实例，c的内容是输入内容a和b的计算后样式
return this.a + this.b;
}
}
})
</script>
<input type="text" v-model="ab">
<div>
{{ a }}
{{ b }}
</div>
</div>
// 多个变量依赖于一个变量
new Vue({
el: "#app",
data: {
ab: "",
a: "",
b: "",
},
watch: {
ab: function() {
// 逻辑根据需求而定
this.a = this.ab[0];
this.b = this.ab[1];
}
}
})
</script>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>