Vue入门

概述

Vue是一套用于构建用户界面的渐进式框架，核心库只关注视图层

核心：实现了DOM监听与数据绑定

优点

轻量化
移动优先
易上手，吸收了Angular和Recat的长处
开源，社区活跃度高

视图主要是什么呢？

给用户提供一个浏览的界面
刷新后台给的数据

其他的一些组件

网络通信：axios
页面跳转：vue-router
状态管理：vuex
Vue-ui: elementui

安装

方式一：直接CDN引入

CDN：https://cdn.jsdelivr.net/npm/vue/dist/vue.js (开发环境) https://cdn.jsdelivr.net/npm/vue/ (生产环境)

方式二：下载和引入

开发环境：https://vuejs.org/js/vue.js 生产环境：https://vuejs.org/js/vue.min.js

方式三： NPM安装

1

npm install vue

MVVM

目的：分离视图（View）和模型（Model）

概念

是一种软件架构设计模式，源于经典的MVC模式，核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用

作用

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

优点

低耦合
可复用
独立开发
可测试

第一个程序

vscode推荐插件：

Vetur
Vue VSCode Snippets

代码编写

创建文件

 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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HelloWorld</title>
  </head>
  <body>
      <!-- 双大括号将会将数据插值为纯文本 Mustache语法-->
    <div id="app">{{message}}</div>

    <!-- 导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      // let(变量) / const(常量)
      const vm = new Vue({
        el: "#app", // 用于挂载要管理的元素
        data: {     // 定义数据
          message: "hello world",
        },
      });
    </script>
  </body>
</html>

查看结果

发现页面输出hello world,并且在控制台中修改message的值，页面上的值自动更新（双向绑定）

Vue语法

v-bind

可以使用v-bind来绑定元素特性 —- 缩写（:id=""）

代码:

 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


<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www/w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HelloWorld</title>
  </head>
  <body>
    <div id="app">
      <span v-bind:title="message"
        >鼠标悬停几秒钟查看此处动态绑定的提示信息！</span
      >
    </div>

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

v-once

该指令表示元素只会渲染一次，不会随着数据的改变而改变

代码：

 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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HelloWorld</title>
  </head>
  <body>
    <div id="app">
      <h2>{{message}}</h2>
      <h2 v-once>{{message}}</h2>
    </div>

    <!-- 导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      // let(变量) / const(常量)
      const vm = new Vue({
        el: "#app", // 用于挂载要管理的元素
        data: {
          // 定义数据
          message: "消息队列",
        },
      });
    </script>
  </body>
</html>

v-html

能将数据插值为html

代码：

 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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HelloWorld</title>
  </head>
  <body>
    <div id="app">
      <h2 v-html="url"></h2>
    </div>

    <!-- 导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      // let(变量) / const(常量)
      const app = new Vue({
        el: "#app", // 用于挂载要管理的元素
        data: {
          // 定义数据
          url: '<a href="http://www.baidu.com">百度</a>',
        },
      });
    </script>
  </body>
</html>

注意：在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成XSS漏洞。请仅在内容安全可信时再使用v-html，并且永远不要使用用户提供的 HTML 内容。

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


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HelloWorld</title>
  </head>
  <body>
      <!-- 双大括号将会将数据插值为纯文本 -->
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>

    <!-- 导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      // let(变量) / const(常量)
      const vm = new Vue({
        el: "#app", // 用于挂载要管理的元素
        data: {     // 定义数据
          movies: ['111','222','333','444']
        },
      });
    </script>
  </body>
</html>

v-text

将数据显示在页面中，接受一个string类型（会有覆盖，实际开发不常用）

v-pre

跳过其所在节点的编译过程

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app">
      <h2>{{message}}</h2>
      <h2 v-pre>{{message}}</h2>
    </div>
    <!-- 导入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "消息队列",
        },
      });
    </script>
  </body>
</html>