Vue 基础
Vue 基础
Vue框架：官网
vue框架：渐进式JavaScript框架，vue一个环境：可以只控制页面中一个标签、可以控制一组标签、可以控制整个页面、可以控制整个项目，vue可以根据实际需求，选择控制前端项目的区域范围，可以独立完成前后端分离式web项目的JavaScript框架。
Vue优缺点:
-
html、css、js直接开发项目，项目杂乱，不方便管理，要才有前端框架进行开发，规范项目
-
Angular、React、Vue三个前端框架，吸取前两个框架的所有优点，摒弃缺点，一手文档是中文
-
Vue框架优点：
-
轻量级
-
数据驱动
-
数据的双向绑定
-
虚拟DOM（嵌套页面架构的缓存，把整个页面的dom加载到内存，再把整个项目再映射到真实的dom（硬件的文件中），基于缓存机制。）
-
组件化开发
-
由全球社区维护
-
单页面应用、先进的前端设计模式MVVM设计模式
-
mvvm: m:数据通过后台获取，v:视图，vm:c(控制层)分成了两部分，一种专门与页面交互的c,一种专门与数据交互的，谁的c有谁管
-
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发
-
一、vue导入挂载点el
<body>
<div id="app">
<p class="p1">{{ 1 }}</p> <!--没有被修饰，原样显示-->
<hr>
<p class="p2">{{ 2 }}</p>
<p id="p">
<b>{{ 3 + 1 }}</b>
<i>{{ 4 }}</i>
</p>
</div>
</body>
<script src="js/vue.js"></script> <!--导入vue-->
<script>
console.log(Vue);
new Vue({
el: '.p2' // 挂载class为.p2
});
new Vue({
el: '#p' // 挂载p标签下面所有内容
});
</script>
{{ 1 }}
2
3
4
总结：
- el:参数为挂载点，只有被el挂载，才会和css3选择器语法与页面标签进行绑定，并且该挂载对象表示在页面控制的范围，eg: el: '#app'
- 挂载点会检索页面中第一个匹配到的结果，所以挂载点一般采用id选择器
- html与body标签不可以作为挂载点
- 通常挂载命名为
id="app"id="main",在一个div中包含起来 - 一个页面中可以出现多个挂载点，实例只操作挂载点的内容
二、vue变量实现data
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<hr>
<div id="main">
<p>{{msg}}</p>
<p>{{info}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 实例成员中data为vue页面模板获取数据信息，渲染页面
let a = 1;
function f() {
let a = 11
// for (a; a < 10; a++) {
// console.log(a);
//
// }
}
f();
console.log(a,'a');
let app = new Vue({
el: '#app',
data: {
msg: 'app',
info: 'vue变量信息'
}
});
let main = new Vue({
el: '#main',
data: {
msg: 'main',
info: 'info'
}
});
// 获取data中定义的变量
console.log(app.info);
console.log(main.info);
// 创建vue实例(new Vue) 传进去的字典(对象)的key，称之为vue实例成员(变量)
// 访问实例成员, 用vue实例.$成员名, eg:app.$el
console.log(app.$el); // 打印被装载的标签
console.log(app.$data);
console.log(app.$data.info)
</script>
总结：
- data：实现要显示的变量信息
- 可以写key-vaules，data中的数据可以通过Vue实例直接或者间接访问
- 也可写函数
- 一般使用id为挂载点，id为app或main
- 传进去的字典对象的key称之为vue实例成员变量，eg ： app.$el
三、方法methods
<style>
body {
/* 页面内容不允许别选中*/
user-select: none;
}
.p1:hover {
cursor: pointer;
color: red;
}
</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',
action: '渲染了',
data: {
count: 0
// fn: function () {
// // console.log(app.count);
// // app.count ++
// console.log(this); // this不是该vue实例对象，是顶级Window对象
// }
},
// methods就是为vue实例提供事件函数的
methods: {
fn: function () {
this.count++;
},
overAction: function () {
this.action = '鼠标来啦' // 点击父标签挥别触发
},
outAction: function () {
this.action = '鼠标走了' // 点击父标签挥别触发
}
}
});
</script>
这是一个段落，被点击了6下
该标签被鼠标走了
div被鼠标走了
总结：
- 使用方法：<p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>
- v-on:后面跟上要实现的时间名称
- 在methods实现方法的具体功能
- 在methods中函数中使用this才是当前点击的对象，注意this是谁
四、js对象
<script>
// 1.js中没有字典,只有对象类型，可以吧对象当做字典来使用
// 2. key本质是属性名,所以都是字符串类型（可以出现1,true）,本质都是省略引号的字符串
let sex = '男';
let dic = {
'name': 'randy',
1: 100,
true: 12,
age: 18,
// sex: 'sex', // 'sex'是定义的全局变量
sex, // 当key和value值相同的时候可是使用单个key
};
console.log(dic['name']);
console.log(dic['1']);
console.log(dic['true']);
console.log(dic['age']);
console.log(dic['sex']);
console.log(dic.sex);
// 声明类创建对象， 类可是被实例化n个对象,那个对象调用, this就代表谁
function Peopoe(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log(this.name + '在吃');
return 13
}
}
let p1 = new Peopoe('randy', 18);
console.log(p1.name);
let res = p1.eat();
console.log(res)
// 声明对象方式二, {}内的key都属于当前对象的
// {} 中的方法通常会简写
let stu = {
name:'张三',
age: '312',
// eat: function () {
// console.log(this.name + '再吃')
//
// }
eat(){
console.log(this.name + '再吃')
}
};
stu.eat()
</script>
总结:
- {} 中可以直接写一个变量：key与value是同名, value有该名变量提供值
- es5下,所有的函数都可以作为类， 类可以new声明，在函数中使用this.对象，为声明的对象提供资源
- {}中出现的函数叫方法，方法可以简写{fun:function(){}} ==>{fun()
五、文本指令
<body>
<div id="app">
<!-- 1 插值表达式，能够将变量渲染到页面中，也可以进行变量的算术运算, 可以使用自带的函数方法如切片
缺点：不能完成复杂的运算（一步不能解决的，而且不能出现分号;）
-->
<p>{{msg}}</p>
<p>{{msg + '拼接内容'}}</p>
<p>{{msg[1]}}</p>
<p>{{msg.slice(2,5)}}</p>
<p>1+3 = {{ 1+ 3 }}</p>
<hr>
<!-- 2. v-text: 将所有内容做文本渲染-->
<p v-text="msg+'拼接内容'">2</p>
<!-- 3. v-html： 可以解析html语法标签的文本, v-text不可以-->
<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>
<!--v-once:插值表达式渲染文本，once来限制文本不可修改-->
<!--限制的是这个标签，插值表达式渲染出了初始值后就不会再做任何变化-->
<p v-once>{{ htmlMSG + msg }}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
});
总结：
-
插值表达式{ { }}
-
使用在{{ }}里面放入data中的变量
-
能够将data数据渲染到页面上
-
可以进行简单的算术运算
-
可以使用内置函数
-
不可以处理复杂的运算(一条语句不能完成的操作)
-
不可出现分号语句
-
-
v-text
- 使用：在表中里面使用<p v-text="msg+'拼接内容'"></p>
- 将data中变量值显示在页面中
- 不可以解析html语法标签
- 可以与 `${}`连用
- 把文本内容渲染到标签里，原文本会被msg替换
-
v-html
- 使用：<p v-html="''+msg+''"></p>
- 将data中变量值显示在页面中
- 可以解析html语法标签
- 可以与 `${ }`连用
- 把文本内容渲染到标签里，原文本会被msg替换
六、过滤器filters
<body>
<div id="app">
<!-- 默认将msg作为参数传给filterFn-->
<p>{{msg | filterFn}}</p>
<!-- 过滤器串联-->
<p>{{ num | fun1 |func2 }}</p>
<!-- 可以同时对多个变量进行过滤, 变量之间用,分割 过滤器还可以额外传入辅助参数过滤
过滤器方法接收所有传入的参数,按传入的位置进行接收
-->
<p>{{ msg, num | fun3(3,4)}}</p>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息',
num: 23
},
filters: {
filterFn(v1, v2) {
return `<b>${v1}</b>`;
},
fun1(v) {
return v * 100
},
func2(v) {
return v * 100
},
fun3(v1, v2, v3, v4) {
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
}
}
});
</script>
总结：
- 使用： {{ msg | 过滤器名称 }}，与 filters参数连用
- 作用：实现多数据的再一次加工处理
- 默认将 | 左面数据传给过滤器，可以有多个参数，参数可以使用逗号隔开
- 过滤器可以多个串联使用，一次从左到右一次执行
- 可以传递多个参数，过滤器也可以传入多余的参数
七、事件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件指令</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<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>
<!-- 绑定事件函数如果过没有传递参数，默认传入事件对象-->
<div class="box" @click="f5">
</div>
<!-- 事件函数一旦添加传参(), 系统就不在传递任何参数, 需要事件对象是，可以手动传入$event-->
<div class="box" @click="f6(1,$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: function () {
this.count++
},
f2: function () {
this.p2 += 'p2'
},
f3(num) {
console.log(num);
},
f4(index) {
console.log(this.arr[index]);
},
f5(e) {
console.log(e)
},
f6(num, e){
console.log(num)
console.log(e)
}
}
});
</script>
</html>
总结：
- 事件指令格式: v-on: 事件名=‘事件函数’ 简写方式==> @事件名称=‘事件函数’
- 作用：实现动态交互，通过事件实现具体的事情
- 绑定事件函数可以传递参数()，处理想要的数据结果集
- 如果绑定的事件函数没有传递参数，默认传入事件对象，通过事件对象可以获取事件里面的参数与键盘一起连用
- 如果事件传参，系统将不在默认传递事件，如果想传入事件，可以通过在参数中添加 $event, 字母一定要一样
八、属性指令
<style>
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
width: 100px;
height: 100px;
background-color: black;
transition: .5s
}
.box2 {
width: 100px;
height: 100px;
background-color: black;
transition: .5s;
}
.circle {
border-radius: 50%;
}
</style>
<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:属性名="变量" 简写方式 :属性名="变量"-->
<br>
<!--3.属性指令操作 style 属性-->
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 通常：变量值为字典 -->
<br>
<div :style="mys1"></div>
<br>
<!--4. 重点：一般vue都是结合原生css来完成样式控制 -->
<div :class="c1"></div>
<!-- class可以写两份，一份写死，一个vue控制-->
<div class="box1" :class="c2"></div>
<br>
<!--通过{}控制类名, key为类名，key对应的值为bool类型，决定该类名是否起作用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]控制多个类名-->
<div :class="[c1,c4]"></div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'titlee',
xyz: 'xyz12',
mys1: {
width: '200px',
height: '200px',
backgroundColor: 'red',
},
c1: 'box1',
c2: 'box2',
c4: 'circle', //
cable: false,
},
methods: {
changeCable(n) {
this.cable = n
}
}
});
</script>
总结：
- 作用：动态操作html修饰的css样式,id, class ,属性指令就是控制他们
- 使用： v-bind：属性名="变量（data中对应的）" 简写方式 :(冒号)属性名="变量"
- 可以对 style动态操作 :style='mystyle(与data对应的变量，值为字典形式)'
- 通过对class操作 ：class='变量'，可以与实践一起连用实现动态添加属性或者移除，与{}连用
- 对class设多个值 [变量1，变量2....] 也可以与{}一起连用
九、总结
-
什么是vue，作用
-
因为html,css,js直接开发项目，从而导致项目杂乱，不方便处理，所以才有前端框架进行开发
-
优点、轻量级，数据驱动，数据双向绑定，虚拟DOM(嵌套页面架构的缓存)，组件开发，有全球社区维护，单页面应用，mvvm设计模式
-
使用：下载js文件，引入文件（在htm和body中间引用，原因加载问题）
<script src='vue.js'></script>
-
-
挂载点el："选择器"
- 作用：实现页面中渲染的区域，可以有多个
- 使用new Vue({el: "#app"})，只有被挂载的区域才会被vue控制
- 挂载点只检索第一个匹配的结果，一般使用id为作为挂载点，命名app|main
- 挂载点是css3选择器
-
插值表达式 {{ 变量名 }}
-
作用：拿到data中的数据渲染到页面中 {{ msg }} 与data连用
-
插值表达式中的变量值有实例成员data来提供
-
插值表达式可以进行基础的运算，比如逻辑运算
-
可以使用自带的方法split, 插值表达式只能够完成简单的基础运算
-
不能进行复杂的运算
{{ msg.split()}} | {{ msg + 2 }} | {{ msg + 'nihao' }}
let msg = 'info'
new Vue({
el: '#app',
data:{
msg,
}
})
-
-
v-on指令
-
作用：绑定事件进行一些操作，语法 <p v-on:click="函数名"></p>，简写方式@事件名称=“函数名称”，与methods连用
-
事件函数与实例成员methods来提供
-
可以传递参数默认传递事件，通过事件可以与键盘一起连用操作
-
如果传递参数还要是使用事件可以通过 $event作为参数传递
@click='fn' | @click='fun()' | @click='fn(10, 20)' | @click='fn(10, $event)'
let msg = '12345'
new Vue({
el: "#app",
data: {
msg,
},
methods: {
fn(){}
},
})
-
-
过滤器
- 使用： {{ msg | 过滤器名称 }}，与 filters参数连用
- 作用：实现对数据的再一次加工处理
- 默认将 | 左面数据传给过滤器，可以有多个参数，参数可以使用逗号隔开
- 过滤器可以多个串联使用，一次从左到右一次执行
- 可以传递多个参数，过滤器也可以传入多于的参数
-
文本指令
- 插值表达式{ { }}
- 使用在{{ }}里面放入data中的变量
- 能够将data数据渲染到页面上
- 可以进行简单的算术运算
- 可以使用内置函数
- 不可以处理复杂的运算(一条语句不能完成的)
- 不可出现分号语句
- v-text
- 使用：在表中里面使用<p v-text="msg+'拼接内容'"></p>
- 将data中变量值显示在页面中
- 不可以解析html语法标签
- 可以与 `${}`连用
- v-html
- 使用：<p v-html="''+msg+''"></p>
- 将data中变量值显示在页面中
- 可以解析html语法标签
- 可以与 `${ }`连用
- 插值表达式{ { }}
-
属性指令 v-bing
-
作用：动态操作html修饰的css样式,id, class ,属性指令就是控制他们，通过变量值获取data的数据
-
使用： v-bind：属性名="变量（data中对应的）" 简写方式 :(冒号)属性名="变量"
-
可以对 style动态操作 :style='mystyle(与data对应的变量，值为字典形式)'
-
通过对class操作 ：class='变量'，可以与实践一起连用实现动态添加属性或者移除，与{}连用实现类名状态绑定
-
对class社多个值 [变量1，变量2....] 也可以与{}一起连用
-
v-bind:属性名=”变量“
-
:title = '变量' // 简写方式
-
:style = "字段变量" // backgroudColor
-
:class = "变量"
-
:class = "[变量1， 变量2]"
-
:class = "{类1：真假， 类2：真假}"
-
:title="var1" | :style="dic1" | :class="var2" | :class="[var3, var4]" | :class="{box: true|false}" // var2 = 'box' | var2 = 'box circle'
-
-
在当下的阶段，必将由程序员来主导，甚至比以往更甚。
