1216 Vue基础
目录
前端框架
- angular ---更新程度太快,且不向下兼容
- react ----- 移动端大多都使用
- vue
vue
有前两大框架的优点,摒弃缺点
但没有他们框架健全
Vue
1.简介
可以独立完成前后端分离式web项目的JavaScript框架
三大主流框架之一:Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发
1.1 优点
- 中文API
- 单页面应用
- 组件化开发
- 数据双向绑定
- 虚拟DOM
- 数据驱动思想(相比DOM驱动)
2 使用
所有的script标签,在body与html标签之内的都会在body最下方加载
通过<script>
引入vue.js文件,在<script>
标签中实例化vue对象获取关联
2.1 基础
1. 挂载点
el
指点与页面中的标签建立关联
- 通常挂载点都采用id选择器(唯一性)
- html与body标签不能作为挂载点(组件知识点)
<body>
<section>
<div id="d1">
{{ msg }}
<p> {{ info }} </p>
</div>
</section>
</body>
<script src="vue/vue.js"></script>
<script>
// let app = new Vue({
// el:'#d1', // 挂载点,vue实例与页面标签建立关联
// });
new Vue({
el:'section', // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
// data为挂载点提供数据
data:{
msg:'message',
info:'信息'
}
})
</script>
</html>
2. 方法属性
data:{}
控制变量
methods:{}
控制属性的变化
-
声明的实例不需要使用变量来接收,用
this
代表当前vue实例本身 -
在实例外部或其他实例内部, 需要定义一个变量接受new Vue()产生的实例
-
console.log(app.pClick); console.log(this.pClick);
<body>
<section>
<div id="d1">
{{ msg }}
<p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
</div>
<hr>
<div class="d2">
{{ }}
</div>
<hr>
<div class="d2">
{{ }}
</div>
</section>
</body>
<script src="js/vue.js"></script>
<script>
`
console.log(Vue);
let app = new Vue({
el: '#d1', // 挂载点:vue实例与页面标签建立关联
});
new Vue({
el: '.d2', // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
});
`;
// 总结:
// 1、通常挂载点都采用id选择器(唯一性)
// 2、html与body标签不能作为挂载点(组件知识点解释)
// new Vue({
// el: 'body'
// })
let app = new Vue({
el: 'section',
data: { // data为挂载点内部提供数据
msg: 'message',
info: '信息',
pStyle: {
color: 'yellowgreen'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'yellowgreen') {
app.pStyle.color = 'yellowgreen'
} else {
app.pStyle.color = 'red'
}
console.log(app.msg);
console.log(app.pClick);
console.log(this.msg);
console.log(this.pClick);
}
}
});
// 声明的实例是否用一个变量接收
// 1、在实例内部不需要,用this就代表当前vue实例本身
// 2、在实例外部或其他实例内部需要,定义一个变量接收new Vue()产生的实例
console.log(app.msg)
</script>
</html>
3. 插值表达式
{{ }}
用于文本插值
<div id="app">
<p>{{ message }}</p>
</div>
算术运算
<p>{{ num * 10 }}</p>
拼接
<p>{{ msg + num }}</p>
取值
<p>{{ msg[1] }}</p>
<p>{{ (msg + num)[3] }}</p>
方法
<p>{{ msg.split('') }}</p>
2.2 文本指令
{{ }}
插值表达式- v-text
- v-html
- v-once
1. v-text
不能解析html,只输出文本
<p v-text="info"> 旧文本 </p>
如果有旧文本,则会被替换
2. v-html
能够解析html语法的文本
<p v-html="info"></p>
new vue({
el:'#app',
data:{
msg:'message',
info:'<i> 这是info斜体字 </i>
}
})
3. v-once
处理的标签内容只能被解析一次
添加之后,只会被解析一次
<p v-on:click="pClick" v-once>{{ msg + info }}</p>
2.3 事件指令
v-on:事件名 = '方法变量'
简写:@事件名 = '方法变量'
- 点击事件
click
- 悬浮
mouseover
- 离开
mouseout
- 按下
mousedown
- 按下抬起
mouseup
- 按下移动
mousemove
- 右键
contextmenu
事件变量
- 事件的变量加括号是传参
- 事件对象本身为
$event
* 事件变量,不添加(),默认会传事件对象:$event
* 事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象
<p @click="f8($event,'第一个)">{{ info }}</p>
<p @click="f8($event,'第二个)">{{ info }}</p>
f8 (ev,argv){
console.log(ev,argv);
this.info = argv + '点击了'
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p @click="f1">{{ msg }}</p>
<hr>
<!--鼠标悬浮/离开-->
<p @mouseover="f2" @mouseout="f3">{{ action }}</p>
<hr>
<!--鼠标按下/按下抬起/按下移动-->
<p @mousedown="f4" @mouseup="f5" @mousemove="f6">{{ action }}</p>
<!--右键-->
<p @contextmenu="f7">{{ action }}</p>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'点击切换',
action:'鼠标事件',
},
methods:{
f1 (){
this.msg = '点击了'
},
f2 (){
this.action = '悬浮了'
},
f3 (){
this.action = '鼠标离开'
},
f4 (){
this.action = '鼠标按下'
},
f5 (){
this.action = '鼠标抬起'
},
f6 (){
this.action = '鼠标按下时移动'
},
f7 (){
this.action = '右键'
},
}
})
</script>
</html>
2.4 属性指令
v-bind:属性名='变量'
简写成:属性名='变量'
1. 简单使用(单值的使用)
<p v-bind:title="pTitle" :abc="def">简单使用</p>
....
data: {
pTitle: '简单使用',
def: '自定义属性',}
....
2. class的属性绑定
<!--c1变量的值就是类名-->
<p :class="c1"></p>
c1: 'd1 d2',
<!--多类名可以用[]语法,采用多个变量来控制-->
<p :class="[c2, c3]"></p>
c2: 'd1',
c3: 'd3',
<!--选择器位可以设置为变量,也可以设置为常量-->
<p :class="['d1', c4]"></p>
c4: 'd3','d1'直接是默认的样式
<!--{类名: 布尔值}控制某类名是否起作用-->
<!--<p :class="{x1: false}"></p>-->
<!--多种语法混用-->
第一个是固定样式,是否为真
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
3. 样式属性(了解)
<p :style="myStyle">样式属性</p>
data中定义:
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
}
<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
data中定义:
w: '200px',
h: '100px',
bgc: 'green'
JS面向对象补充
数据类型
undefined/null/string/number/boolean/object(Array)/function
定义变量的方式
var/let/const/不写
对象object与function
面向过程(函数)
function f1(){
console.log('f1 run)
}
f1();
面向对象
定义类(构造函数 == 类)
function F2(){
console.log('f1 run)
}
f1();
JS中类的参数的传值与接收互相分离,多传值不会接收,少传值会是undefined参数
// 构造函数 == 类
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
}
let ff1 = new F2("Bob");
console.log(ff1.name);
let ff2 = new F2("Tom");
console.log(ff2.name);
ff1.eat('饺子');
ff2.eat('sao子面');
直接定义对象(方法的简写)
类
let obj = {
name: 'Jerry',
eat: function (food) {
console.log(this.name + '在' + food)
},
方法可以直接简写:
eat(food) { // 方法的语法
console.log(this.name + '在' + food)
}
};
console.log(obj.name);
obj.eat('hotdog');
JS函数的补充
定义变量
作用域 : 全局 -- 块级 -- 局部
var // for循环时,会是全局的
let // 不能重复定义,且具备块级作用域,出去括号就不认了
const // 常量不可以修改
不写 // 函数内定义则是全局变量
函数的定义
第一种
function f1(){
console.log('f1')
}
f1();
第二种
let f2(){
console.log('f2')
}
f2();
第三种(箭头函数)
let f3 = () => {
console.log('f3')
};
f3();
箭头函数
如果箭头函数没有函数体,只有返回值
let f4 = (n1,n2) => {
return n1 + n2;
}
可以写成
let f4 = (n1,n2) => n1 + n2;
let res = f4(10,25);
console.log(res)
如果兼有函数参数列表只有一个,可以省略括号()
let f5 = num => num * 10;
let res = f5(10);
console.log(res);
重点:
function/箭头函数/方法都具有本质区别
<script>
let obj = {
name: 'Jerry',
// function
eat: function (food) {
console.log(this.name + '在' + food)
// 箭头函数 (this不找当前调用者,找调用者的父一层)
eat: food => {
console.log(this)// 指向window
console.log(this.name + '在' + food) //箭头函数this不能指向上层
// 方法
eat (food) { // 方法的语法
console.log(this);
console.log(this.name + '在' + food) }
};
obj.eat('123')
---------------------------------------------------------
new Vue({
data: {
res: ''
},
methods: {
fn () {
// axios插件
let _this = this;
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(function (response) {
_this.res = response.data;
})
},
fn1 () {
// axios插件
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(response => {
this.res = response.data;
})
}
}
})
</script>
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<p class="box" :style="{backgroundColor: bgc}"></p>
<input type="button" value="红" @click="c_red">
<input type="button" value="黄" @click="c_ye">
<input type="button" value="蓝" @click="c_bl">
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgc:'white'
},
methods:{
c_red(){
this.bgc = 'red'
},
c_ye(){
this.bgc = 'yellow'
},
c_bl(){
this.bgc = 'blue'
},
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div id="wrap" :style="{backgroundColor: bgc}" @click="change_c"></div>
<span>{{ count }}</span>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgc:'blank',
count:0,
colorArr:['pink','green','cyan']
},
methods:{
change_c(){
let n = this.count++;
this.bgc = this.colorArr[n % this.colorArr.length]
}
}
})
</script>
</html>