首页 Vue学习与使用
文章
取消

Vue学习与使用

tangyuewei 发表于 2019-05-122019-05-12T10:39:06+08:00
15 分钟 阅读

Vue 渐进式 JavaScript 框架

Node.js安装

Node.js官网

linux安装nodejs

yum install -y nodejs

npm 缓存清理

npm cache clean --force

安装 Node.js 淘宝镜像加速器（cnpm）

1
2
3
4

npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

::: tip 提示 尽可能使用npm install安装插件，使用cnpm install有可能下载的插件出现问题 :::

nodejs版本升级

首先，你得用npm全局安装一个管理node版本的管理模板n，关于n。

安装命令npm i -g n

::: tip 提示 如果上述命令报错，则执行npm i -g n --force :::

  1. 升级到指定的版本n 版本号 如 n 10.0.0
  2. 安装最新的版本n latest
  3. 安装最近的稳定版本n stable

n模块是不支持window系统的，window系统升级node就只有到node官网下载window安装包来覆盖之前的node。

Vue概述

Vue 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

MVVM 模式的实现者

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

Vue.js优点与核心要素

优点：

  • 轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React 压缩后 44kb+）
  • 移动优先。更适合移动端，比如移动端的 Touch 事件
  • 易上手，学习曲线平稳，文档齐全
  • 吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
  • 开源，社区活跃度高

核心要素

  • 数据驱动

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

  • 组件化
  1. 页面上每个独立的可交互的区域视为一个组件
  2. 每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
  3. 页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面

Vue 语法

v-if,v-else-if,v-else

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>
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h1 v-if="ok === 'a'">if</h1>
    <h1 v-else-if="ok === 'b'">else-if</h1>
    <h1 v-else>else</h1>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            ok: 'a'
        }
    });
</script>
</body>
</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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <li v-for="item in items">
        
    </li>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            items: [
                {message: 'hello'},
                {message: 'world'}
            ]
        }
    });
</script>
</body>
</html>

Vue 事件

v-on

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

<!DOCTYPE html>
<html xmlns:v-on="">
<head>
    <meta charset="UTF-8">
    <title>事件 v-on</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <button v-on:click="say">点击事件</button>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello World'
        },
        // 在 `methods` 对象中定义方法
        methods: {
            say: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

Vue 网络

使用 Axios 实现异步通信 Axios 优点:

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF（跨站请求伪造）
  1. 创建一个名为 data.json 的文件并填入内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

{
  "name": "唐悦玮",
  "url": "https://www.18xm.cn",
  "address": {
    "street": "华强北",
    "city": "广东深圳",
    "country": "中国"
  },
  "links": [
    {
      "name": "Google",
      "url": "http://www.google.com"
    },
    {
      "name": "Baidu",
      "url": "http://www.baidu.com"
    }
  ]
}
  1. 创建 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网络 Axios</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    <div>名称：</div>
    <div>地址：--</div>
    <div>链接：<a v-bind:href="info.url" target="_blank"></a> </div>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                info: {
                    name: null,
                    address: {
                        country: null,
                        city: null,
                        street: null
                    },
                    url: null
                }
            }
        },
        mounted() {
            axios
                .get('data.json')
                .then(response => (this.info = response.data));
        }
    });
</script>
</body>
</html>

Vue 布局

表单

表单中使用双向数据绑定:

用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

::: tip 提示 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 :::

  • 单行文本 ``` html <!DOCTYPE html>
单行文本
单行文本：  单行文本是： 
1
2
3
4
5
6
7

+ 多行文本

``` html
<div id="app">
    多行文本：<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文本是：
</div>
  • 单复选框
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>
<head>
    <meta charset="UTF-8">
    <title>单复选框</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="app">
    单复选框：<input type="checkbox" id="checkbox" v-model="checked">&nbsp;&nbsp;<label for="checkbox"></label>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            checked: false
        }
    });
</script>
</body>
</html>
  • 多复选框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="app">
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: </span>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    });
</script>
  • 单选按钮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="app">
    单选按钮：
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: </span>
</div>

<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            picked: ''
        }
    });
</script>
  • 下拉框
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div id="app">
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值: </span>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    });
</script>

::: warning 提示 如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，推荐像上面提供一个值为空的禁用选项。 :::

组件

组件是可复用的 Vue 实例，就是一组可以重复使用的模板

实际开发中采用 vue-cli 创建 .vue 模板文件的方式开发

  1. 使用 Vue.component() 方法注册组件
  2. 使用 props 属性传递参数 ``` html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

## vue-cli
### 什么是 vue-cli
> `vue-cli` 官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架；可以参考我以前写的 LeeSite 项目骨架生成工具），用于快速生成一个 vue 的项目模板

+ 安装 vue-cli。`npm install vue-cli -g`
+ 测试是否安装成功。`vue list`
### vue-cli主要功能
+ 统一的目录结构
+ 本地调试
+ 热部署
+ 单元测试
+ 集成打包上线

### vue-cli初始化应用程序
1. 创建一个基于 webpack 模板的 vue 应用程序：

myvue 是项目名称，可自定义名称

vue init webpack myvue

1
2
3
4
5
6
7
8
9
10
11

2. 初始化说明：
  + `project name`：项目名称，默认 回车 即可
  + `project description`：项目描述，默认 回车 即可
  + `author`：项目作者，默认 回车 即可
  + `install vue-router`：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
  + `use eslint to lint your code`：是否使用 `eslint` 做代码检查，选择 n 不安装（后期需要再手动添加）
  + `set up unit tests`：单元测试相关，选择 n 不安装（后期需要再手动添加）
  + `setup e2e tests with nightwatch`：单元测试相关，选择 n 不安装（后期需要再手动添加）
  + `should we run npm install for you after the project has been created`：创建完成后直接初始化，选择 n，我们手动执行
3. 运行程序

cd myvue npm install npm run dev

1
2
3
4
5
6
7
8

4. 安装并运行成功后在浏览器访问：http://localhost:8080

## Webpack
### Webpack 简介
> Webpack 是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过 loader 转换，任何形式的资源都可以当做模块，比如 CommonsJS、AMD、ES6、CSS、JSON、CoffeeScript、LESS 等；

### Webpack 安装
- 安装

npm install webpack -g npm install webpack-cli -g

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

- 配置
  创建 webpack.config.js 配置文件
  + `entry`：入口文件，指定 WebPack 用哪个文件作为项目的入口
  + `output`：输出，指定 WebPack 把处理完成的文件放置到指定路径
  + `module`：模块，用于处理各种类型的文件
  + `plugins`：插件，如：热更新、代码重用等
  + `resolve`：设置路径指向
  + `watch`：监听，用于设置文件改动后直接打包
```javascript
module.exports = {
    entry: "",
    output: {
        path: "",
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}
  • 运行 直接运行 webpack 命令打包

vue-router 路由

vue-router 概述

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

    vue-router 安装

    打开命令行工具，进入你的项目目录，输入下面命令。 npm install vue-router --save-dev

设计模式
软件设计原则
本文由作者按照 CC BY 4.0 进行授权
文章内容

软件设计原则

代理设计模式

© 2024 tangyuewei. 保留部分权利。

载入天数...载入时分秒...         

本站由 Jekyll 生成，采用 Chirpy 主题。