Vue框架
三大主流前端框架：Angular React Vue
Vue：JS渐进式框架：一个页面小到一个变量，大到整个页面，均可以由vue控制，vue也可以控制整个项目
学习曲线：vue的指令 vue的实例成员 vue组件 vue项目开发
Vue的优点
单页面：高效
虚拟DOM：页面缓存
数据的双向绑定：数据是具有监听机制的
数据驱动：从数据出发，而不是从COM出发
Vue的使用
在要使用vue的html页面通过script标签引入
在html中书写挂载点的页面结构，用id表示
在自定义的script标签实例化Vue对象，传入一个大字典
在字典中通过 el与挂载点页面结构绑定，data为其通过数据
Vue初识
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue初识</title>
</head>
<body>
<div id="app">
<!-- {{ vue变量 }} 插值表达式,不传值会报错 -->
<h1>{{ h1_msg }}</h1>
<h2>{{ h2_msg }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app', // 挂载点
data: { // 为挂载点的页面结构提供数据
h1_msg: 'h1的内容',
h2_msg: 'h2的内容',
}
})
</script>
</html>
Vue完成简单的事件
<div id='app'>
<h1 v-on:click='clickAction'>h1的内容是{{ msg }}</h1>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:'vue渲染的内容'
}，
methods：{ // 为挂载点提供事件函数
clickAction: function(){
alert(123)
}
}
})
</script>
Vue操作简单样式
<div id="app">
<p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
<div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v_style: {
color: 'black'
}
},
methods: {
btnClick: function () {
this.v_style.color = 'green'
}
}
})
</script>
小结
- Vue通过v-* 指令来控制标签
- Vue通过 变量 来驱动页面