Vue入门

1.过滤器

是vue为开发者提供的功能，常用于文本的格式化

过滤器可以用在两个地方:茶壶表达式和v-bind属性绑定

过滤器应该被添加在JavaScript表达式的尾部，有"管道符"进行调用

<div id="app">message的值为:{{message | capi}}</div>

1.1注意点

要定义到filters节点下，本质是一个函数

在过滤器函数中，一定要有return值

在过滤器的新参中，就可以获取到"管道符"前面待处理的那个值

1.2私有过滤器和全局过滤器

在filters节点下定义的过滤器，称为"私有过滤器"，因为它只能在当前vm实例所控制的了区域内使用

如果想在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器

Vue.filter('capi',function(str){
	const first = str.charAt(0).toUpperCase()
	const other = str.slice(1)
	return first+other
})

注意点

如果全剧过滤器和私有过滤器名字一致，此时按照"就近原则"，调用的是"私有过滤器"

1.3格式化时间过滤器

//声明格式化时间的全局过滤器
	Vue.filter('dataFormat',function(time){
	//1.对time进行格式化处理，得到YYYY-MM-DD HH:mm:ss
	//2.把格式化的结果，return出去
		
	//直接调用dayjs()得到的是当前时间
	//dayjs(给定的日期时间)得到指定的日期
	const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
	return dtStr
})

需要导入dayjs的包

1.4连续的多个过滤器

过滤器可以串联使用，但是一般不推荐

{{ item.time | dataFormat |xxx|yyy|zzz}}

1.5过滤器传参

过滤器本质是JavaScript函数，因此可以接收参数

<p>{{message|filter(arg1,arg2)}}</p>

//第一个参数必须是管道符前面待处理的值
//从第二个位置开始接收过滤器传过来的参数
Vue.filter('filter',function(msg,arg1,arg2){

})

1.6兼容性

过滤器只有vue2和vue1支持，在vue3中剔除了过滤器的相关功能

2.侦听器

2.1watch侦听器

watch侦听器允许开发者坚实数据的变化，从而针对数据的变化做特定的操作

2.1.1方法格式的侦听器

watch: {
    //监听username值的变化
    //newVal是"变化后的值"，oldVAl是"变化之前的旧值"
    username(newval,oldVal){
        console.log(newVal,oldVal)
    }
}

注意

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

缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器

2.1.2对象格式的侦听器

优点1可以通过immediate选项，让侦听器自动触发

watch:{
	//定义对象格式的侦听器
	username:{
	//侦听器的处理函数
		handler(newVal,oldVal){
			console.log(newVal,oldVal)
		},
		//immediate选项的默认值是false
		//immediate的作用是:控制侦听器是否自动触发一次 	
		immediate: true
	}
}

2.1.2.1深度侦听

优点2：可以通过deep选项，让侦听器深度监听对象中的每个属性的变化

watch:{
	info:{
		handler(newVal){
			console.log(newVal)
		},
		//开启深度监听，只要对象中任何一个属性变化了，都会触发"对象的侦听器"
		deep:true
	}
}

2.1.2.2一步到位监听

//如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
'info.username'(newVal){
	console.log(newVal)	
}

3.计算属性

计算属性指的是通过一系列计算之后，最终得到一个属性值

这个动态计算出来的属性值可以被模块结构或methods方法使用

//所有的计算属性，都要定义到computed节点之下
//计算属性在定义的时候，要定义成"方法格式"
computed:{
	//rgb作为一个计算属性，被定义成了方法格式
	//最终，在这个方法中，要返回一个生成号的rgb(x,x,x)的字符串
	rgb:function(){
		return `rgb(${this.r},${this.g},${this.b})`
	}  
}

特点：

定义的时候，要被定义为方法

在使用计算属性的时候，当普通的属性使用即可

好处：

实现了代码的复用

只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值

4.axios

axios是一个专注于网络请求的库

4.1axios基本使用

4.1.1发起GET请求

axios({
	//请求方式
	method:'get',
	//请求地址
	url:'http://www.liulongbin.top:3006/api/getbooks',
	//URL中的查询函数
	param:{
		id: 1
	}
}).then(function(result){
	console.log(result)
})

4.2.2.发起POST请求

//如果调用某个方法的返回值是Promise实例,则前面可以添加await
//await只能用在被async修饰的方法中
const result = await axios({
	method: 'POST',
	url: 'http://www.liulongbin.top:3006/api/post',
	data:{
		name:'zs',
		age:20
	}
})
console.log(result)

4.3解构赋值

document.querySelector("#btnGet").addEventListener('click',async function(){
	//解构赋值的时候，使用:进行重命名
	//1.调用axios之后，使用async/await进行简化
	//2.使用解构赋值，从axios封装的答对象中，把data属性解构出来
	//3.把解构出来的data属性，使用冒号进行重命名，一般都重命名为{data:res}
	const {data:res} = await axios({
		method:'get',
		url:'http://www.liulongbin.top:3006/api/getbooks',
	})
	console.log(res.data)
})

4.4axios.get

const {data:res} =await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
	params:{id:1}
})
console.log(res)

4.5axios.post

const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name:'zs',gender:'女'})
console.log(res)

5.单页面应用程序

指的是一个web网站中只有唯一的一个HTML页面，所有功能与交互都在这唯一的一个页面内完成

6.vue-cli

是Vue.js开发的标准工具,它简化了程序员基于webpack创建工程化的Vue项目的过程

安装

npm install -g @vue/cli

在终端下运行如下的命令，创建指定名称的项目

vue create 项目名称

名称建议纯英文

 

 

 

 

 把babel、ESLint等插件放到自己独立的配置文件中

6.1vue项目中src目录的构成

assets文件夹：存放项目中用到的静态资源文件，例如css样式表、图片资源

components文件夹：程序员封装的、可复用的组建，都要放到components目录下

main.js是项目的入口文件，整个项目的运行，要先执行main.js

App.vue是项目的根组件

6.2vue项目运行流程

在工程化的项目中，vue要做的水群去哪个很单纯，通过main.js把App.vue渲染到index.html的指定区域中

App.vue用来编写待渲染的模块区域

index.html中需要预留一个el区域

main.js把App.vue渲染到了index.html所预留的区域中

7.vue组件

组件开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目开发和维护

7.1vue中的组件化开发

vue是一个支持组件化开发的前端框架

vue中规定：组件的后缀名是.vue

之前接触到的App.vue文件本质上就是一个vue的组建

7.2vue组件的三个组成部分

每个.vue组件都由3各部分组成，分别是：

template -> 组件的模板结构

<template>
	<div class="test-box">
		<h3>这是用户自定义的Test.vue---{{username}}</h3>
	</div>
</template>

script -> 组件的JavaScript行为

<script>
//默认导出。这是固定写法
export default{
	//data数据源
	//注意 .vue组件中的data不能像之前一样，不能指向对象
	//注意 组件中的data必须是一个函数
	data(){
		//这个return出去的{}中，可以定义数据
		return {
			username: 'admin'
		}
	}
}
</script>

style -> 组件的样式

<style>
.test-box{
	background-color: pink;
}	
</style>

7.3启用less

<style lang="less">
.test-box{
	background-color: pink;
	h3{
		color: red;
	}
}	
</style>

标签：axios,入门,vue,侦听器,Vue,过滤器,data,属性
来源： https://blog.csdn.net/weixin_52993606/article/details/120580414