url上接收到 el表达式 不渲染_Vue.js知识库（三）：css数据绑定、页面渲染、表单输入绑定和组件基础...

内容提要：

• Class和Style的数据绑定、条件渲染、列表渲染、事件处理、表单输入绑定和组件基础。

第五章

Class和Style的数据绑定

Vue.js专门对class和style属性的绑定做了增强(这2种常用场景中经常拼接字符串)，例如支持对象或者数组。

5.1CSS的数据绑定

class和v-bind:class共存

<divclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"
>

class支持值为对象

<div id="example">

class支持值为数组

<div id="example">

class支持在数组中使用对象语法

<div id="example">

组件的class数据绑定

<div id="example">

5.2Style的数据绑定(内联样式)

style的值数据绑定

CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

<div id="example">

style支持值为对象

<div id="example">

style支持值为数组

<div id="example">

style支持值为多重值

2.3.0起可以为style添加包含多个值的数组(通常用于提供多个带前缀的值)，只会渲染数组中最后一个被浏览器支持的值。

<div id="example">

第六章

条件渲染

6.1v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!

通常v-if放在元素上，但如果不想对应元素被渲染，可以使用元素，该元素不会被渲染出来。

<template v-if="ok">

Vue会尽可能的高效渲染元素，通常会复用已有元素而不是从头渲染(使Vue非常快)。

每次点击update

如果希望元素每次都重新渲染，可以添加具有唯一值的key attribute即可。(只有被添加该属性的元素才会重新渲染)

<div id="example">

6.2v-else

v-else 指令表示“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面。

<div v-if="Math.random() > 0.5">

6.3v-else-if

v-else 指令表示“else-if 块”。

<div v-if="type === 'A'">

6.4v-show

• v-show会根据值来决定所在的元素是否显示(通过控制css的display)。

• v-show无论条件是什么都会渲染到页面。

<div id="example">

第七章

列表渲染

7.1v-for和数组来渲染一个列表

代码示例

<ul id="example-1">

v-for的第二个参数代表当前项索引。(必须放在第二个位置)

<ul id="example-1">

v-for参数中的in可以改为of。

<ul id="example-1">

7.2v-for和对象来渲染一个列表

代码示例

<div v-for="(value, name, index) in object">

7.3维护状态

通常使用v-for时需要指定一个唯一 key attribute(请用字符串或数值类型的值)。指定了key，它就会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

• 参考资料：https://cn.vuejs.org/v2/guide/list.html#维护状态

• key说明：https://cn.vuejs.org/v2/api/#key

代码示例

<ul>

7.4数组更新

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

替换数组可以使用filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。

代码示例

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

7.5过滤/排序数组

参考文档：https://cn.vuejs.org/v2/guide/list.html#显示过滤-排序后的结果

可以使用计算属性或者一个方法实现数组的过滤和排序。

计算属性

方法

7.6v-for和v-if同时使用

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

只有isComplete

7.7组件中使用v-for

组件中使用v-for必须携带key(2.2.0+版本)。

使用组件时可以使用组件名称，或者直接使用元素名称，但元素中增加is属性指定组件。(使用is的方法可以避开一些潜在的浏览器解析错误)

下面两种效果相同

组件使用v-for代码示例

<div id="example">

第八章

事件处理

8.1v-on指令

可以使用v-on指令监听DOM事件。

直接执行JavaScript代码

<button v-on:click="counter += 1">Add 1

关联事件处理方法

<button v-on:click="greet">Greet

内联处理器中的方法

<div id="example-3">

内联处理器中增加原生事件对象

<button v-on:click="warn('Form cannot be submitted yet.', $event)">

8.2事件修饰符

Vue.js提供了事件修饰符，可以实现event.preentDefault()之类的需求。

事件修饰符	说明
v-on:click.stop="doThis"	阻止单击事件继续传播
v-on:submit.prevent="onSubmit"	提交事件不再重载页面
v-on:click.stop.prevent="doThat"	修饰符可以串联
v-on:submit.prevent	只有修饰符
v-on:click.capture="doThis"	即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
v-on:click.self="doThat"	即事件不是从内部元素触发的
v-on:click.once="doThis"	点击事件将只会触发一次(2.1.4新增)
v-on:scroll.passive="onScroll"	滚动事件的默认行为 (即滚动行为) 将会立即触发(2.3.0新增)

8.3按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

Vue提供了绝大多数常用的按键码的别名。

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

2.1.0新增

• .ctrl

• .alt

• .shift

• .meta

2.2.0新增(响应特定鼠标事件)

• .left

• .right

• .middle

2.5.0新增

• v-on:click.ctrl：即使 Alt 或 Shift 被一同按下时也会触发。

• v-on:click.ctrl.exact="onCtrlClick"：有且只有 Ctrl 被按下的时候才触发。

• v-on:click.exact="onClick"：没有任何系统修饰符被按下的时候才触发。

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

可以使用 `v-on:keyup.f1`

第九章

表单输入绑定

9.1v-model

v-model指令在表单 、 及 元素上创建双向数据绑定。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；

• checkbox 和 radio 使用 checked property 和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

9.2v-model的修饰符

v-model可以携带修饰符实现更多的功能。

修饰符	说明
v-model.lazy="msg"	转为在 change 事件_之后_进行同步
v-model.number="age"	自动将用户的输入值转为数值类型
v-model.trim="msg"	自动过滤用户输入的首尾空白字符

第十章

组件基础

10.1组件基础使用

组件可复用Vue实例，所以它们与 new Vue 接收相同的选项(data、computed、watch、methods)。

代码示例

定义一个名为 button-counter 

组件的复用

组件被使用一次，就创建了一个新实例，内部的属性都是单独维护的。

<div id="components-demo">

组件中的data

组件中的data必须是函数(使得每个实例可以维护一份被返回对象的独立的拷贝)。

data: function () {
  return {
    count: 0
  }
}

10.2通过prop向子组件传递数据

组件中使用prop接收父组件传递过来的属性和值。

<blog-post title="My journey with Vue">

使用循环和v-bind动态传递prop。

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

<blog-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"
>blog-post>

10.3监听子组件事件

在子组件中通过内建的 $emit 方法并传入事件名称来触发一个事件。

<button v-on:click="$emit('enlarge-text')">

在父级组件中接收事件名称来处理(监听器)。

<blog-post...v-on:enlarge-text="postFontSize += 0.1"
>

带参数的子组件事件

携带了0.1

父组件中可以使用$event接收子组件传递过来的值。

代表传递过来的值

父组件也可以使用方法接收值。

<blog-post...v-on:enlarge-text="onEnlargeText"
>

10.4通过slot给子组件传递内容

代码示例

<div id="example">