vue

举报
武师叔 发表于 2022/08/30 08:41:49 2022/08/30
【摘要】 vue vue 概念 前端框架前端开发进化过程: 原生JS 》jQuery 等类库 》Vue 等前端框架jQuery 等类库提供了已封装好的 JS 方法集合,用户在前端开发中可以直接调用(可以使用多个)。Vue 等前端框架提供了完整的项目解决方案,用户在前端开发中必须按照特定框架规范进行开发(只能选择一个)。目前主流的前端框架有 Vue 、 React 、 Angular 。 vue 特征...

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 适用于旧版本。

  1. 创建项目并使用
# 方式一
$ 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>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。