Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令
目录
Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令
什么是Vue
vue框架：渐进式JavaScript框架
vue一个环境：可以只控制页面中一个标签，可以控制一组标签，可以控制整个页面，可以控制整个项目。
vue可以根据实际需求，选择控制前端项目的区域范围。
为什么要学Vue
"""
1、html、css、js直接开发项目，项目杂乱，不方便管理，要才有前端框架进行开发，规范项目
2、Angular、React、Vue三个前端框架，吸取前两个框架的所有优点，摒弃缺点，一手文档是中文
3、Vue框架优点：
轻量级
数据驱动
数据的双向绑定
虚拟DOM（嵌套页面架构的缓存）
组件化开发：可以完全脱离服务器端，以前端代码复用的方式渲染整个页面
由全球社区维护
单页面web应用、MVVM设计模式
"""
如何使用Vue
开发版本：vue.js
生产版本：vue.min.js
先到官网把vue.js下载下来，在自己的项目中新建一个js文件夹，把vue.js放到js文件夹中，在html文件中导入即可
vue模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }} <!-- 插值表达式{{ }}可以完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
</div>
</body>
<script src="/js/vue.js"></script> <!--导入vue.js文件-->
<script>
// 需要实例化一个vue对象
// el为挂载点，采用css3选择器语法与页面标签进行绑定，决定该vue对象控制的页面范围
// 1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都采用id选择器
// 2.html与body标签不可以作为挂载点（组件中解释）
new Vue({
el: '#app',
data: {
msg: '数据',
// data是Vue的实例成员，为插值表达式中的变量提供数据，data中的数据可以通过Vue实例直接或间接访问
}
})
</script>
</html>
Vue实例成员
1、el: 实例
new Vue({
el: '#app',
})
// 实例'#app'与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容
2、data: 数据
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '数据',
// data是Vue的实例成员，为插值表达式中的变量提供数据
// data中的数据可以通过Vue实例直接或间接访问
}
})
</script>
3、methods: 方法
<body>
<div id="app">
<p class="box" v-on:click="pClick">测试</p> <!-- v-on:为事件绑定的指令-->
</div>
</body>
<script src="/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '数据',
}
// methods为vue实例提供事件函数的
methods: {
pClick () {
//点击测试
}
}
})
</script>
4、delimiters: 分隔符
用来修改插值表达式符号
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>分隔符</title>
</head>
<body>
<div id="app">
<p>{{ num }}</p>
<!--<p>{[ num ]}</p>-->
<p>{ num ]}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 100
},
// 用来修改插值表达式符号
// delimiters: ['{[', ']}'],
delimiters: ['{', ']}'],
})
</script>
</html>
5、computed: 计算属性
1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)
2、方法属性的值来源于绑定的方法的返回值
3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
4、方法中出现的所有变量都会被监听，任何变量发生值更新，都会调用一次绑定的方法，重新更新一下方法属性的值
5、方法属性值不能手动设置，必须通过绑定的方法进行设置
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
</script>
<script>
console.log(1 + '2'); // js是弱语言，可以字符串前写+号变成数字类型
console.log(1 - '2');
console.log(+'2');
</script>
</html>
6、watch: 监听
1、watch中给已有的属性设置监听方法
2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
3、监听方法不需要返回值(返回值只有主动结束方法的作用)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性的监听</title>
</head>
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中给已有的属性设置监听方法
// 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
// 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
}
})
</script>
</html>
Vue事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
body {
/*页面内容不允许被选中*/
user-select: none;
}
.p1:hover {
cursor: pointer;
color: green;
}
</style>
</head>
<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: '渲染',
// fn: function () {
// // console.log(app.count);
// // app.count ++
// console.log(this); // this不是该vue实例对象，是顶级Window对象
// }
},
// methods就是为vue实例提供事件函数的
methods: {
fn: function () {
// console.log(app.count);
// app.count ++;
// console.log(this); // this代表当前该vue实例对象
this.count ++ // this可以直接点数据变量
},
overAction: function () {
this.action = '悬浮'
},
outAction: function () {
this.action = '离开'
}
}
});
</script>
</html>
面向对象js
面向对象js：{ 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js的对象</title>
</head>
<body>
</body>
<script src="js/vue.js"></script>
<script>
// 1.js中没有字典，只有对象类型，可以把对象当做字典来使用
// 2.key本质是属性名，所以都是字符串类型（可以出现1，true），其实都是省略引号的字符串
let sex = '男';
let dic = {
'name': 'Owen',
1: 100,
true: 12345,
age: 18,
// sex: 'sex',
sex, // 相当于上面注释掉的这句
};
console.log(dic['name']);
console.log(dic['1']);
console.log(dic['true']);
console.log(dic['age']);
console.log(dic.sex);
dic.price = 3.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('Owen', 17.5); // 声明类People实例化对象名为p1
console.log(p1.name);
let res = p1.eat();
console.log(res);
// 直接声明对象，{}内的key都属于当前对象的
// {}中的方法通常会简写
let stu1 = {
name: '张三',
age: 18,
// eat: function () {
// console.log(this.name + '在吃饭');
// }
eat () { // 简写
console.log(this.name + '在吃饭');
}
};
stu1.eat()
// 总结：
// 1.{}中直接写一个变量：key与value是同名，value有该名变量提供值
// 2.es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源 为声明的对象提供资源
// 3.{}中出现的函数叫方法，方法可以简写 { fn: function(){} } => { fn(){} }
</script>
</html>
总结：
- {}中直接写一个变量：key与value是同名，value由该变量提供值
- es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源 为声明的对象提供资源
- {}中出现的函数叫方法，方法可以简写
{ fn: function(){} }=>{ fn(){} }
Vue过滤器
插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>过滤器</title>
</head>
<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) {
// console.log(v1);
// console.log(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>
</html>
Vue指令
文本指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!-- 1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
<p>{{ msg }}</p>
<p>{{ msg + '拼接内容' }}</p>
<p>{{ msg[1] }}</p> <!--索引取值-->
<p>{{ msg.slice(2, 4) }}</p> <!--切片操作-->
<hr>
<!--2、v-text：将所有内容做文本渲染 -->
<p v-text="msg + '拼接内容'"></p>
<!--3、v-html：可以解析html语法标签的文本 -->
<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-text="`<b>${msg}</b>`"></p>
<p v-html="`<b>${msg}</b>`"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
})
</script>
</html>
------------------------------------------------------------------------------------------------
前端页面展示结果是：
文本信息
文本信息拼接内容
本
信息
文本信息拼接内容
<b>文本信息</b>
文本信息
<b>文本信息</b>
文本信息
事件指令
<!--事件指令：v-on:事件名="事件函数" -->
<!--简写：@事件名="事件函数" -->
<p v-on:click="f1"></p>
<hr>
<p @click="f1"></p>
<!--绑定的事件函数可以添加()，添加括号就代表要传递参数-->
<p @click="f2(100)"></p>
<!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
<div class="box" @click="f3"></div>
<!--事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event -->
<div class="box" @click="f4(10, $event)"></div>
eg:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!--事件指令：v-on:事件名="事件函数" -->
<!--简写：@事件名="事件函数" -->
<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(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ 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: '第二个p',
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>
</html>
属性指令
<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="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 通常：变量值为字典 -->
<div :style="mys1"></div>
<!-- 了解：{中可以用多个变量控制多个属性细节} -->
<div :style="{width: 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>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({ // 声明Vue实例化对象变量名为app
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
width: '200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink', // js中-要用驼峰体代替
},
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) // 300是毫秒
</script>
