Vue2快速上手

本节目标

初步了解vue

  • vue定义
  • 开发方式
  • 体验核心包开发
  • 插值表达式
  • 响应式特征
  • 开发者工具

vue定义

vue2官网: Vue.js

vue是用于构建用户界面的渐进式框架

💡 Tips: 构建用户界面 -> 数据驱动视图

💡 Tips: 渐进式 -> 学一部分就能用一部分

开发方式

vue有两种开发方式: 核心包开发 | 工程化开发

💡 Tips:

核心包开发

  1. 作用: 适合局部模块改造
  2. 步骤: 基于html/css/js文件, 直接引入核心包开发, 编写的代码就是运行的文件

💡 Tips:

工程化开发

  1. 作用: 适合整站开发
  2. 步骤: 基于构建工具生成的环境开发程序, 运行的文件是编译后代码
  3. 工具:
  • webpack: 配置繁琐/基础配置雷同/各公司缺乏统一标砖
  • vue cli: 基于webpack/快速搭建代码环境/生成标准化配置

体验核心包开发

  1. 准备容器
  2. 引入核心包
  • 开发版本: 包含完整的警告和调试模式
  • 生产版本: 体积更小
  1. 创建vue实例
  2. 指定配置项
  • el指定挂载点

  • data提供数据

    <body>
    复制代码
       <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
       <script>
          const app = new Vue({
              // 指定挂载点
              el: '#app',
              // 管理数据源
              data: { },
          })
       </script>
    </body>

插值表达式

作用: 利用表达式进行插值,将数据渲染到页面中

语法格式: {{ 表达式 }}

💡 Tips:

  1. 使用的数据需要存在于data中
  2. 支持的表达式,而不是语句
  • 表达式: 可以被求值的代码就是表达式
  • 语句: 执行一个操作的代码就是语句
  1. 不能再标签属性中使用

    <body>

    {{ msg }}

    {{ age+1 }}

    {{ friend.name }}

    复制代码
      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
      <script>
         const app = new Vue({
             // 指定挂载点
             el: '#app',
             // 管理数据源
             data: {
                 msg: 'hello world',
                 age: 19,
                 friend: {
                     name: 'jepson'
                 }
             },
         })
      </script>
    </body>

响应式特性

数据变化, 视图自动更新

💡 Tips:

目标: 通过控制台修改数据, 体验数据驱动视图更新

原理: data中的数据,会被添加到实例上

  1. 在控制台中调试

  2. 访问数据: 实例.属性名

  3. 修改数据: 实例,属性名 = 新值

    <body>

    {{ msg }}

    复制代码
      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
      <script>
         const app = new Vue({
             // 指定挂载点
             el: '#app',
             // 管理数据源
             data: {
                 msg: 'hello world',
             },
         })
      </script>
    </body>

开发者工具

帮助我们更方便的调试代码

谷歌应用商店

  1. 补充: 由于网络限制, 可能无法打开

极简插件

官网: 极简插件官网_Chrome插件下载_Chrome浏览器应用商店

使用:

  1. 下载/解压
  2. 谷歌浏览器/设置/扩展程序/开发者模式
  3. 拖拽安装
  4. 设置插件详情允许访问文件
  5. 重启浏览器
相关推荐
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's7 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim8 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim8 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心8 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络8 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺9 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear10 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化