vue2.0---vue基础（vue基础与axios）_vue双键

一、Vue简介

1.Vue的特性

①数据驱动试图
在使用了Vue的页面中，Vue会监听数据的变化，从而自动重新渲染页面的结构。
好处：当页面数据发生变化时，页面会自动渲染。
注：数据驱动试图是单向的数据绑定。
②数据双向绑定
在网页中，form表单负责采集数据，Ajax负责提交数据。
好处：开发者不再需要手动操作DOM元素，来获取表单元素最新的值。

2.MVVM

（1）定义

是实现数据驱动试图和双向数据绑定的核心原理；指的是model、view、viewModel
model：表示当前页面渲染时所依赖的数据源；
view：表示当前页面所渲染的DOM结构
viewModel：表示Vue的实例，是MVVM的核心

（2）工作原理

当数据源发生变化时，会被viewModel监听到，VM会根据最新的数据源自动更新页面的结构；
当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的值自动同步到model数据源中。

二、Vue的基本使用

（1）导入Vue的基本文件vue.js
（2）创建vue的实例对象

三、vue的指令与过滤器

（一）指令

指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

（1）内容渲染指令

渲染都没元素中的文本内容
常用内容渲染指令
①v-text
缺点：覆盖元素原有的内容。
②{{ }}插值表达式
内容占位符，不会覆盖原有的内容，不能用在元素的属性节点中。
③v-html
可以把带标签的字符串渲染为真正的HTML内容。

（2）属性绑定指令

v-bind:+属性名 可简写为:+属性名

（3）事件绑定指令

v-on:+事件名 可简写为@事件名

①事件修饰符

$event

event.preventDefault(); 禁用事件默认行为，阻止冒泡等（比如默认刷新），在异步时常用
@事件名=方法名($event);
例：

post(event){
	event.preventDefault();
}
1
2
3

另外一种写法
@事件名.prevent=“方法名”

self

禁用默认，阻止冒泡
第一种：@click.prevent.stop=“方法名”;
默认情况为冒泡模式（由子级到父级执行事件）。
第二种：@click.self=“方法名”;
点击自己时触发事件，点击子元素时不触发即取消冒泡触发。
也可采用捕获模式，先捕获父级事件，执行后再执行子级事件：
@click.capture=“方法名”;

once

只生效一次
第一种：@click.prevent.stop.once=“方法名”;

②键盘修饰符

@keyup.键盘码/键盘名
回车：@keyup.13/enter tab：@keyup.tab
双键：@keyup.键盘名.第二个键键盘码

③鼠标事件修饰符

左键：@click.left @contextmenu.prevent

（4）双向绑定指令

v-model 在不操作DOM元素时，快速获取表单中的数据；
与表单控件一起使用

input

<input type="text" v-model="formdata.title">
1

CheckBox

多选，需把type定义为数组
可使用v-for进行数据动态绑定

<select v-model="formdata.cid">
    <option value="">请选择</option>
    <option v-for="item in category" :value="item.id">{{item.title}}</option>
</select>
1
2
3
4

<input type="checkbox" v-model="formdata.type" value="draft">
<input type="checkbox" v-model="formdata.type" value="send">
1
2

radio

可使用v-for进行数据动态绑定

<select v-model="formdata.cid">
    <option value="">请选择</option>
    <option v-for="item in category" :value="item.id">{{item.title}}</option>
</select>
1
2
3
4

<input type="radio" v-model="formdata.type" value="draft">
<input type="radio" v-model="formdata.type" value="send">
1
2

select

使用v-for进行数据动态绑

<select v-model="formdata.cid">
    <option value="">请选择</option>
    <option v-for="item in category" :value="item.id">{{item.title}}</option>
</select>
1
2
3
4

category:[
    {cid:1,title:'新闻'},
    {cid:2,title:'报纸'},
    {cid:3,title:'博客'},
    {cid:4,title:'摘要'},
    {cid:5,title:'其他'},
],
1
2
3
4
5
6
7

多选时添加属性multiple，设置选项上限，添加属性size=“”，cid需定义为数组

表单修饰符

number
将string变为number类型；type="number"是只允许输入数字，里面值的类型依旧是string

<input type="text" v-model.number="formdata.num">
1

trim
去除空格

<input type="text" v-model.trim="formdata.title">
1

lazy
懒更新或懒加载
例如光标移出时更新

<input type="text" v-model.trim.lazy="formdata.title">
1

（5）条件渲染指令

v-if与v-show
控制元素的显示与隐藏
v-if v-else-if v-else（写在标签里） 与 if elseif else 类似（写在方法里）
v-if：隐藏时删除dom元素；
v-show：隐藏时不删除，添加dispaly：none；性能更好。

