vue学习笔记

v-cloak

可解决插值表达式闪烁问题

• 不需要表达式
• 用法：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的                                        Mustache 标签（ {{Mustache}}插值 ）直到实例准备完毕。

html
<div id="app">
  <p v-cloak>{{msg}}</p>//不会显示，直到编译结束。
<div>

css
[cloak]{//属性选择器[]
  display:none  
}

javascript
var vm=new Vue({
   el:"#app" ;
   data:{
      msg:"hello"
   } 
})

v-text

• 更新元素中的 textContent
• 没有闪烁问题
• 覆盖元素中原本的全部内容，如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<p v-text="msg"></p>
<!--等价于-->
<p>{{msg}}</p>

 事件修饰符

Vue.js 为 v-on 提供了事件修饰符

用法：v-on:[事件].[修饰符]="事件名称"-->v-on:click.stop="btnHandle"

• .stop  阻止事件继续传播（阻止事件冒泡）
• .prevent  阻止事件默认新为
• .passive 立即触发事件默认行为，而不会等待事件完成
• .self  只有点击当前元素时，才触发事件
• .capture  实现事件捕获
• .once  点击事件将只会触发一次

注意：

• 使用修饰符时，顺序很重要；

如：v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

• 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略

绑定class

• 对象语法

1. 我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div :class="{active: isActive , red: isRed}"></div>

data:{
  isActive: true,
  isRed: ture
}

渲染效果：

<div class="active red"></div>

2. 绑定的数据对象不必内联定义在模板里：

<div :class="{classObj}"></div>

data:{
  classObj:{
    active: true,
    red: true
  }
}

3. 绑定一个返回对象的计算属性:

data:{
  isActive: true,
  isRed: true
},
computed:{
  classObj(){
    return{
      active: isActive,
      red: isRed
    }
  }
}

• 数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div :class="[activeClass , redClass]"></div>

data:{
  activeClass: "active",
  redClass: "red"
}

渲染效果：

<div class="active red"></div>

可以用三元表达式，根据条件切换样式：

<div :class="[isActive ? activeClass : '', redClass]"></div>

绑定style

• 对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<div :style="{color: activeColor , fontSize: fontSize + 'px'}"></div>

data:{
  activeColor: 'red',
  fontSize: 20
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div :style = "styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

• 数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div :style="[baseStyles, overridingStyles]"></div>

v-for

• v-for 循环普通数组

<ul>
  <li v-for="item in items">
    {{ item }}
  </li>
</ul>

data:{
  items: [1,2,3,4]
}

• v-for循环对象数组

<ul>
  <li v-for="item in items">
    {{ item.msg }}
  </li>
</ul>

data:{
  items:[
    {msg:'apple'},
    {msg:'orange'}
  ]
}

• v-for循环对象

<ul>
  <li v-for="(value,index) in user">
    {{ index }}--{{ value }}
  </li>
</ul>

data:{
  user:{
    firstName: 'John',
    lastName: 'Doe',
    age: 30
  }
}

效果：

• v-for迭代数字

迭代数字，count值从1开始

 <ul id="ul">
  <li v-for="count in 3">
    {{count}}
  </li>
</ul>

效果：

• key

1. 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

 

 

 

 

  在"就地复用"策略中, 点击按钮, 输入框不随文本一起下移,是因为

  输入框没有与数据(data)绑定, 所以vuejs默认使用已经渲染的dom,

  然而文本是与数据绑定的, 所以文本被重新渲染. 这种处理方式在

  vue或者angularjs中都是默认的列表渲染策略, 因为高效.

2. 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

3. 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

“就地复用”也可用虚拟DOM中的Diff算法解释：

首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。
比如一下这个情况：

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

 v-if vs v-show

 v-if的特点：

• 每次会重新删除或创建元素。
• 有较高的切换性能消耗。
• 如果元素永远不会渲染出来被用户看到，则推荐使用v-if。

v-show的特点：

• 通过CSS（display：none）控制元素的显示与隐藏。
• 有较高的初始渲染消耗。
• 如果元素涉及频繁的切换，推荐使用v-show。

 filter过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}//capitalize 过滤器函数将会收到 message 的值作为第一个参数。

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

 下面这个例子用到了capitalize过滤器

过滤器可以串联：

{{message | filterA | filterB}}

过滤器可以传参：

{{ message | filterA('arg1' , arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

请求数据的两种方法

• v-resource

基于全局Vue对象使用http

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在一个Vue实例内使用$http

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

例子：

this.$http.get('http://jsonplaceholder.typicode.com/posts').then(
  data=>{
    this.blogs = data.body.slice(0,10);
    console.log(this.blogs)
   }
)

• axios

由于v-resource在后续的版本不再更新，所以现在主流使用的请求数据工具是 axios 

具体文档可查看使用说明：https://www.kancloud.cn/yunye/axios/234845

执行GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

可向axios传递相关配置

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

vue组件间通信方式

1）通信种类：

1. 父组件向子组件通信
2. 子组件向父组件通信
3. 隔代组件间通信
4. 兄弟组件间通信

2）实现通信方式：

1. props
2. vue自定义事件
3. 消息订阅与发布
4. vuex
5. slot

方式1：props

props中的数据是只读的

通过一般属性实现父向子通信

通过函数属性实现子向父通信

缺点：隔代组件和兄弟组件间通信比较麻烦

方式2：vue自定义组件

vue内置实现，可以代替函数类型的props

• 在父组件中 绑定监听：<MyComp @eventName/v-on:eventName="callback">//callback为父组件中定义的方法
• 在子组件中 触发事件：this.$emit("eventName",data) //在子组件中定义方法来调用父组件传过来的事件，并向父组件传递数据

缺点：只适合子向父通信

方式3：消息订阅与发布

需要引入消息订阅与发布的实现库，如：pubsub-js

• 在引用组件中 订阅消息：PubSub.subscribe('msg',(msg,data)=>{})
• 在被引用组件中 发布消息：PubSub.publish('msg',data)

优点：适用于任意关系组件间通信

方式4：vuex

方式5：slot

当一个组件被多次复用，不止数据有变化，标签结构也不同时，可用slot占位

专门用来实现父向子传递带数据的标签

 

router传参

$route.query.itemId,

$route.params.itemId,