Vue.js 2.x笔记：基本语法（2）

阅读量：7217 次

发布时间：2019-06-29

本文共 7052 字，大约阅读时间需要 23 分钟。

1. Vue实例及选项

1.1 创建Vue实例（new Vue instance）

　　每个Vue Application必须创建一个root Vue Instance。

　　一个Vue实例相当于一个MVVM模式中的ViewModel。在创建Vue实例时，可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子等选项。

　　Vue.js通过构造函数Vue{ option }创建一个Vue实例：

var vm = new Vue({ option });

1.2 元素选项（The Element Option）

1.3 数据选项（The Data Option）


     
      {
   { title }}

1.4 生命周期钩子

　　每个Vue实例创建时，都会经历一些列的初始化过程，调用相应的生命周期钩子。

　　Vue生命周期钩子：

　　◊ created：实例创建完成后调用，此阶段完成数据监测等，但尚未挂载，$el 还不可用。

　　◊ mounted：el 挂载到实例后调用。


     
      {
   { title }}


     
      {
   { title }}

2. 模板语法

　　Vue.js创建实例对象的选项中影响模板或DOM的选项：el 和 template。

　　　　◊ el ：类型为字符串，DOM 元素或函数。其作用是为实例提供挂载元素。

　　　　◊ template：类型为字符串。默认会将template 值替换挂载元素（即el 值对应的元素），并合并挂载元素和模板根节点的属性。

    
         libing.vue        
             
      将被模板内容替换

　　渲染输出HTML：

    
     
      Todo List

　　Vue.js使用基于HTML的模版语法，允许声明式地将DOM绑定至Vue实例的数据。

　　Vue.js的核心：采用模板语法声明式的将数据渲染到DOM。

2.1 插值（Interpolations）

2.1.1 文本（Text）

　　Vue.js 实例中通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。

　　数据绑定：{

{ }}

  
       libing.vue    
         
      {
   { title }}

2.1.2 原始HTML（Raw HTML）

　　{

{ }}：将数据中的 HTML 转为纯文本后再进行插值。

　　v-html ：输出 HTML 代码

2.1.3 属性（Attributes）

　　不能在 Vue 模板中的 HTML 属性上使用{

{}}语法。

　　HTML 属性中的值应使用 v-bind 指令。


       
      
       Content

2.1.4 表达式


     
        {
    { status ? "是" : "否" }}  
      
       Content

2.2 过滤器（Filters）

2.2.1 注册过滤器

　　Vue.js 允许在表达式后添加可选的过滤器，以管道符 “|” 指示。


         
      {
   { title | uppercase }}

　　多个过滤器链式使用：

{
   { name | filterA | filterB }}

　　传入多个参数：

{
   { name | filterA arg1 arg2}}

　　此时，filterA 将 name 的值做为第一个参数，arg1，arg2 做为第二、第三个参数传入过滤器函数中。

　　Vue.js 提供全局方法Vue.filter() 注册一个自定义过滤器，接受过滤器ID 和过滤器函数两个参数。

　　过滤器注册语法格式：

Vue.filter( id, [definition] )

2.2.2 双向过滤器

2.3 指令（Directives）

　　指令是带有 v- 前缀的特殊属性。

　　指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

　　v-bind指令：用于响应式地更新 HTML 属性。

　　v-on 指令：用于监听 DOM 事件。


         
      {
   { title }}

2.3.1 参数（Arguments）

　　一些指令能够接受一个参数，参数在指令后以冒号（:）表示。


         
      libingql

2.3.2 修饰符（Modifiers）

　　修饰符：以句号 . 表示的特殊后缀，用于指出一个指定应该以特殊方式绑定。

　　示例：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

2.4 用户输入

　　在 input 输入框中使用 v-model 指令来实现双向数据绑定。


         
      
       {
   { title }}

2.5 简写（Shorthands）

　　Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供特定简写。

2.5.1 v-bind 简写


      ... 
      ...

2.5.2 v-on 简写


      ... 
      ...

3. 条件语句

3.1 v-if

　　v-if指令：条件判断

　　在 <template> 上使用 v-if 进行条件分组


         
      Todo List

3.2 v-else

　　v-if / v-else语句块：

3.3 v-if-else

　　v-if-else：v-if 之后的“else-if 块”，可以多次链式地调用。

3.4 v-show

　　v-show：根据条件展示元素

　　v-show 的元素会始终渲染并保留在 DOM 中。v-show 只会切换元素的 display 这个 CSS 属性。


         
      Todo List

注：v-show 无法用于 <template> 元素，也不能和 v-else 配合使用。

3.5 v-if 和 v-show

　　v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。

　　v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。

　　v-show 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。

　　通常来说，v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。

　　如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。

4. 循环语句

4.1 v-for遍历数组

　　v-for 遍历数组格式： item in items

　　其中，

　　　　items 是原始数据数组(source data array)，

　　　　item 是数组中每个迭代元素的指代别名(alias)。


         
              
       {
   { item.text }}

　　v-for索引参数：

{
   { index }}-{
   { item.text }}

　　其中，index从0开始。

4.2 v-for遍历对象

　　v-for 可以遍历对象的属性。

　　v-for遍历对象属性：两个参数key、value


         
              
       {
   { key }}:{
   { value }}

　　v-for遍历对象属性：3个参数index、key、value，索引（index）从0开始。


         
              
       {
   { index }}-{
   { key }}:{
   { value }}

4.3 key

　　为便于 Vue 跟踪每个节点的身份，重新复用(reuse)和重新排序(reorder)现有元素，需要为每项提供唯一的 key 属性，从而给 Vue 一个提示。

　　理想的 key 值是每项都有唯一的 id。

