Vue深度学习

Posted 2020-10-15 BluesQian

 

Hello World

现在就让我们来写第一个vue.js的实例。如下代码：

html代码：

<div id="demo">
  {{ message }}
</div>

javascript代码:

new Vue({
  el: \'#demo\',
  data: {
    message: \'Hello World!\'
  }
})

上面代码中div中的部分 {{ message }}为数据绑定，我们将会在后面的学习中讲到。而vue.js代码是实例化一个Vue对象。在使用vue之前必须要实例化。

构造器

每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例：

var vm = new Vue({
  // 选项
})

一个Vue实例其实正是一个MVVM模式中所描述的 ViewModel - 因此在文档中经常会使用vm这个变量名。

属性与方法

每个Vue实例都会代理其data对象里所有的属性，如下代码：

    var data = {a:1};
    var vm = new Vue({
        data:data
    });
//    vm.a === data.a -> true
//    设置属性也会影响到原始数据
    
    vm.a = 2;
//    data.a -> 2
    data.a = 3;
//    vm.a -> 3

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

插值

数据绑定最基础的形式是文本插值，使用 {{}} 语法（双大括号）：

<div id="app">
    <span>Message：{{message}}</span>
</div>

{{ msg }} 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

    var data = {message:"Hello world"};
    new Vue({
        el:"#app",
        data:data
    });

也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

<div id="app">
    <span>Message：{{message}}</span><br />
</div>

    var data = {message:"Hello world"};
    new Vue({
        el:"#app",
        data:data
    });

    data.message = "Hello world!!!"

原始的HTML

双大括号标签将数据解析为纯文本而不是HTML。为了输出真的HTML字符串，需要用三大括号标签：

<div>{{{ msg }}}</div>

var data={msg:\'<p>Hello Vue.js!</p>\'};
new Vue({
    el: \'#demo\',
    data: data
   })

HTML特性

双大括号标签也可以用在 HTML 特性 (Attributes) 内：

<div id=\'{{id}}\'>

</div>

    var data={id:\'app\'};
    new Vue({
        el: "div",
        data: data
    })

JavaScript表达式

Vue.js 在数据绑定内支持全功能的JavaScript表达式：

{{ number + 1 }}
{{ ok ? \'YES\' : \'NO\' }}
{{ message.split(\'\').reverse().join(\'\') }}

过滤器

Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”，以“管道符(|)”指示。过滤器本质上是一个函数，这个函数会接收一个值，将其处理并返回。

<div id="app">
    {{ msg | lowercase }}
</div>

var data={msg:\'heLLO \'};
new Vue({
    el: \'#app\',
    data: data
})

指令

Vue.js指令 (Directives) 是特殊的带有前缀 v- 的特性。本质是模板中出现的特殊标记，让处理模板的库知道需要对这里的DOM元素进行一些对应的处理。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

<div id="app">
    <p v-if="msg">Hello!</p>
</div>

这里 v-if 指令将根据表达式 msg 值的真假删除/插入 < p > 元素。

　　在Vue.js中为我们提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同学们可以去查看Vue.js的指令api

var data={msg:1};
new Vue({
    el: \'#app\',
    data: data
})

计算属性

在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

在 Vue.js 中，你可以通过 computed 选项定义计算属性：

<div id="app">
    <p v-if="msg">Hello!</p>
    a={{a}},b={{b}}
</div>

new Vue({
    el: \'#app\',
    data: {
        msg:1,
        a:1
    },
    computed:{
        b:function () {
            return this.a+1;
        }
    }
})

 

 Class对象语法

可以传给 v-bind:class 一个对象，以动态地切换class。注意 v-bind:class 指令可以与普通的 class 特性共存。

<div class="static" v-bind:class="{ \'class-a\': isA, \'class-b\': isB }"></div>

new Vue({
    el: \'div\',
    data: {
        isA:true,
        isB:false
    }
})

当 isA 和 isB 变化时，class 列表将相应地更新。例如，如果 isB 变为 true，class 列表将变为 "static　class-a class-b"。

Class数组语法

可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[classA, classB]">

var vm = new Vue({
  el: \'div\',
  data: {
  classA: \'class-a\',
  classB: \'class-b\'
}
})

渲染为：

<div class="class-a class-b"></div>

Style对象语法

v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

<div class="static" v-bind:style="{color:activeColor,fontSize:fontSize+\'px\'}">
    style对象语法
</div>

var vm = new Vue({
    el: \'div\',
    data: {
        activeColor:"red",
        fontSize:20
    }
})

渲染为：

Style数组语法

v-bind:style的数组语法可以将多个样式对象应用到一个元素上。

<div v-bind:style="[styleObjectA, styleObjectB]">Style 数组语法</div>

javascript代码：

var vm = new Vue({
  el: \'div\',
  data: {
  styleObjectA: {
    color: \'red\'
  },
    styleObjectB: {
     fontSize: \'30px\'
  }
}
})

渲染为：

<div style="color: red; font-size: 30px;">Style 数组语法</div>

v-if

在 Vue.js，我们使用 v-if 指令实现:

<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一个 “else” 块：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

template v-if

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

当ok为真值时，渲染为：

<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。

v-else

可以用 v-else 指令给 v-if 或 v-show 添加一个 “else 块”：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 元素必须立即跟在 v-if 或 v-show元素的后面，否则它不能被识别。

v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：

<ul id="example">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

js代码：

var vm = new Vue({
    el: \'#example\',
    data: {
        items:[
            {message:"one"},
            {message:"two"}
            ]
    }
})

渲染为：

<ul id="example"><li>
        one
    </li><li>
        two
    </li></ul>

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

<ul id="example">
  <li v-for="item in items">
    {{ parentMessage }} - {{ $index }} - {{ item.message }}
  </li>
</ul>

 js代码：

var example2 = new Vue({
  el: \'#example\',
  data: {
    parentMessage: \'Parent\',
    items: [
      { message: \'one\' },
      { message: \'two\' }
    ]
  }
})

template v-for

类似于 template v-if，也可以将 v-for 用在 template 标签上，以渲染一个包含多个元素的块。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>