（6）列表渲染指令

v-for
可直接操作数值：v-for=“item in 20”
key:数组序号，按需决定

<li v-for="(item,key) in/of 数组名" :key="item.id"></li> 
1

v-for操作数组与对象
操作对象：v-for=“(item,key,index) in 对象名” 其中item为对象的值，key对应对象的key，index为对象下标。
注意：建议加上:key属性，尽量把id作为key的值，key的值为字符串或者数字类型；必须具有唯一性。
优点：提升性能，防止列表状态紊乱。

（二）过滤器（filters）

常用于文本的格式化，插件表达式与v-bind属性绑定，由管道符“|”进行调用，过滤器中一定要有一个返回值。
在过滤器的形参中可以获取到管道符前面待处理的值。
注：在vue3.0中已经不再使用。

私有过滤器和全局过滤器

在filters节点下定义的过滤器称为私有过滤器，只能在当前VM实例所控制的el区域内使用。
如需要在多个VM实例中共享过滤器，则需要按如下方法定义过滤器。
示例：首字母大写
capitalize：全局过滤器的名字，可以自己取。

Vue.filter('capitalize',(str)=>{
	return str.chartAt(0).toUpperCase()+str.slice(1);
})
1
2
3

如果全局过滤器与私有过滤器名字重复，采用就近原则调用

四、侦听器（watch）

监听数据的变化，从而针对数据做特定的操作。
username：需要监听的值，数据名作为监听值。
newVal：变化后的新值；oldVal ：变化之前的旧值。

data:{
	username:'',
},
watch：{
	username(newVal,oldVal){
		console.log(newVal,oldVal);
	}
}
1
2
3
4
5
6
7
8

（一）方法格式的侦听器

缺点：无法在刚进入页面的时候，自动触发。

（二）对象格式的侦听器

好处：
①可以通过immediate选项，让侦听器自动触发。
②可以通过deep选项，让侦听器深度监听对象中每个属性的变化。

data:{
	username:'admin',
},
watch：{
	username:{
		handler(newVal,oldVal){
			console.log(newVal,oldVal);
		},
		//默认值为false，控制侦听器是否自动触发一次
		immediate:true
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

（三）深度侦听（deep）

data:{
	info:{
		username:'admin',
	},
},
watch：{
	info:{
		handler(newVal,oldVal){
			console.log(newVal,oldVal);
		},
		//只要对象中任何一个属性发生变化，就会触发对象监听器
		deep:true
	},
	//如果要监听的是对象的子属性的变化，则必须包裹一层单引号
	'info.name'(newVal,oldVal){
		console.log(newVal,oldVal);
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

五、计算属性（computed）

通过一系列运算，最终得到一个属性值，可以在模板和method使用。

<div class="box" :style="{background:rgb}"></div>
1

data:{
	r:0,g:0,b:0
},
computed：{
	rgb(){
		return 'rgb(&{this.r},rgb(&{this.g},rgb(&{this.b})'
	}
},
methods:{
	show(){
		console.log(this.rgb)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

特点：
①定义时要定义为方法；
②在使用计算属性时，当普通的属性使用即可。
好处：
①实现了代码的复用；
②只要计算属性中依赖的数据源发生变化，则计算属性会自动重新求值。

六、axios

axios是一个专注于网络请求的库；
返回的结果是一个promise对象；
基本语法：

axios({
	method:'请求的类型',//post get
	url:'请求的URL地址',
}).then((res) => {
	//请求成功之后的回调函数
	//res是请求成功之后的结果
})
1
2
3
4
5
6
7

（一）post

post请求：用data:{}
发起post请求

axios({
	method:'post',
	url:'请求的URL地址',
	data：{
		id:'1'
	}
}).then((res) => {
	//请求成功之后的回调函数
	//res是请求成功之后的结果
})

axios.post('url地址',{
	data：{
		id:'1'
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

（二）get

get请求：用params:{}，参数为URL参数
发起get请求

axios({
	method:'get',
	url:'请求的URL地址',
	params：{
		id:'1'
	}
}).then((res) => {
	//请求成功之后的回调函数
	//res是请求成功之后的结果
})
axios.get('url地址',{
	params：{
		id:'1'
	}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

（三）post与get的区别

① get请求一般用来请求获取数据；post请求一般作为发送数据到后台；
② get传参到后台会显示在地址栏，安全性低，且长度有限制；post是将参数放在request body中，安全性更高；
③ get请求刷新浏览器或者回退没有影响；post会重新请求一遍；
④ get请求可以被缓存，并保留在浏览器的历史记录中；post不会
⑤ get请求通常是通过URL地址；post请求常用于form表单请求