Vue学习笔记（3）

我是一条酸菜鱼。

数组用法

数组更新检测

• 变异方法（mutation method）：会改变被这些方法调用的原始数组
• 非变异方法：不改变原始数组，返回一个新数组

会触发视图更新的数组变异方法:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

用法如下:

example1.items.push({ message: 'Baz' }) 

由于JS限制导致items[index] = newValue不会被响应

修改数组元素：

Vue.set(vm.items,index,newValue)//修改items[index] = newValue
别名有：
vm.$set(vm.items,indexOfItem,newValue)

修改数组长度：

vm.items.splice(newLength)

显示数组的某些元素：

• 第一种方法是可以重新生成一个子数组包括所有需要的元素

• 第二种方法使用计算属性来进行数组过滤/排序：

  //html        
  <li v-for="n in evenNumbers">{{ n }}</li>
  //js
  data: {
        numbers: [ 1, 2, 3, 4, 5 ]
      },
      computed: {
        evenNumbers: function () {
      return this.numbers.filter(function (number) {
        return number % 2 === 0
      })
        }
      }
  

• 第三种方法是使用一个method方法(在计算属性不适用的情况下）

  //html
  <li v-for="n in even(numbers)">{{ n }}</li>
  //js
  data: {
    numbers: [ 1, 2, 3, 4, 5 ]
  },
  methods: {
    even: function (numbers) {
      return numbers.filte(function (number) {
        return number % 2 === 0
      })
    }
  } 
  

更改对象

类似的原因和方法修改对象属性，对于以下实例：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
//增加属性
Vue.set(vm.userProfile,'age',27)
//别名
vm.$set(vm.userProfile, 'age', 27)
/增加多个属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

组件使用V-for

包括一个todolist的demo，感觉可以

vue官方教程

事件处理

监听事件

v-on监听 + 触发方法

如绑定click事件， v-on:click 可以跟一个method或者一个表达式

<button v-on:click = "count += 1"> Add 1 </button> //这是绑定了表达式
<button v-on:click = "greet"> add </button> //这是绑定了method

事件修饰符

修饰符的顺序很重要，用于限制事件发生

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

一些表单输入绑定

单行文本+绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

多行文本+绑定

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

单个复选框+布尔值

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

多个复选框同一数组

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>    

还有 单选框 + 选择框 + 多选框

参考这里

事件修饰符

• .lazy：使得输入框中的值发生改变时才进行数据同步，而不是每一次input触发的时候

  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >
  

• .number：自动将用户输入值转换为数值类型

  <input v-model.number="age" type="number">
  

• .trim：自动过滤用户输入的首位空白字符

  <input v-model.trim="msg">
  

元素进入/离开过渡

• 使用transition封装组件

（vue）过渡的六个class：

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

使用demo:

//HTML:
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
-----------------------
//JS:
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
-----------------------
//CSS:
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

• CSS过度：transition in css
• css动画: animation + action

过度的一些demo

---

Some notes：

1. 今天使用github desktop发现无法拉下来新的仓库，想起之前是因为登陆过期的问题，重新登录就可以了。但是这次log out之后发现根本登不上去，后面google说是之前安装的chorme插件adblock把github也屏蔽掉了。解决方法：管理员权限打开github desktop