一、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>五、文本指令
1. v-text
不能解析html语法的文本，会原样实处。
2. v-html
不能解析html语法的文本。
3. v-once
处理的标签的内容只能被解析一次。
<p v-on:click="pClick" v-once>{{ msg }}</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
全局变量八、事件指令
1. 语法
v-on:事件名=‘方法变量’
@事件名=‘方法变量’
2. 同一标签绑定多个事件
鼠标事件示例
<body>
<div id="app">
<p @mouseover="f1" @mouseout="f2">{{ action }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
action: '鼠标事件'
},
methods:{
f1 () {
this.action = '悬浮';
console.log('aaaaaaaa')
},
f2 () {
this.action = '离开'
},
}
})
</script>
3. 给绑定事件传参
a. 不加括号默认传事件对象：$event
b. 加括号表示自己传参，系统不自动传事件对象，可以手动传入事件。
<p @click="f1($event, 'a')">{{ action }}</p>九、属性指令
1. 语法
v-bind:属性名=‘变量’
：属性名=‘变量’
2. class属性绑定方法
a. 变量的值就是类名
<p :class="c1"></p>
b. 多类名可以用[ ],采用多个变量来控制
<p :class="[c1, c2]"></p>
c. 选择器可设置为常量
<p :class="['d1', c3]"></p>
d. {类名：布尔值}控制某类名是否起作用
<p :class="['d1', {d2: is_true}]"></p
3. 调整class属性示例
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
</head>
<body>
<div id="app">
<p :class="c1"></p>
<p :class="[c1, c2]"></p>
<p :class="['d1', c3]"></p>
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
c1: 'd1',
c2: 'd2',
c3: 'd3',
is_true: 0,
}
})
</script>
4. style属性绑定方式1
<body>
<div id="app">
<p :style="myStyle">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
}
}
})
</script>
5. style属性绑定方式2
<body>
<div id="app">
<p :style="{width: w, height: h, backgroundColor: bgc}">样式属性</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
w: '100px',
h: '100px',
bgc: 'red'
}
})
</script>