目录
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)
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
