vue入门（二）渲染

一、条件渲染

1、v-if 和v-else

    条件渲染就是，通过改变条件来决定一些东西是否出现在页面中。如v-if和v-else，此要成对出现，且放在同级别标签中。

如下例子，当v-if为true时，页面显示hello world 。当v-if为false时，则显示   你好 世界。

<p v-if="isShow">hello world</p>
<p v-else>你好 世界</p>

data:{
	isShow:false
}

①如果想要同时渲染多个元素，可以外包裹一个<template>，再用v-if

②v-else-if

③关键词key

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。因此当v-if和v-else有相同的元素时，会直接使用同一个元素。如果想要重新渲染，则只需添加一个具有唯一值的 key属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

2、v-show

v-show和v-if类似，当值为flase时，都不会显示在页面中。

    但是v-show是有在DOM树中的，只是被设置为display:none，而v-if则没有被添加到DOM结构中。

v-show 不支持 <template> 元素，也不支持 v-else

    v-if通常是用于初始化时设置，不适合频繁切换。而v-show课可以作为频繁切换，如下拉菜单等。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

二、列表渲染 v-for

可以用 v-for 指令基于一个数组来渲染一个列表。在 v-for 块中，我们可以访问所有父作用域的属性。

①v-for 第一个参数为要遍历的项，第二个参数可选为当前项的索引index。

<ul id="example-2">
  <li v-for="(item, index) in items">           //index当前索引，可以用of代替in
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

②也可以用v-for来遍历一个对象的属性，第一个参数value为属性值，第二个参数（可选）为属性名，第三个参数为索引（可选）

<ul id="v-for-object" class="demo">
  <li v-for="(value,key,index) in object">  {{ key }} : {{ value }}    </li>
</ul>

（1）数组更新检测： 

使用以下方法会触发视图的更新

这些方法会改变原始数组：push()    pop()     shift()     unshift()        splice()      sort()       reverse()

①push() ：向数组尾部添加多项，返回值为新数组长度

②unshift() ：向数组的首部添加多项，并返回新数组的长度

③pop() ：删除并返回数组的最后一项

④shift()：删除并返回数组的第一项

⑤splice() ：替换数组，参数为（起始索引，要删除的项数，要添加的项...），返回值为删除的项

⑥sort()：排序，参数为排序的函数，是一个比较函数，返回值大于零调换顺序。无参数时按照字符编码顺序排序。

⑦reverse()：颠倒数组顺序

非变异方法：这些方法返回一个新数组：filter()、concat() 和 slice()

①filter()：过滤器，参数为一函数function(当前项值, 当前项索引,当前元素属于的数组对象)第一项为必选项

②concat()：连接两个或多个数组

③slice()：剪切，参数为（起始 索引，结束索引）

但是Vue不能检测以下数据的变动：①利用索引直接设置一个数组项时 ②修改数组长度时

（2）对象变更检测

Vue不能检测对象属性的添加或删除。但是，可以使用 Vue.set(object, propertyName, value) 添加响应式属性。

如，添加一个新的age属性到嵌套的userProfile对象中

vm.$set(vm.userProfile, 'age', 27)    //或者Vue.set

当要添加多个新属性时，应该用两个对象的属性创建一个新的对象。Object.assign() 或 _.extend()

Object.assign(target,source1,source2)方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象（target）

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

v-for 也可以有 <template> 来循环渲染一段包含多个元素的内容（就不用创建多个根元素如div了！）。

三、事件处理

1、监听事件：用v-on指令监听DOM事件

v-on可直接写事件处理函数，也可写需要调用的方法名称（此时不用写()）

<button v-on:click="greet">Greet</button>
methods: {
    greet: function (event) {
      alert('Hello ' + this.name + '!')
      if (event) {
        alert(event.target.tagName)    //tagName属性返回的是此元素标签的大写名称
      }
    }
  }

JS中的事件都能用，常用事件：click单击，dblclick双击，mousemove鼠标移动

2、事件修饰符：修饰符可叠加，修饰符的顺序很重要，根据先后顺序来处理的

• .stop阻止事件冒泡
• .prevent阻止事件的默认行为
• .capture  使用事件捕获模式
• .self   只当在 event.target 是当前元素自身时触发处理函数
• .once 只触发一次    
• .passive 滚动行为会立即触发

3、按键码（类似事件修饰符）

• .enter  按下Enter键时触发
• .tab   按下tab键时触发
• .delete    捕获“Delete”和“退格”键
• .esc   
• .space
• .up
• .down
• .left
• .right

4、系统修饰符：仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

5、鼠标按钮修饰符：限制处理函数仅响应特定的鼠标按钮

• .left
• .right
• .middle

四、双向输入绑定

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

1、input    /   textarea 文本

<input v-model="message" placeholder="edit me">

2、复选框checkbox

①单个复选框checkbox，绑定为布尔值：

<input type="checkbox" id="checkbox" v-model="checked">

②多个复选框checkbox，绑定value到同一个数组

3、单选按钮radio

绑定单个被选中的value

<input type="radio" id="one" value="One" v-model="picked">

4、选择框select

单选时，绑定的是被选中的那一个value。多选时，被选中的value绑定到同一个数组中。

<select v-model="selected">
    <option disabled value="">请选择</option>

<select v-model="selected" multiple >

 三、实例与生命周期钩子

五、生命周期

1、beforeCreate：组件实例化之前执行的行数，用于加载ing...

2、created：组件实例化完毕，但页面还没有显示

此后检查是否有el，或者vm.$mount(el)，再检查是否有`HTML`template或者template。

3、beforeMount：组件挂载前，页面仍未显示，但虚拟DOM已经配置

4、mounted：组件挂载后，此方法执行后页面显示

5、修改数据：

beforUpdate：组件更新之前，页面仍未更新，但虚拟DOM已经配置

updated：组件更新好，此方法执行后页面显示

6、beforDestory：在组件销毁之前

7、destoryed：销毁之后

beforCreate:function(){
    alert("组件实例化之前执行的行数")
}

1、created钩子用在一个实例被创建之后执行代码。在模板渲染成html前调用

new Vue({
    data:{
        a:1
    }
    created:function(){
        console.log('a is:'+this.a)
    }
})

不能再选项属性或回调函数上使用箭头函数，因为他没有this

2、mounted:el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。即在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

3、undata：数据更新后调用

 

4、destroyed：实例被销毁时调用