Vue

浏览次数:

Vue是用于构建用户界面的渐进框架。与其他单片（单片）框架不同，Vue设计为以较小的增量应用，核心库仅关注视图层。

1.MVVM架构

  • Model：模型层，在这里表示JavaScript对象
  • View：视图层，在这里表示DOM(HTML操作的元素)
  • ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者

在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

  • ViewModel能够观察到数据的变化，并对试图对应的内容进行跟新
  • ViewModel能够监听视图的变化，并能够通知数据发生变化

vue的核心就是实现了DOM监听与数据绑定

什么是MVVM？
MVVM(Model-VIew-ViewModel)是一种软件架构设计模式，是一种简化用户界面的时间驱动编程方式。
MVVM源自于经典的MVC模式，MVVM的核心是ViewModel层，负责转换Model中的数据对象，来让数据变得更容易管理和使用，其作用如下：

  • 该层向上与视图层进行双向数据绑定
  • 向下与Model层通过接口请求进行数据交互

MVVM的好处
MVVM模式和MVC模式一样，主要是为了分离视图（View）和模型（Model）。

  • 低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
  • 可复用：可以把一些视图逻辑放在一个ViewModel里，让更多View重复使用
  • 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
  • 可测试：测试可以针对ViewModel来写

第一个Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<!--View-->
<div id="app">
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm= new Vue({
        // Model
        el: "#app",
        data:{
            message: "hello, vue"
        }
    });
</script>
</body>
</html>

2.Vue基本语法

1.插值
a.文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--View-->
<div id="app">
    {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm= new Vue({
        // Model
        el: "#app",
        data:{
            message: "hello, vue"
        }
    });
</script>

Mustache 标签将会被替代为对应数据对象上 message property 的值。无论何时，绑定的数据对象上 message property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

1
<span v-once>这个将不会改变: {{ message }}</span>

b.原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

1
2
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这个 span 的内容将会被替换成为 property 值 rawHtml，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

注意：
动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

c.Attribute
Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：

1
<div v-bind:id="dynamicId">xxxx</div>

此时，鼠标指向xxxx，会显示dynamicId的值
对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

1
<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 < button> 元素中。

d.使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

1
2
3
4
5
6
7
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

1
2
3
4
5
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2.指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

1
<p v-if="seen">现在你看到我了</p>

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

a.参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

1
<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：

1
<a v-on:click="doSomething">...</a>

b.动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

1
2
3
4
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

1
<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束

1
2
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

1
2
3
4
5
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

c.修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

1
<form v-on:submit.prevent="onSubmit">...</form>

3.缩写
v-bind 缩写

1
2
3
4
5
6
7
8
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

1
2
3
4
5
6
7
8
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

3.v-if和v-for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<!--View-->
<div id="app">
    <!--取值-->
    {{message}}
    <!--绑定-->
    <span v-bind:title="message">xxxx</span>

    <!--if-->
    <p v-if="type">ok</p>
    <p v-else>no ok</p>

    <p v-if="result==='A'">fffffff</p>
    <p v-else-if="result==='B'">ffcccff</p>
    <p v-else>adafdaf</p>

    <!--for-->
    <p v-for="item in items">
        {{item.text}}
    </p>
    <p v-for="(item,index) in items">
        {{item.text}} {{index}}
    </p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm= new Vue({
        // Model
        el: "#app",
        data:{
            message: "hello, vue",
            type: true,
            result: "A",
            items:[
                {text: "I"},
                {text: "Love"},
                {text: "Vue"}
            ]
        }
    });
</script>
</body>
</html>

4.事件绑定，methods

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>event</title>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        methods:{
            sayHi: function () {
              alert(this.message)
            }
        }
    });
</script>
</body>
</html>

3.计算属性和侦听器

1.计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

1
2
3
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

我们可以使用如下的方法来简化：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

2.计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的，计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

1
2
3
4
5
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

下面这种没有响应式依赖的计算属性将不再更新

1
2
3
4
5
computed: {
  now: function () {
    return Date.now()
  }
}

3.计算属性 vs 侦听属性
在vue中，为了防止滥用watch属性，可以使用计算属性代替，看下面的例子
watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

计算

1
2
3
4
5
6
7
8
9
10
11
12
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

4.计算属性的 setter
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="demo">{{ fullName }}</div>
// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

5.侦听器
当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。

赏

Thank you,么么哒

支付宝
微信

扫一扫，分享到微信

微信分享二维码
TotalVisits: | Visitors:

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

欢迎来到Zcoder的博客！！！