vue基础语法学习-一一网

vue基础

vue 是什么

vue是一套渐进式的javascript框架,用于构建用户界面

什么是渐进式

渐进式:就是逐渐增强,可以在项目中使用一部分vue的功能,也可以使用整个vue全家桶来管理整个项目

什么是框架

框架是一套完整的解决方案,有一定的规则,使用时需要遵守框架的规则.

什么是MVVM

MVVM是一种软件架构模式

M:model数据模型(ajax获取的数据)

V:view视图(页面)

VM:ViewModel视图模型

MVVM通过双向数据绑定,可以让数据自动的双向同步,不需要在操作DOM

什么是组件化思想

**组件化:**一个组件包含(html+css+js),把一个完整的页面拆分成多个组件构成.

vue开发都是组件化开发,将一个完整的页面根据功能分割成一个一个的小组件

组件的优点:1.易维护2.可复用

vue基础语法

插值表达式

语法:{{变量名或者数据}}

支持三元运算符,可以使用表达式,不能用于标签属性中

代码实例:

<templete>

	<div>
    	{{msg}}
    </div>

</templete>

<script>
	data(){
        return{
            msg:"hello Vue"
        }
    }

</script>
复制代码

vue指令–v-bind

作用:动态设置属性的值

语法:<a v-bind:href="https://juejin.cn/post/url"></a>

简写::href="https://juejin.cn/post/url地址"

vue指令–v-on

作用:注册事件

语法:<button v-on:click="函数名或者要执行的少量代码"></button>

简写:@click="函数名"

常见的修饰符:

.prevent阻止默认行为
.stop 阻止冒泡

获取事件对象

分为2种情况:

事件函数没有传参,methods里的函数可以直接使用e接收
事件函数传参了,需要使用 $event;`@click=fn(参数1,$ event)`

按键修饰符

常见有.enter 回车,.esc返回.监听是否是这个按键被触发

v-if 和v-show:盒子显示与隐藏

v-if=”布尔值”,原理:频繁的动态创建删除元素节点

v-show=”布尔值”,原理:设置css样式,display:none;

v-model

作用:用于表单元素,设置数据双向绑定

注意:v-model 会忽略掉表单元素原本的value, checked等初始值

v-model的修饰符

number:可以自动的将用户输入的值转换成数字,弱无法转换,则会返回原始的值
tirm:自动过滤用户输入的首尾空白字符
lazy:会在chang时而非input时更新

v-text&v-html

v-text类似于innertext,插入数据时,不会解析标签

v-html类似于innerHTML,会解析标签

v-for循环

作用:遍历数组和对象

语法:v-for="(item,index) in 数组" :key="唯一的值"

设置key值,可以提高虚拟dom的对比复用性能

什么是虚拟DOM

虚拟dom:本质上是一个个保存了节点信息,属性和内容,用来描述真实dom的JS对象;

vue就地复用策略:vue会尽可能的就地(同层级,同位置),对比虚拟dom,复用旧的dom结构,进行差异化更新

什么是diff算法

策略1:

同层级根元素比较,如果根元素变化了,就不会复用,直接删除重建

如果根元素不变,对比出属性发生变化才考虑往下递归复用
策略2:

对比同级兄弟元素时,默认按照下标对比复用,指定了key’的话,按照相同key的元素进行对比

v-bind对样式处理的增强

对class的增强

:class=”{类名1:布尔值}”,布尔值为true时添加类,false移除类

:class=”[类名]”,添加数组中的类
对style的增强

:style=”{属性名:属性值}”

vue进阶语法

过滤器

过滤器(Filters):常用于文本的格式化,可以用在插值表达式和v-bind属性绑定

使用方法:通过 | 管道符,进行调用;譬如:{{ msg | 过滤器 }}

如何定义过滤器:

局部过滤器:只能在当前组件内调用

export default {
	filters:{
    	方法(){
            函数内容
        }
    }
}
复制代码

全局过滤器:注册在main.js中,可以在各个组件中使用

Vue.filter("过滤器",function(){
    方法内容
})
复制代码

计算属性

**computed:**计算属性是一个属性,写法上是一个函数,必须有返回值

特点:计算属性计算之后会把结果缓存起来,如果没有变化,多次使用计算属性,会直接使用缓存的结果,会提高性能

计算属性的用法:

简写模式:
computed:{
    函数(){
        return 操作得到的结果
    }
}

完整写法:
computed:{
    方法(){
    	get(){
            return  结果
        },
        set(){
            ...
        }
    
    
    }
}
复制代码

事件监听

watch:当需要监听的数据是否发生变化,就要使用watch

语法:

