目录
Vue简单介绍
vue的核心开发理念----组件化开发,将每一个独立的功能 包括结构和逻辑都单独的提取出来
,方便团队开发vue是基于MVVM的js框架,完全简化了DOM的开发,实现了数据和视图的完全分离。
MVVM:Model - 负责数据存储 View - 负责页面展示 View-Model - 负责业务逻辑处理比如Ajax请求等,对数据进行加工后交给视图展示。
解决的问题:将业务逻辑代码与视图代码完全分离,使各自的职责更加清晰,后期代码维护更加简单。
规范
- 创建Vue对象
- 挂载DOM el:"#app"
- 视图展示数据:插值表达式{{}}
- 注册方法:methods(this对象在Vue中==Vue对象)
- 计算属性:computed(产生新属性,通过原本存在的属性,经过一系列的运算产生对应的新属性)
- watch属性:属性监听(当数据发生变化时,执行对应代码),不产生新属性而是执行对应方法,在逻辑复杂的条件下使用
指令
- v-on:(@):绑定事件
- v-html、v-text:改变标签内容
- v-bind:属性绑定(将属性的内容对应到data中的数据),样式绑定(:style=“{}”),class绑定(表达式添加或者三目判断式添加)
- v-model:双向数据绑定,视图可以直接驱动数据(仅限于表单)
- v-if+v-else:通过删除元素结构来显示对应内容,如果后续首页情况下有大量的切换内容或者切换过程中,每一个容器内部包含的内容不多时,选择用v-if;如果切换过程中,容器内部资源消耗过大,使用v-show
- v-show:通过display属性判断元素是否隐藏,元素结构已经渲染
- v-for:将对应数组直接在view中进行遍历输出对应内容(循环遍历中需要给每一个元素单独绑定一个可以,因为Vue中DOM操作都是在内部自己完成,key表示当前数据的唯一性,能够防止后续重复遍历,可以节约资源)
- v-once:基础优化——绑定给指定标签,作用域只渲染一次,并且内部数据不会再更新(例如电商标题)
- set方法:(操作的数据,改变的属性,改变的值),vue动态响应,当改变内容时,响应取消
用于动态修改数组内容,让修改的同时也能做到视图刷新
<!--阻止事件冒泡 .stop
阻止默认事件 .prevent
-->
<a href="http://www.baidu.com" @click.prevent="add()">百度</a>
<p @click="fun2()">
<span @click.stop="fun1()">hello</span> world
</p>
传值
父子组件传值
父级传给子级
第一步:需要在子组件内部,创建一个props选项 能够接受父组件的传值
第二步:通过属性绑定来传入
注意:
如果子组件中的数据是由父级直接传递过来的,想要更改的话必须更改 父组件中的数据
子组件如何改变父组件的数据——事件响应
需要调用指定的方法来进行修改
响应父级的事件,事件名称自定义this.$emit("add")
兄弟组件传值
由父级作为媒介,把需要改变的数据放到父级中
第一步:找到需要兄弟组件更改的内容放到对应的父级中
第二步:把数据传递给显示的组件
第三步:想要更改数据时,只需要改变父级中的数据就可以实现
bus总线
在整个vue原型中添加一个监听
只需了解,用于层级多的传值(什么传值都可以用,但是消耗资源过大)
第一步:创建bus总线,在原型中创建一个vue实例,用于监听事件响应
第二步:发送时间响应 this.bus.$emit()
第三步:生命周期函数 创建的组件到达某个阶段自动触发的函数 mounted()添加上对应的bus监听 this.bus.$on()
<body>
<template id="goods">
<div>
<button @click="addcount()">+1</button>
</div>
</template>
<template id="car">
<div>
{{count}}
</div>
</template>
<div id="app">
<goods></goods>
<car></car>
</div>
</body>
<script>
//由bus总线 :在整个Vue原型中 添加一个监听
//在原型中才创建一个vue实例,用于监听 事件响应
Vue.prototype.bus=new Vue()
Vue.component("goods",{
template:"#goods",
methods: {
addcount(){
//在事件中想要使用bus来传值,使用bus进行一个事件监听
//发送一个时间响应
this.bus.$emit("add")
}
},
})
//在car中 要监听bus总线上的 add事件
//监听写到 生命周期的函数 当组件到达某一个阶段时,自动触发的函数
//创建组件的时候 mounted() 就添加上对应的bus监听
Vue.component("car",{
template:"#car",
data:function(){
return {
count:1
}
},
mounted() {
//当组件创建完成后 自动调用
//监听对应的bus
this.bus.$on("add",()=>{
this.count++
})
},
})
let vm=new Vue({
el:"#app",
data:{
}
})
</script>
插槽
用于在组件定义时,如果没有插槽的情况下,结构过于固定;通过增加插槽的方式增加组件的复用性
动态组件
用于data变化时进行对应的组件切换,绑定一个is属性:绑定对应数据
注意:component 本身具有缓存功能
生命周期
Vue把整个组件生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期能帮助我们理解vue实例的运作机制,更好的合理利用各个钩子来完成我们的业务代码。
- beforeCreate:此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好。
//console一下实例的数据data和挂载元素el,代码如下:
console.log(this.$data); //是否有数据生成
console.log(this.$el); //是否挂载到了结构
- created:beforeCreate之后紧接着的钩子就是创建完毕created
- beforeMount:上一个阶段我们知道DOM还没生成,属性el还为undefined,那么,此阶段为即将挂载
- mounted:mounted也就是挂载完毕阶段,到了这个阶段,数据就会被成功渲染出来
- beforeUpdate:我们知道,当修改vue实例的data时,vue就会自动帮我们更新渲染视图,在这个过程中,vue提供了beforeUpdate的钩子给我们,在检测到我们要修改数据的时候,更新渲染视图之前就会触发钩子beforeUpdate
- updated:此阶段为更新渲染视图之后,此时再读取视图上的内容,已经是最新的内容
- beforeDestroy:调用实例的destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子
- destroyed:成功销毁之后,会触发destroyed钩子,此时该实例与其他实例的关联已经被清除,它与视图之间也被解绑
深拷贝与浅拷贝
【原数据】和【新数据】之间互相影响
浅拷贝
- 对象的逐位复制
- 创建一个新对象,该对象具有原始对象中值的精确副本
- 如果对象的任何字段是对其他对象的引用,则只复制引用地址,即复制内存地址。
- 【默认情况下引用类型(object)都是浅拷贝】
- 浅拷贝复制的是对象的引用地址,没有开辟新的栈,复制的结果是两个对象指向同一个地址,所以修改其中一个对象的属性,另一个对象的属性也跟着改变了
深拷贝
- 复制所有字段,并复制字段所指向的动态分配内存
- 深拷贝发生在对象及其引用的对象被复制时。
- 【默认情况下基本数据类型(number,string,null,undefined,boolean)都是深拷贝。】
- 深拷贝会开辟新的栈,两个对象对应两个不同的地址,修改对象A的属性,并不会影响到对象B
路由
vue中的跳转,vue单页面应用,用路由来实现组件的切换
路由切换不同的页面显示,不同的地址挂载到不同的组件
路由的传参
<body>
<template id="web">
<div>
{{$route.params.id}}
</div>
</template>
<div id="app">
<router-link :to="{name:'web',params:{id:2}}">web</router-link>
<router-link :to="{name:'web',params:{id:4}}">web</router-link>
<!-- 作用就是显示 当前路径挂载的组件的 -->
<router-view></router-view>
</div>
<script>
//创建一个路由对象
let router=new VueRouter({
routes:[{
path:"/web/:id", //想要实现参数的传递,想改变路径
name:"web",
component:{//挂载的组件
template:"#web"
}
}]
})
//Vue mvvm框架
//主要应用于 单页面应用 路由来实现组件的切换
// Vue.component("web",{
// template:"#web"
// })
let vm=new Vue({
el:"#app",
data:{
},
router:router
})
</script>
</body>
set方法
vue动态响应,当改变内容时,响应取消
提供了一个set方法,用于动态修改数组内容,让修改的同时也能做到视图刷新
//第一个参数 操作的数据
//第二个参数 改变的属性
//第三个参数 改变的值
Vue.set(this.numbers,2,33)