vue

vue 概念

前端框架

前端开发进化过程： 原生JS 》jQuery 等类库 》Vue 等前端框架

• jQuery 等类库提供了已封装好的 JS 方法集合，用户在前端开发中可以直接调用（可以使用多个）。
• Vue 等前端框架提供了完整的项目解决方案，用户在前端开发中必须按照特定框架规范进行开发（只能选择一个）。

目前主流的前端框架有 Vue 、 React 、 Angular 。

vue 特征

Vue 主要有以下两大特征：

1. 响应式数据绑定：数据发生改变，视图自动更新（开发者不再关注 dom 操作，进一步提高开发效率）。
2. 可组合视图组件：视图按照功能切分成基本单元（易维护，易重用，易测试）。

vue 使用

• 引入外部文件(CDN)

<!-- 开发环境版本，包含命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化文件大小和响应速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Copy to clipboardErrorCopied

• 命令行工具(CLI)

vue-cli 是基于 Node.js 的 vue 快捷开发工具，使用前首先要下载并安装 Node.js 开发环境。

1. 安装脚手架

$ npm install @vue/cli -g          # 全局安装安装 vue-cli 工具Copy to clipboardErrorCopied

@vue/cli 适用于 vue 2.X ，vue-cli 适用于旧版本。

2. 创建项目并使用

# 方式一
$ vue create project-name          # 直接创建项目
$ npm run dev                      # 开发环境启动项目（可配置）        
$ npm run build                    # 运行环境启动项目（可配置）     

# 方式二
$ vue ui                           # 开启图形化工具，用来创建和管理项目

vue 对象

vue 对象是管理 vue 的基本单元，开发者可以在 JS 代码中创建 vue 对象。

在 vue 对象中，必须通过 el 指定 vue 对象作用域。

<script>
    var app = new Vue({
      el: '#app',
      ...
    });
</script>Copy to clipboardErrorCopied

数据显示

在 vue 对象中，通过 data 存储 vue 对象中的数据。

<!-- 数据显示 -->
<p v-text="message"></p>              <!-- v-text -->
<p>Word is {{ message }}</p>          <!-- 插值表达式：可以对内容进行扩展 --> 
<p v-html="message"></p>              <!-- v-html: 可以直接插入 html 元素 -->  

<!-- vue 对象 -->
<script>
    var app = new Vue({
      el: '#app',
      // 数据
      data: {
        message: 'Hello Vue',         // 数据
        data: []                      // 数组数据
      },
    });
    app.message="GoodBye Vue.";       // vue 对象数据可以被 JS 代码更新
</script>