1.Vue基础语法
Vue实例
Vue是一个基于JvaScript的、自底向上的、渐进式的、前端开发框架
构建的项目主要是以Vue实例为核心,和页面视图之间进行数据双向绑定,通过组件化的方式开发前端项目的框架
Vue实例配置
el:挂载的HTML节点,可以通过$mount(‘#app’)函数的方式替换
data:挂载的数据
methods:挂载的普通函数
filters:挂载的私有过滤器
watch:挂载的侦听器
computed:挂载的计算属性
components:挂载的私有组件
beforeCreate():生命周期函数/生命周期钩子
created()
beforeMount()
mounted()
beforeUpdate()
updated
beforeDestory()
destoryed()
activated() 组件缓存时才会出现的生命周期钩子
deactivated() 组件缓存时才会出现的生命周期钩子
挂载:标识一个对象和另一个对象之间添加了某个特定的关联关系,并将对象加载到内存中使用的过程
Vue指令
v-text/v-html/v-once
v-if/v-show
v-if/v-for
v-on
v-model
Vue事件和函数
v-on绑定事件
Vue实例中:methods声明事件触发的函数
Vue过滤器
全局过滤器
Vue.filter(‘过滤器名称’,(dat)=>{处理函数})
私有过滤器/局部过滤器
...
filters:{
'过滤器名称'(dat){
处理函数
}
}
...
Vue侦听器
声明在实例的watch选项上
new Vue({
watch:{
监听的变量:{
handler(newValue,oldValue)
},
deep:true //深度监听
}
})
Vue计算属性
声明在实例的computed属性上
new Vue({
computed:{
计算属性名称() {
处理数据的运算
}
}
})
Vue组件
组件是Vue的核心,包含全局组件、局部组件(私有组件)
Vue组件的传值
父子传值:自定义属性
子父传值:自定义事件
组件间传值:自定义事件构建的事件中心
2.组件间数据传递
(示例只展示核心代码)
1.父组件给子组件传递数据
父组件:Parent.vue
...
<p>父组件中的数据:{{pData}}</p>
<Child :msgFromParent='pData' />
...
子组件:Child.vue
<p>接收来自父组件的数据{{msg}}</p>
...
props:['msgFromParent'],
data(){
return {
msg:this.msgFromParent
}
}
...
注意:不推荐子组件中,直接通过自定义属性名称修改父组件传递的数据
自定义属性数据是单向绑定
通过自定义属性名称修改数据不会同步父组件中数据,修改失败
通过自定义属性名称修改数据导致数据发生混乱,不推荐(可以通过计算属性或函数将数据计算之后渲染到页面)
关于自定义属性的使用:
数组格式使用方式比较常见,编写方式最为简洁,一般数据的争取欸选哪个校验都会放在HTML中直接处理
对象格式使用方式比较常见,编写的时候需要注意类型校验和默认值问题
2.子组件传值给父组件
子组件通过自定义事件的方式给父组件进行数据传递
子组件:Child.vue
<button @click="trasnferData">传递数据给父组件</button>
...
data(){
return{
cdata:'子组件数据'
}
},
methods:{
transferData(){
//触发子组件中的自定义事件
this.emit('child-event',this.cdata)
}
}
...
父组件:Parent.vue
<Child @child-event='getData'></Child>
<p>{{msg}}</p>
...
data(){
return{
msg:''
}
},
methods:{
getData(...args) {
this.fromChild = args
}
}
...
3.组件之间互相传递数据
事件中心:本质上就是相当于中间对象处理数据,发送数据和接收数据保障都是同一个对象在操作(vm.js)
import Vue from 'vue'
const vm = new Vue()
export default vm
发送数据的组件
import vm from 'vm'
vm.$emit(事件名,数据)
接收数据的组件
import vm from 'vm'
getData(){
vm.$on(事件名,(...args)=>{
this.msg = args
})
}
created() {
this.getData()
}
3.插槽
使用场景:列表展示部分视图结构一模一样,但事实部分数据格式和视图样式有差异,Vue插槽可以让不同的视图内容部分,由组件的使用者决定具体的内容展示,将内容通过闭合标签内容的方式插入到插槽位置
1.匿名插槽
创建组件 Demo.vue
<div>
<!--组件中预留的插槽位置,使用组件时传入的内容,会自动替换到指定的位置-->
<slot></slot>
</div>
包含插槽的组件使用
<Demo>
<!--闭合标签内部的内容,用于替换插槽中的内容-->
<button>点我</button>
</Demo>
2.具名插槽
项目中的组件,大部分情况下差异化视图位置不止一处,Vue中提供了插槽的扩展操作:具名插槽
<header>
<slot name='header'></slot>
</header>
<footer>
<slot name='footer'></slot>
</footer>
具名插槽的使用
<Demo>
<template v-slot:header>
替换插槽 name=header内部的内容
</template>
<template #footer> <!--#插槽的简写形式-->
替换插槽 name=footer内部的内容
</template>
</Demo>
3.作用域插槽
项目中使用插槽出现一个程序执行的逻辑问题,页面中可能由于插槽的存在,导致对应组件的数据无法正常操作
Vue针对插槽中需要操作数据的情况,提供了作用域插槽,可以通过插槽属性进行数据的传递
<slot :row='user' :my-name='user.name'></slot>
父组件中使用插槽
<!--prop中式slot标签的属性和值的对象数据-->
<template v-slot='prop'>
<button @click='edit(prop)'>编辑</button>
</template>
4.ref DOM操作
尽管Vue中不建议操作DOM,但是就项目的复杂性而言,不可避免的会出现需要执行DOM操作的内容,Vue提供了一个引用操作ref属性,专门用于DOM操作功能的支持,可以操作普通标签,也可以操作组件数据
<img ref='logo' src='index.jpg'>
<button @click='getRefs'>点击获取refs</button>
...
getReft(){
let img = this.$refs.logo
img.style.width = '300px'
}
...
5.第三方插件的使用
前端开发中Vue经常需要依赖第三方插件如jQuery等,第三方组件/模块都提供了基于Vue环境的插件可以下载安装并使用
npm install jQuery -S
import $ from 'jQuery'
...
$('img').animate({width:300,height:300},2000)
...
若一个项目中jQuery需要在大部分组件中使用,单页面引入的方式就会比较繁琐,此时可以在入口文件上,将jQuery挂载给Vue的原型对象,在任何Vue实例页面中都可以直接使用jQuery
import $ from 'jQuery'
//挂载到Vue的原型对象
Vue.prototype.$ = $