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. 重启浏览器
相关推荐
aPurpleBerry11 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子40 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据2 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea