一、Vue框架的优势
1. 中文API
2. 组件化开发
3. 单页面应用
4. 数据双向绑定
5. 虚拟DOM
6. 数据驱动思想（相比DOM驱动）
二、在页面中引入vue
1. 步骤
a. 通过script标签引入vew.js环境
b. 创建vue实例
c. 通过el进行挂载
2. 代码
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#d1',
})
</script>
3. 注意
a. 挂载点采用css3选择器语法，只能匹配第一次检索到的结果，因此通常采用id选择器。
b. html与body标签不能作为挂载点
c. 一个页面通常有一个挂载点
三、vue核心代码
<body>
<section>
<div id="d1">
{{ msg }}
<p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
</div>
</section>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: 'section',
data: {
'msg': 'message',
'info': '信息',
'pStyle': {
color: 'green'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'blue') {
app.pStyle.color = 'blue'
} else {
app.pStyle.color = 'green'
}
console.log(this.msg)
}
}
})
</script>
四、插值表达式
变量及变量的简单运算
<p>{{ msg }}</p>
<p>{{ num*10 }}</p>
<p>{{ msg+num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.splite('') }}</p>
五、js中的函数
1. 普通函数
a. 普通函数1
function f1() {
console.log('f1 run')
}
f1();
b. 普通函数2
let f2 = function () {
console.log('f2 run')
}
f2();
2. 箭头函数
箭头函数无法使用‘this’
a. 箭头函数1
let f3 = () => {
console.log('f3 run')
};
f3();
b. 箭头函数2
let f4 = (n1, n2) => n1 + n2;
let res1 = f4(10, 20);
console.log(res1);
c. 箭头函数3
let f5 = num => {
return num*10
};
let res2 = f5(10);
console.log(res2);
3. 构造函数
a. 构造函数普通写法
function F6(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在吃' + food)
}
}
let ff1 = new F6('A');
console.log(ff1.name);
let ff2 = new F6('B');
console.log(ff2.name);
ff1.eat('苹果');
ff2.eat('香蕉');
b. 构造函数简写
let obj = {
name: 'C',
// 普通函数
drink: function (drinks) {
console.log(this.name + '在喝' + drinks)
},
//方法
eat(food) {
console.log(this.name + '在吃' + food)
},
};
console.log(obj.name);
obj.eat('橘子');
obj.drink('juice')
六、js定义变量的四种方法
1. var a = 10
2. let b = 20
不能重复定义，具备块级作用域。
3. const c = 30
常量，定义后不可修改。
4. d = 40
全局变量