不是第一

Vue

简介 : 一套用于构建用户界面的渐进式JavaScript框架。

作者 : 尤雨溪

官网 : https://cn.vuejs.org/

Vue的特点

  • 轻量级(压缩后只有33K)
  • 更高的运行效率
    • 从传统的操作DOM节点过度到了虚拟的DOM
  • 双向数据绑定
    • 让开发者不用再去操作DOM , 而是把更多精力投入到业务逻辑上
  • 生态丰富 , 学习成本低

MVVM架构

MVVM : 由 Model , View , ViewModel 三部分构成

Model

代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；主要将数据和页面进行分离

View

代表UI 组件，它负责将数据模型转化成UI 展现出来

ViewModel

ViewModel 是一个同步View 和 Model的对象。

vue cli 3.0 vue init projectName

vue cli 4.0 vue create projectName

目录结构

├── build                      # 构建相关
├── static                     # 静态资源
│   │── img                    # 图片
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
│   │── Tinymce                # 富文本
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .gitignore                 # git 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
└── package.json               # package.json

vue中data里为什么要写return返回

    // 在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：
    let app = newVue({
        el: "#app",
        data: {
            msg: ''
        },
        methods: {

        }
    })
    // 在使用组件化的项目中使用的是如下形式：
    export default {
        data() {
            return {

            }
        },
        methods: {

        }
    }

DANGER

为什么要写renturn返回
因为不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

export default与export

ES6与Node中导入与暴露成员的方式

  • 使用Node暴露与导入的方式

    • 导入

      • 在Node中使用 var 名称 = require('模块标识符'); 来导入成员

    • 暴露成员

      • moudle.exports={} 和 exports来暴露成员

  • 使用ES6方式暴露成员与导入模块 在ES6中，也通过规范的形式，规定了ES6中如何导入和导出模块

    • 导入

      • ES6中导入模块，使用 import 模块名称 from '模块标识符' 或者 import '标识路径'

    • 暴露成员

      • 在ES6中使用export default 和 export向外暴露成员

案例：

  1. 新建一个test.js文件
export default{
​    name:'张三',
​    age:21
}

/** 也可以这样暴露
var info = {
​    name:'张三',
​    age:21
}
export default info;
*/
  1. 在main.js中导入test.js文件

import m1 from './test.js'; alert(m1.name); 项目打包运行，弹出张三

注意：

  1. 在main.js文件 import 模块名称 这个模块名称是自定义的，也就是说通过export default暴露的成员可以使用任意的变量来接收。

  2. 在一个模块中，只允许export default向外暴露一次

  3. 在一个模块中，可以同时使用export default和export向外暴露成员

  4. 通过“export var 变量名 = 内容” 形式向外暴露的接口，只能通过 **{模块名}的形式来接收，这种方式，叫做【按需导出】且，模块名必须和export的变量名保持一致，如果不想一致怎么办？可以通过{模块名 as 自定义名称}**的形式

  5. export可以向外暴露多个成员，同时，如果某些成员，我们在import的时候不需要，则可以不在{}中定义，意思是，即使你向外通过export暴露了多个成员，我也可以在import 的时候，在{}中，引入一个或者多个，这种方式就是按需导入。

例如：

在test.js中暴露两个成员

export default{
​    name:'张三',
​    age:21
}

export var info = {
​    name:'李四',
​    age:22
};

export var content = '你好 export！';

在main.js中接收

import m1,{info,content} from './test.js';
alert(m1.name);
alert(info.name);
alert(content);

响应式

<!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">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>名称：{{info.name}}</div>
        <div>地址：{{info.address.country}}-{{info.address.city}}-{{info.address.street}}</div>
        <div>链接：<a v-bind:href="info.url" target="_blank">{{info.url}}</a> </div>
    </div>

    <script type="text/javascript">
        var 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>