本文已参与「新人创作礼」活动，一起开启掘金创作之路。

侦听器

watch侦听器

监听值的变化情况，可以用作监听新建的用户名是否被使用

immediate

作用于侦听器是否自动触发一次

deep

开启深度监听，对象中任一属性变化都会触发侦听

计算属性

定义

指通过一系列运算后，最终得到的一个属性值。

computed

计算属性定义时，需要定义为方法。实现了代码的复用，依赖的数据源发生变化，计算属性的值会发生重新计算。

axios

定义

专注于网络请求的库

基本使用

// 一个promise对象
const result = axios({
    method:'get',
    url:'url_str',
    //URL 中的参数
    params:{},
    //请求体中的参数
    data:{}
})
/*
	axios 会为 请求结果套一层结构，真实请求内容在data中
	{
		config:{},
		data:{},
		headers:{},
		request:{},
		status:xxx,
		statusText:''
	}
*/

result.then(res=>{
	console.log(res.data)    
})

// 调用返回结果为promise的方法时，前面可以添加await
// await 只能用在被async修饰的方法中

var result = await axios({...})
console.log(result)

vue-cli

单页面应用程序

一个web网站中只有唯一一个HTML页面

vue 组件

组件化开发

组件的三个组成部分

template->组件的模板结构
script->组件JavaScript行为
style->组件的样式

<script>
	export default{
        data(){
            return{
                str:''
            }
        }
    }
</script>

组件之间的父子关系

使用组件的三个步骤

import name from '@/url...'
使用components节点注册组件
使用组件的标签

注册全局组件

在vue项目的main.js入口文件中，通过vue.component()方法，可以注册全局组件

import name from '@/url...'

Vue.component('Name', name)

组件的props

用于父组件向子组件传值使用，数组类型

props:['a','b']

props是只读的，只能用作数据展示用

props:{
    filedName:{
        default: 0,
        type: Number,
        required: true // 必填校验
    }
}

组件样式冲突

scoped 对样式增加范围限制

样式穿透

/deep/ 父组件的样式穿透给子组件

Vue学习 第三天