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不会调用）,

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