一、Vue介绍
1、什么是Vue
可以独立完成前后端分离式web项目的JavaScript框架
2、学习Vue的原因
三大主流框架之一:Angular React Vue
先进的前端设计模式:MVVM
可以完全脱离服务器端,以前端培训代码复用的方式渲染整个页面:组件化开发
3、Vue的特点
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
二、Vue使用一
2.1 第一个Vue页面与事件
{{ msg }}
这是一条内容
这是一条内容
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!'
},
methods:{
clickAction:function () {
alert('123123')
}
}
})
2.2 Vue操作样式与文本操作
点击变换文字颜色1
点击变换文字颜色2
{{ msg1 }}
{{ msg1 }}
new Vue({
el: '#app',
data:{
msg: 'this is first vue!!',
msg1:' 点击变换文字颜色3',
msg2: '其实是偷偷给你换了字!',
v_style:{
color:'green'
}
},
methods:{
btnClick:function () {
if (this.v_style.color == 'green'){
this.v_style.color = 'red';
}else{
this.v_style.color = 'green';
}
},
changeWord:function () {
this.msg1 = this.msg2;
}
},
});
2.3 Vue事件指令
{{ msg[0] }}
{{ msg[1] }}
- 第一个li
- 第二个li
- 第三个li
function1
function2
new Vue({
el: '#app',
data:{
msg: ['这是msg里面的第一个值', '这是msg里面的第二个值'],
v_style:{
color:'green',
}
},
methods:{
eventAction1:function () {
console.log('this is eventAction1');
},
eventAction2:function () {
console.log('this is eventAction2');
},
liAction: function (num, msg) {
console.log(num, msg)
},
func1: function (ev) {
console.log(ev)
},
func2: function (ev, msg) {
console.log(ev);
console.log(msg)
}
},
});
2.4 属性指令
1
2
3
4
这是测试style属性
这也是测试style属性
new Vue({
el: '#app',
data:{
msg: ['这是msg里面的第一个值', '这是msg里面的第二个值'],
v_style:{
color:'green',
},
F: 'First',
S: 'Second',
c1: 'rDiv',
c2: 'br',
s1: {
// 'font-size': '20px'
fontSize: '20px',
color: 'pink'
},
fs: '15px',
c: 'orange'
},
methods:{
action1:function () {
if(this.c1 == 'rDiv'){
this.c1 = 'gDiv';
}else{
this.c1 = 'rDiv';
}
},
},
});
new Vue里面的data下:
val: '',
r_val: 'female',
c_val: ['m','mf'],