Vue.js 学习笔记

Posted by Mars . Modified at

学习内容:《Vue.js 官方教程》

1. 声明式渲染

通过new Vue()可声明一个 Vue应用,其接受一个对象参数,在这个参数中用el属性标明Vue对象挂载的HTML元素,用data属性记载对象的数据值。

    <div id="app">
       {{ message }}
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>

2. 指令

Vue指令-思维导图

Vue应用所绑定的HTML元素上,添加的带有v-前缀的属性叫做指令

2.1 v-bind 指令

缩写: :

v-bind指令用于将HTML上元素的某一属性Vue应用内的某一属性绑定在一起(共同变化)。

<div id="app-2">
  <span v-bind:style="cssContent">
    你看到的我是蓝色的。
  </span>
</div>
<script>
  var app2 = new Vue({
    el: '#app-2',
    data: {
      cssContent: 'color: blue;'
    }
  })
</script>

2.2 v-if 指令 (条件渲染)

元素设置了v-if指令时,只有在v-if指令表达式返回true值时,元素才会被渲染,否则将不被渲染。

<div id="if" v-if='show'>看得到吗?</div>
<script>
  let iiff = new Vue({
    el: '#if',
    data: {
      show: false
    }
  });

  // 此時看不到#if這個元素。
</script>

2.3 v-else 指令 (条件渲染之后,如果为假则渲染)

v-else指令表示条件渲染之后,如果为假则渲染此元素。 (v-else元素必须紧跟在带v-if或者v-else-if的元素的后面,否则它将不会被识别。)

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

2.4 v-else-if 指令 (条件渲染之后,继续添加条件渲染块)

表示 v-if 的“else if 块”。可以链式调用。 (v-else-if元素必须紧跟在带v-if或者v-else-if的元素的后面,否则它将不会被识别。)

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

2.5 v-show 指令 (条件显示)

根据v-show表达式之真假值,切换元素的 display CSS 属性

2.6 v-for 指令 (遍历渲染)

v-for指令表示利用目标元素的可遍历性,遍历多次渲染其每一内部元素。

【接受数据类型】 Array | Object | number | string | Iterable (2.6 新增)

2.6.1 v-for 指令通常用法

使用语法alias in expression遍历数组内每一元素。 (不能使用在Vue应用绑定的根元素上,必须是内部的子元素)

<div id='app'>
  <div v-for='item in list'>
      {{ item.content }}
  </div>
</div>

<script>
let app = new Vue({
  el: '#app',
  data:{
    list: [{content:1},{content:2},{content:3}]
  }
  });
</script>

2.6.2 v-for 指令同时遍历数组的内容和索引

可以用一个圆括号内的两个变量对目标变量进行遍历,其遍历结果第一个为遍历结果本身,第二个为该遍历结果在原元素内的索引值

<div id='app'>
  <div v-for='(a,b) in list'>
      {{ a }} 
  </div>
</div>

<script>
let app = new Vue({
  el: '#app',
  data:{
    list: [{content:1},{content:2},{content:3}]
  }
  });
</script>

显示结果:
{ “content”: “1” }0
{ “content”: “2” }1
{ “content”: “3” }2

2.6.3 v-for 指令遍历对象属性

也可以用 v-for 来遍历一个对象的属性。

可以使用单独的变量来遍历,也可以使用圆括号括着的两个或三个变量来遍历。

当使用一个变量时,遍历结果为每一属性的值;
当使用两个变量时,遍历结果第一个为每一属性的值,第二个为属性的键名;
使用三个变量时,遍历结果第一个为每一属性的值,第二个为属性的键名,第三个为每一属性的索引。

<ul id="v-for-object" class="demo">
  <li v-for="(a,b,c) in object">
      {{ a }}/{{ b }}/{{ c }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

显示结果:
How to do lists in Vue / title / 0
Jane Doe / author / 1
2016-04-10 / publishedAt / 2

2.6.3 v-for 指令渲染结果的更新机制及key属性的必要性

Vue更新使用v-for渲染的元素列表时,采取“就地更新”的策略。如果数据项的顺序被改变,Vue不会移动DOM来匹配顺序,而是就地更新每个元素,并确保它们在每个索引位置正确地渲染

如果想让Vue跟踪每个节点的身份,当原始数据项更新,想让Vue对现有元素进行重新排序,则需要为每项绑定一个key属性

Vue2.0 中 v-for里面的 “就地复用” 策略 是什么? - 霸都丶傲天的回答 - 知乎

2.7 v-on 指令

缩写: @

接受数据类型: Function | Inline Statement(内联语句) | Object

传入参数: 原生DOM事件event

什么叫内联语句?
内联语句,就是写在HTML部分的JavaScript语句。

什么叫传入参数?
传入参数,也就是跟在指令+冒号(如v-on)后面的语句,与‘指令:’一同组成元素的属性。

修饰符:

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

用法说明:

v-on指令用于绑定事件监听器。

v-on用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件

在监听原生 DOM 事件时,方法以event为唯一的参数。如果使用内联语句,语句可以访问一个 $event property。 如:v-on:click='show('love you',$event)'

v-on的修饰符如没有可以省略。

从 Vue 2.4.0 开始,v-on 支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

2.8 v-model 指令

功能:在表单元素或者Vue组件上,创建数据双向绑定。

使用元素限制: <input>、<select>、<textarea>、components

修饰符:

.lazy - 不监听input,改为监听change(在change事件之后才进行同步,也就是输入完毕input失去焦点后)。

.number - 把输入的字符串转为有效的数字。

.trim - 首尾空格去除。

具体使用情况说明:

v-model绑定参数的类型,应依据 <input>标签的type属性或不同标签情况进行选择:

  1. type=’radio’时,应绑定单个字符串或布尔值,该值绑定为所选择元素的value属性(如有),如果没有value属性则绑定选中与否的Truthy值;
  2. type=’checkbox’,且<input>个数为一个时,应绑定一个布尔值,该值绑定为所选择元素的选中情况(Truthy);
  3. type=’checkbox’,且<input>个数为多个时,应绑定一个数组,该数组绑定为所选择元素的value属性组成的字符串数组,排列顺序按点击顺序;
  4. type=’range’,应绑定一个字符串,该值绑定为Range中选中的值;
  5. type=’color’,应绑定一个格式为’#XXXXXX’的字符串,代表初始颜色Rgb值,该值绑定为Color中选中的值;
  6. 绑定到<select>元素且单选时(multiple= ‘false’),应绑定到单个字符串,如果存在value属性,则该值绑定为value属性值,否则该值绑定为所选择<option>选项的textContent
  7. 绑定到<select>元素且多选时(multiple= ‘true’),应绑定到一个数组,如果存在value属性,则该值绑定为value属性值,该值绑定为所选择<option>选项的textContent组成的字符串数组,排列顺序按option排列先后顺序;

2.9 v-slot 指令

待补充

2.10 v-pre 指令

功能:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的HTML节点可以加快编译。

2.11 v-cloak 指令

功能:用于控制元素在编译完成之前的显示效果。在编译完毕之前,v-cloak指令一直保持在元素上。一旦编译完毕,这个指令就消失了。

2.12 v-once 指令

功能:配置了v-once指令的元素,只能被渲染一次。之后的渲染,这一元素或组件被视为静态内容并跳过。

2.13 v-text 指令

功能:修改绑定元素的textContent(元素内的文本内容)。

2.14 v-html 指令

功能:修改元素的innerHTML。可以真正地插入HTML内容。Mustache语法内的HTML内容只会被识别为文本而不会被浏览器编译。

Keywords: Vue
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。