VUE
一、什么是vue
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
二、vue的特点
Vue框架具有以下特点：
轻量级；
数据驱动；
数据双向绑定；
为组件化开发；
开源，由全球社区维护；
三、方法
3.1 导入与挂载点
Vue一般在HTML文件的<body></body>标签后进行导入，这样可以使文件先进行渲染后再进行数据的统一处理，提升运算效率。
<body>
</body>
<script src="js/vue.js"></script>
</html>
el为挂载点，常用css3选择器语法与页面进行绑定，决定该vue对象控制的范围。
<body>
<div id="a">
<p class="c1">{{ 123 }}</p> // {{}}为模板语言
<hr>
<p class="c2">{{ }}</p>
<hr>
<p id="b">
<b>{{ 456 }}</b>
<i>{{ }}</i>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '.c1', // 使用类选择器，可以选取相应的类
});
new Vue({
el: '.c2', // 若两个类同名，只执行第一个
});
new Vue({
el: '#b' // 使用id选择器，可以包含其下的子标签
})
new Vue({
el: '#a' // 包含所有内容
})
</script>
3.2 变量
创建vue实例（new Vue），将对象以字典的形式传入（k为对象，v为值），其中的key称为变量。
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ info }}</p>
<h1>{{ info }}</h1>
</div>
<div id="main">
<p>{{ msg }}</p>
<p>{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'information'
}
});
let main = new Vue({
el: '#main',
data: {
msg: 'msg',
info: 'info'
}
});
console.log(app.info); // 等同console.log(app.%data.info)
console.log(main.info);
console.log(app.$el); // 取app下的el
console.log(app.$data); // 取app下的data
console.log(app.%data.info)
</script>
访问实例成员，用 vue实例.$成员名的格式，实例成员称为实例变量。
3.3 vue事件
<body>
<div id="app"> // 添加点击事件
<p class="p1" v-on:click="fn">这里被点击了{{ count }}下</p>
<p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction">此标签被{{ action }}</p>
<div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
action: '渲染',
},
methods: {
fn: function () {
this.count ++ // this待变当前vue实例对象
},
overAction: function () {
this.action = '悬浮'
},
outAction: function () {
this.action = '离开'
}
}
});
</script>
methods的作用是为vue实例提供事件函数。
3.4 对象
js中没有定义字典，但是对象类型，可以使用字典的方式来表示。
其中字典中key的本质是属性名，所以都是字符串类型
<script>
let sex = '男';
let dic = {
'name': '大熊',
1: 100, // 这里的1和true本质上都是字符串，省略了引号
true: 123456,
age: 88,
sex, // key与value是同名，value由该名变量提供值
};
console.log(dic['name']);
console.log(dic['1']);
console.log(dic['true']);
console.log(dic['age']);
console.log(dic.sex);
dic.price = 5;
console.log(dic.price);
// 声明类创建对象，类可以实例化n个对象，哪个对象调用，this就代表谁
function People(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log(this.name + '在吃饭');
return 123
}
}
let p1 = new People('大熊', 88);
console.log(p1.name);
let res = p1.eat();
console.log(res);
// 直接声明对象，{}内的key都属于当前对象的
// {}中的方法通常会简写
let stu1 = {
name: '镜像',
age: 85,
eat() { // eat:function(){} 的简写
console.log(this.name + '在吃饭')
}
};
stu1.eat()
</script>
注意：在es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源 为声明的对象提供资源。
3.5 文本指令
插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) 。
v-text：将所有内容做文本渲染。
v-html：可以解析html语法标签的文本。
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ msg + '拼接内容' }}</p> // 内容拼接
<p>{{ msg[1] }}</p> // 索引取值
<p>{{ msg.slice(2, 4) }}</p> // 切片
<hr>
<p v-text="msg + '内容拼接'"></p>
<p v-text="'<b>' + msg +'</b>'"></p> // <b>文本信息</b>
<p v-html="'<b>' + msg +'</b>'"></p> // 文本信息
<p v-text="`<b>${msg}</b>`"></p> // <b>文本信息</b>
<p v-html="`<b>${msg}</b>`"></p> // 文本信息
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
})
</script>
3.6 过滤器
<body>
<div id="app">
// 默认将msg作为参数传给filterFn
<p>{{ msg | filterFn }}</p>
// 过滤器串联
<P>{{ num | f1 | f2 }}</P>
//可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
// 过滤器方法接收所有传入的参数，按传入的位置进行接收
<p>{{ msg, num | f3(666, '好的') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本内容',
num: 1
},
filters: {
filterFn(v1 ,v2) {
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
f3(v1, v2, v3, v4){
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
}
}
})
</script>
3.7 事件指令
时间的指令采用v-on:时间名=“事件函数”的格式。
可以简写为@时间名=“事件函数”
<head>
<meta charset="UTF-8">
<title>js的对象</title>
<style>
.box {
200px;
height: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div id="app">
<p v-on:click="f1">被点了{{ count }}次</p>
<hr>
<p @click="f2">{{ p2 }}</p>
<hr>
// 绑定的事件函数可以添加()，添加括号就代表要传递参数
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(100)">{{ arr[1] }}</li>
<li @click="f3(100)">{{ arr[2] }}</li>
</ul>
<ul>
<li @click="f4(0)">{{ arr[0] }}</li>
<li @click="f4(1)">{{ arr[1] }}</li>
<li @click="f4(2)">{{ arr[2] }}</li>
</ul>
<hr> //绑定的事件函数如果没有传递参数，默认传入 事件对象
<div class="box" @click="f5"></div>
<hr>
// 事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event
<div class="box" @click="f6(10, $event)"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
p2: '第二个',
arr: [1,2,3],
},
methods: {
f1() {
this.count ++
},
f2() {
console.log(this.p2)
},
f3(num) {
console.log(num);
},
f4(index) {
console.log(this.arr[index]);
},
f5(ev, b) {
console.log(ev);
console.log(b);
},
f6(num, ev) {
console.log(num);
console.log(ev);
}
},
})
</script>
3.8 属性指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
.b1 {
100px;
height: 100px;
background-color: red;
}
.box1 {
150px;
height: 150px;
background-color: darkturquoise;
transition: .3s;
}
.box2 {
300px;
height: 100px;
background-color: darkgoldenrod;
transition: .3s;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->
<!--3.属性指令操作 style 属性-->
<div style=" 200px;height: 200px;background-color: greenyellow"></div>
<!-- 通常：变量值为字典 -->
<div :style="mys1"></div>
<!-- 了解：{中可以用多个变量控制多个属性细节} -->
<div :style="{ w,height: '200px',backgroundColor: 'deeppink'}"></div>
<!--重点：一般vue都是结合原生css来完成样式控制 -->
<!--<div :class="c1"></div>-->
<!--class可以写两份，一份写死，一份有vue控制-->
<div class="box1" :class="c2"></div>
<!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]控制多个类名-->
<div :class="[c3, c4]"></div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
'200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink',
},
w: '200px',
c1: 'box1',
c2: 'circle',
cable: false,
c3: 'box1',
c4: 'circle'
},
methods: {
changeCable(n) {
this.cable = n;
}
}
});
setInterval(function () {
// app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
if (app.c1 === 'box1') {
app.c1 = 'box2';
} else {
app.c1 = 'box1';
}
}, 300)
</script>
</html>
总结：
、面向对象js： { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
8、文本指令：{{ }} | v-text="" | v-html=""
9、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定义参数)"
10、属性指令：v-bind:属性名="" | :title="变量" | :style="字段变量" |
:class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
"""