vue学习笔记——篇3

1.绑定计算后数据，三种方式：

》1.红色框，通过method

》2.黄色框，通过computed

》3.蓝色框，通过watch

推荐computed，vue对computed做了缓存，只有用到的数据有改变时，才会调用；

method中，只要有数据改变（比如number），就会调用，在数据和业务逻辑复杂时，严重降低了性能；

watch方法，代码量多一倍，一般用于检测数据变化。

2.watch监听对象内部属性，两种方法：

》1.绿色框

　　通过deep属性，vue会遍历对象的每个属性，并为每个属性绑定上监听函数，不推荐

》2.蓝色框

　　通过字符串形式，直接监听属性值，推荐

3.v-for，每一个循环出来的标签要绑定一个key，用于缓存。

　　一般和服务器中列表的id是对应的，

　　不要用index，列表的顺序和列表的内容没有什么关系，可能会导致缓存错误的内容。

4.checkbox复选框绑定值

》1.利用v-model绑定数据

　　data: {

　　　　active: true

　　},

　　template:`

　　　　<input type="checkbox" v-model="active" />

　　`,

　　选中状态和数据中的active是动态绑定的。

》2.利用v-model和v-bind:value，使用数组控制一组checkbox

　　data:{

　　　　arr: [1,2,3]

　　},

　　template: `

　　　　<p>

　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="1" />
　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="2" />
　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="3" />
　　　　　　<input　　 type="checkbox" 　　v-model="arr"　　:value="4" />

　　　　</p>

　　`,

　　前三个是选中状态，最后一个没有选中。由arr中的值确定是否选中。

5.v-once指令，用于标签内是一些静态内容，避免vue再对其进行检测，节省部分性能开销。

6.vue实例创建方式，两种：

》》1.普通

　　new Vue({

　　　　el: "#root",

　　　　data: {},

　　　　...

　　});

》》2.继承自定义组件

　　*********************

　　组件扩展的两种方式

》》1.如上面截图

》》2.extends关键字

　　new Vue({

　　　　extends: vueComp,

　　　　el: "#root",

　　　　...

　　});

　　组件中的覆盖、依次执行情况、props属性的定义方式和上图一样，

　　一般用于大型项目中对公共组件的扩展。

7.父子组件之间的双向数据绑定

父子组建双向数据绑定，绑定的是父组件的数据和子组件的属性，需要指定。

按照一般思路，父组件中的模版这样定义：

<my-comp　　:value="value"　　@input="value=arguments[0]"></my-comp>

这里简写成：

<my-comp　　v-model="value"></my-comp>

v-model 处理了两个操作，

　　绑定value属性为父组件中的数据；（默认为value）

　　监听input事件并将数据传递给父组件数据。（text类型input默认为input事件，如果是checkbox为change）

子组件中定义model选项：

　　model: {

　　　　prop: a,

　　　　event: click

　　}

改变v-model指令默认的属性名和事件名，例：

8.跨级父子组件之间需要通信，采用provide / inject声明，例子：

有几个特殊情况：

》》1.

会报错，this是undefined，报错原因：provide创建时vue实例还没有创建完，

把provide写成函数返回对象的形式可以避免：

》》2.

value动态绑定，但通过input改变值时，通过provide/inject传递到下面的值并不会动态改变。

原因：provide/inject的数据没有reactive效果

解决办法：

通过Object.defineProperty，据说vue的双向数据绑定原理就是根据这个函数实现的，但是测试会报错，堆栈溢出？？？

9.template会被编译成render函数，方式如下：

》》子组件：

》》父组件

注意：slot标签直接编译为字符串，不再调用createElement.

》》》》》》》》》可以去掉组件中的on，直接在父组件中声明nativeOn，nativeOn会把事件绑定到子组件的根元素上，实例：

注意，如果写成：

nativeOn: {

　　click(){

　　　　this.clicked();

　　}

}

会报错this是undefined

10.路由参数的获取

　　this.$route.params.id

　　任意组件，只要在当前路径下，都有$route属性，都可以调用；

　　但是：如果子组件代码中使用了this.$route，只能做为route配置下的组件，不能做为其他地方也能用的组件，相当于组件与vue发生了耦合。

所以，推荐下面可以解耦的方式：

　　routes: [

　　　　{

　　　　　　path: "/app:id",

　　　　　　component: App,

　　　　　　props: true

　　　　}

　　]

　　// App组件中这样调用：

　　export default {

　　　　props:["id"],

　　　　mounted(){

　　　　　　this.id;

　　　　}

　　}

　　其中，routes中的props属性可以是布尔值，也可以是对象函数：

　　1.对象：手动强制指定id，只会更改传到组件的props中id的值

　　  props: {

　　　　id: "23333"

　　　}

　　2.函数：可以指定传递的计算后id

　　  props: (route)=>({ id: route.query.name});

　　　　　localhost:8080/#/app/2333?name=jhon&age=18

　　　　　返回的是jhon,

　　　　　当前路由信息对象会做为参数传给函数

11.命名视图

》》》》正常情况下：

　　.vue文件：

　　　　<router-view></router-view>

　　.routes文件：

　　　　{

　　　　　　path: "/app",

　　　　　　component: App

　　　　}

》》》》命名视图：

　　.vue文件：

　　　　<router-view></router-view>

　　　　<router-view name="abc"></router-view>

　　.routes文件：

　　　　{

　　　　　　path: "/app",

　　　　　　components: {

　　　　　　　　default: App, //没有名字的router-view对应default

　　　　　　　　abc: Login

　　　　　　}

　　　　}

命名视图常用于上面导航，左边菜单的情况（也可以用其他方式实现）

12.导航守卫（路由钩子函数）

》》》vueRouter实例的钩子函数：

　　（1） router.beforeEach = function(to, from, next) {};

　　（2） router.beforeResolve = function( to, from, next ){};

　　（3） router.afterEach = function( to, from, next ){};

》》》routes.js路由配置中的钩子函数：

　　{

　　　　path: "/app",

　　　　component: App,

　　　　beforeEnter (to, from ,next) {}

　　}

》》》组件中的钩子函数：

　　beforeRouterEnter: function( to, from, next){},

　　beforeRouterUpdate: function( to, from, next ){},

　　beforeRouterLeave: function( to, from, next ){}

导航守卫常用于 检测到没有登录时跳转到登录界面，next("/login")

组件中的beforeUpdate，当由页面 "localhost:8080/#/app/123" 跳转到页面"localhost:8080/#/app/456"时，只有id不同，

App组件只会触发beforeUpdate进行更新，不会触发beforeEnter，也不会触发mounted，

常用于在页面中监听传过来的id，如果不正确及时弹出错误信息。

　　beforeRouterEnter触发时，组件实例还没有创建出来，this是undefined，需要在next中指定参数为函数，并将当前实例对象做为参数调用：

　　beforeRouterEnter: function( to, from, next){

　　　　next( function( vm ){

　　　　　　vm.id;

　　　　});

　　}

beforeRouterUpdate中可以调用this.

beforeRouteLeave当离开当前组件，进入下一个组件之前调用（beforeRouteUpdate不会调用）,

常用于用户改变了表单，离开前提醒用户是否保存。