　　推荐：在使用 v-for 时，尽可能提供一个 key，除非迭代的 DOM 内容足够简单，或者是故意依赖于默认行为来获得性能提升。


         
              
       {
   { item.text }}

　　简写：

{
   { item.text }}

4.4 v-for遍历整数

　　v-for可以在整数值范围内迭代。

4.5 计算（computed）属性与监听（watch）属性

4.5.1 计算（computed）属性

　　在模板中使用表达式是非常方便直接的，只适用于简单的操作，不适于加入过多的逻辑。

　　对于复杂的逻辑，使用 computed 属性(computed property)。

　　计算属性都以函数的形式，在Vue实例的computed选项中，最终返回计算后的结果。


     
          {
    { fullName }}

　　计算属性依赖一个或多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图（vm）也会更新。


         
      
                                            商品ID                      商品名称                      单价                      数量                 
                                     {
   { item.ID }}                      {
   { item.ProductName }}                      {
   { item.UnitPrice }}                                                                  
                                     总计：{
   { total }}

商品ID	商品名称	单价	数量
{ { item.ID }}	{ { item.ProductName }}	{ { item.UnitPrice }}
总计：{ { total }}

　　computed 属性默认只有 getter ，可以在需要时提供一个 setter 。


     
          {
    { fullName }}

4.5.2 computed 缓存 vs method 方法

　　computed属性会基于它所依赖的数据进行缓存。每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值(re-evaluate)。


     
          {
    { now }}

　　method方法：每当触发重新渲染(re-render)时，method 调用方式将总是再次执行函数。

　　在某些场景下，不希望有缓存，使用 method 方法替代。


     
          {
    { now() }}

4.5.3 computed 属性和 watch 属性

　　watch 属性：Vue 提供的一种更加通用的方式，来观察和响应 Vue 实例上的数据变化。

　　过度滥用 watch 属性会造成一些问题，更推荐的方式是，使用 computed 属性。


         
          
          
      
       {
   { fullName }}

5. 样式绑定：class和style

5.1 class绑定

5.1.1 对象语法

　　向 v-bind:class 传入一个对象，来动态地切换 class。

　　渲染：

　　active 这个 class 的存在与否，取决于 isActive 这个 data 属性的 truthy 值。

　　v-bind:class 指令可以和普通 class 属性共存。可以通过在对象中添加多个字段，来切换多个 class。

　　渲染：

　　绑定对象，可以无需内联。

　　渲染：

　　绑定返回对象的计算属性。

5.1.2 数组语法

　　可以向 v-bind:class 传入一个数组，来与 class 列表对应。

　　三元表达式：

　　数组语法中使用对象语法：

5.2 style绑定

5.2.1 对象语法

　　v-bind:style 直接设置样式

　　渲染：

　　绑定对象

　　v-bind:style 的对象语法，可以和 computed 属性结合使用，此 computed 属性所对应的 getter 函数需要返回一个对象。

5.2.2 数组语法

　　v-bind:style 的数组语法，可以在同一个元素上，使用多个 style 对象。

　　渲染：

6. 事件处理

6.1 监听事件

　　v-on 指令：监听 DOM 事件，并在事件被触发时执行 JavaScript 代码。


         
          
      
       按钮点击次数：{
   { counter }}次

6.2 定义在 methods 对象中的事件处理器

　　用于处理逻辑复杂事件

6.3 定义在行内的事件处理器

6.4 事件修饰符(Event Modifiers)

　　在事件处理程序中常见调用 event.preventDefault() 或 event.stopPropagation()

　　v-on 提供事件修饰符，以点(.)开头的指令后缀来表示。

　　　　◊ .stop

　　　　◊ .prevent

　　　　◊ .capture

　　　　◊ .self

　　　　◊ .once

　　v-on:click.prevent.self 阻止所有点击

　　v-on:click.self.prevent 只阻止元素自身的点击

你可能感兴趣的文章

谈谈NITE 2的第一个程序HandViewer

Java_InvokeAll_又返回值_多个线程同时执行，取消超时线程

/*10个filter的属性*/ ---毛玻璃效果

1. Vue实例及选项

1.1 创建Vue实例（new Vue instance）

1.2 元素选项（The Element Option）

1.3 数据选项（The Data Option）

1.4 生命周期钩子

2. 模板语法

将被模板内容替换

2.1 插值（Interpolations）

2.1.1 文本（Text）

{ { title }}

2.1.2 原始HTML（Raw HTML）

2.1.3 属性（Attributes）

2.1.4 表达式

2.2 过滤器（Filters）

2.2.1 注册过滤器

{ { title | uppercase }}

2.2.2 双向过滤器

2.3 指令（Directives）

{ { title }}

2.3.1 参数（Arguments）

2.3.2 修饰符（Modifiers）

2.4 用户输入

2.5 简写（Shorthands）

2.5.1 v-bind 简写

2.5.2 v-on 简写

3. 条件语句

3.1 v-if

Todo List

3.2 v-else

是

否

3.3 v-if-else

3.4 v-show

Todo List

3.5 v-if 和 v-show

4. 循环语句

4.1 v-for遍历数组

4.2 v-for遍历对象

4.3 key

4.4 v-for遍历整数

4.5 计算（computed）属性与监听（watch）属性

4.5.1 计算（computed）属性

4.5.2 computed 缓存 vs method 方法

4.5.3 computed 属性和 watch 属性

5. 样式绑定：class和style

5.1 class绑定

5.1.1 对象语法

5.1.2 数组语法

5.2 style绑定

5.2.1 对象语法

5.2.2 数组语法

6. 事件处理

6.1 监听事件

6.2 定义在 methods 对象中的事件处理器

6.3 定义在行内的事件处理器

6.4 事件修饰符(Event Modifiers)

{
{ title }}

{
{ title | uppercase }}

{
{ title }}