watch:{
	//需要监听的数据
    list:{
        deep:true//如果需要监听的是复杂数据类型,需要设置deep为true
        handler(value){//value为监听到的变化后的数据
            
        }
}
复制代码

组件化开发

什么是组件化开发

组件化开发:利用封装的思想,将可重用的部分封装成组件,方便开发与维护.

组件注册

组件注册分为全局注册和局部注册,注意注册的组件名不能与内置的标签重名

组件命名有两种方式,推荐使用第二种

短横线命名法: hm-header
大驼峰命名法: HmHeader

局部注册:只能在当前组件内使用

语法:

引入组件:
import 组件名 from  组件所在地址
export default {
	components:{
		组件名:组件
	}
}
复制代码

全局注册:在main.js中引入组件

全局注册:
Vue.component(名字,组件)
复制代码

解决组件样式冲突

默认情况下,卸载组件内的样式会全局生效

给局部注册的组件添加scoped属性会使得样式只有当前组件的元素才会生效;

原理:会自动添加一个自定义属性,添加scoped之后,样式选择也会加上这个对应的属性选择器

组件通信

父传子-props通信

父组件给子组件添加属性

// father.vue
<Son :title="info" price="100"></Son>
复制代码

子组件通过props接收对应的属性

//Son.vueexport default {    props:{        title:{            type:String,            default:"hello",            required:true        },        price:{            type:Number,            required:true        }    }}
复制代码

单向数据流

vue遵循单向数据流原则:

1.父组件数据发生变化会影响子组件的数据

2.子组件不能直接修改父组件的传过来的数据,props只读

注意:即使修改了也不会报错,但应该避免

子传父-$emit

子组件通过 this.$emit(事件名,参数)触发事件,并传参,将需要修改的数据传给父组件进行操作修改

this.$emit("changeState",1);
复制代码

父组件需要在子组件上注册一个自定义事件,事件名称与子组件传过来的事件名保持一致

//father.vue<Son  @changState="changeSt"></Son>export default {    methods:{        changeSt(){            ...        }    }}
复制代码

生命周期函数

生命周期函数:是vue框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行

组件的生命周期分为3大类:

初始化阶段(数据初始化+dom渲染)
运行阶段(数据更新)
销毁阶段(组件销毁)

生命周期函数有8个,主要关注create和mounted

1.beforeCreate:data数据初始化之前,组件还没数据

2.created:数据初始化之后,已经获取到组件的数据

3.beforeMount:DOM渲染之前,dom还未渲染

4.mounted:DOM渲染之后,可以操作DOM

5.beforeUpdate:数据更新,DOM更新前

6.updated:数据更新,DOM更新购

7.beforeDestroy:组件销毁前

8.destroyed:组件销毁后

axios

axios底层是是ajax,通过promise封装的

基本使用语法:

//先安装 axios   yarn add axios// 引入axiosimport axios from axiosaxios({    method:"get",//get,post    url:"地址",    //数据 分给get 与 post请求    data:{//post请求时,拼接到请求体        ...    },        params:{//get请求时,拼接到请求行            ...        }}).then().catch()
复制代码

组件进阶

$refs与ref

通过ref与$refs可以获取dom元素或者组件实例

只需要给需要获取的元素或组件添加ref属性,然后通过this.$refs.xx获取

$nextTick

因为vue是异步DOM更新的(可以提升渲染效率),有时候执行完数据更新,实际dom还未渲染成功

使用$nextTick可以等组件的dom刷新之后,在执行callback函数,保障能够操作到最新的dom元素

dynamic 动态组件

多个组件使用同一个挂载点,动态切换

语法:<component :is="组件名"></component>

通过动态改变组件名的值,实现动态切换

使用keep-alive可以缓存组件,切换组件不会销毁(默认切换动态组件会被销毁,然后再重建)

插槽

slot插槽相当于占位符,占住一个位置

插槽的作用:实现组件的内容分发,可以接受写在组件标签内的内容

默认插槽

如果没有传内容:<slot>默认内容</slot>会显示默认的内容

具名插槽

使用插槽时给插槽起名字

<slot name="header"></slot>

在父组件中使用templete包裹住需要传递的内容,通过#插槽名.指定将内容分发给谁

<templete #header>	<h1>我是header内容</h1></templete>
复制代码

作用域插槽

通过作用域插槽可以以添加属性的方式传值

<slot :yes="yes" money:100></slot>//添加的属性会被收集到一个对象中{yes:'',money:100}//通过templete中的 #插槽名 = "obj"接收
复制代码

自定义指令

derective

directives: {  // 自定义一个局部指令  color: {    // 指令所在的元素渲染的时候    inserted (el, {value}) {      el.style.color = value    },    // update指令的值改变时触发, binding.value指令的值修改触发    update (el, binding) {      el.style.color = binding.value    }  }}
复制代码