One advantage, Vue framework
1. 中文API
2. 组件化开发
3. 单页面应用
4. 数据双向绑定
5. 虚拟DOM
6. 数据驱动思想（相比DOM驱动）Second, the introduction of vue on the page
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. 一个页面通常有一个挂载点Three, vue core code
<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>Fourth, the interpolation expression
变量及变量的简单运算
<p>{{ msg }}</p>
<p>{{ num*10 }}</p>
<p>{{ msg+num }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.splite('') }}</p>Fifth, text instructions
1. v-text
不能解析html语法的文本，会原样实处。
2. v-html
不能解析html语法的文本。
3. v-once
处理的标签的内容只能被解析一次。
<p v-on:click="pClick" v-once>{{ msg }}</p>Six, js the function
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')
Seven, four methods defined variables js
1. var a = 10
2. let b = 20
不能重复定义，具备块级作用域。
3. const c = 30
常量，定义后不可修改。
4. d = 40
全局变量Eight, event instruction
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>Nine, property instructions
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>