跳至主要內容

vue初识

辉哥大约 8 分钟html5666

vue初识

以下为学习过程中的极简提炼笔记，以供重温巩固学习

学习准备

准备工作

html+css+JavaScript 3剑客都懂一点，完成AJAX技术学习，nodejs可以同步学

学习目的

  • 全局：
    • vue2 2.7.14
    • vue router
    • vuex组件库状态管理
    • ESLint企业级开发规范
    • vue3 3.3.4
    • 下一代构建工具 vite
    • 下一代状态管理工具 pinia
    • element plus+

vue初识

  • 本节：认识vue

vue是什么

  • 官方概念定义：vue是一个用于构建用户界面的渐进式的框架
    • 构建用户界面：基于数据渲染出用户看到的页面
    • 渐进式：
      • 循序渐进；声明式渲染>组件系统>客户端路由vue router>大规模状态管理vuex>构建工具webpack/vite
      • vue核心包开发：局部模块改造
      • vue核心包&插件 工程化开发：整站开发
    • 框架：一整套完整的项目解决方案，适合企业化项目开发，比js效率高70，但是受框架语言规则约束

创建实例-初始化渲染

构建用户界面 > 创建vue实例初始化渲染 > 分4步核心步骤：

  1. 准备用于渲染的容器
  2. 官网引包，分为开发版本/生产版本
  3. 创建Vue实例 new Vue()
  4. 在实例中指定配置项，以绑定实例管理的 容器挂载点el 和 数据data{} ，作渲染
  • 准备用于渲染的容器：
    • 在html标签中，指定id属性
    • 在标签innerHTML中，使用双大括号括住NaN
<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{ count }}</a>
</div>

  • 官网引包，分为开发版本/生产版本

    • vue2
    • vue3
    • CDN/直接下载+script标签引入，Vue会被注册为一个全局变量，就有了 Vue 构造函数

  • 有了构造函数，可以在script中创建Vue实例 new Vue()

  • 通过el配置选择器，通过 data 提供渲染数据，将数据变量名后续放到渲染容器中

  • 在vsscode中，通过alt+b启动浏览器预览效果

  • 数据更改，渲染同步更改

构建用户界面 > 创建vue实例初始化渲染
<!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">
  <title>Document</title>
</head>
<body>

<!-- 
  创建Vue实例，初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

<!-- 不是Vue管理的范围 -->
<div class="box2">
  box2 -- {{ count }}
</div>
<div class="box">
  box -- {{ msg }}
</div>
-----------------------------------------------------
<!-- Vue所管理的范围 -->
<div id="app">
  <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
  <h1>{{ msg }}</h1>
  <a href="#">{{ count }}</a>
</div>

<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script>
  // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
  const app = new Vue({
    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
    el: '#app',
    // 通过 data 提供数据
    data: {
      msg: 'Hello 传智播客',
      count: 666
    }
  })

</script>

  
</body>
</html>

Vue基本结构定义总结

  • 总结各个定义：

    • new Vue()构造函数：

      • 如果没有复用的情况下，可以不需要写变量接收
      • 如果用到methods处理函数，需要写变量接收

    • 用于渲染的容器：

      • 定义：即原HTML标签中，通过id属性=赋值el配置选择器，引入由Vue实例中，通过new Vue()构造函数所配置的变量
      • 渲染方法：通过{{}}插值表达式进行指定赋值及渲染

    • 实例中的各个指定的配置项：

      • el：即配置选择器，绑定用于渲染的容器
      • data：即new Vue()构造函数所配置的数据对象，已挂到el配置的名称/容器绑定
      • methods：即new Vue()构造函数所配置的处理函数，用于@事件所绑定的处理逻辑，将配置赋予给要渲染的容器
      • 区别：el指定容器；data提供数据；methods提供方法

插值表达式{{}}

  • 定义：

    • 插值表达式是一种Vue的模板语法
    • 利用表达式进行插值，将数据动态渲染到页面中

  • 作用：利用表达式进行插值，渲染到页面中

    • 表达式:是可以被求值的代码，JS引擎会将其计算出一个结果

  • 语法：{{表达式}}

  • 注意点：

    • 使用的数据必须存在在（data）中
    • 支持的是表达式，不支持语句，不支持逻辑语句，如if for
    • 不能在html标签属性中使用{{}}插值
复习表达式
// 表达式包括：

// 运算 
money + 100
money - 100
money * 100
money / 100

// 三元表达式
price >= 100 ?'真-真贵':'假-还行'

// 对象中的属性，点语法
obj.name

// 数组中的下标第几个
arr[e]

// 函数的调用
fn()

// 方法
obj.fn()
复习表达式
<!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">
  <title>Document</title>
</head>
<body>

  
<!-- 
  插值表达式：Vue的一种模板语法
  作用：利用 表达式 进行插值渲染
  语法：{{ 表达式 }}

  注意点：
    1. 使用的数据要存在
    2. 支持的是表达式，不是语句  if  for
    3. 不能在标签属性中使用 {{ }}
 -->
<div id="app">
  <p>{{ nickname }}</p>
  <p>{{ nickname.toUpperCase() }}</p>
  <p>{{ nickname + '你好' }}</p>
  <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
  <p>{{ friend.name }}</p>
  <p>{{ friend.desc }}</p>

  <!-- ----------------------- -->
  <!-- <p>{{ hobby }}</p> -->
  <!-- <p>{{ if }}</p> -->
  <!-- <p title="{{ nickname }}">我是p标签</p> -->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: {
      nickname: 'tony',
      age: 18,
      friend: {
        name: 'jepson',
        desc: '热爱学习 Vue'
      }
    }
  })


</script>

</body>
</html>

响应式特性

  • Vue 核心特性：响应式 我们已经掌握了基础的模板渲染，其实除了基本的模板渲染，Vue背后还做了大量工作 比如：数据的响应式处理

    • 响应式：数据变化，视图自动更新
    • vue监听数据修改，调动底层DOM操作，自动更新视图

  • 如何访问 or 修改数据？

    • data中的数据，最终会被添加到实例上
      • 访问数据:"实例.属性名"
      • 修改数据:"实例.属性名" = "值"
基于 fs 模块读写文件内容，将下面代码写到 XXX.js 文件中
<!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">
  <title>Document</title>
</head>
<body>

<div id="app">
  {{ msg }}
  {{ count }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

  // 创建实例
  const app = new Vue({
    el: '#app',
    data: {
      // 响应式数据 → 数据变化了，视图自动更新
      msg: '你好，黑马',
      count: 100
    }
  })

  // data中的数据，是会被添加到实例上
  // 1. 访问数据  实例.属性名
  // 2. 修改数据  实例.属性名 = 新值

</script>

</body>
</html>

  • 可到浏览器调试中，实践访问 or 修改数据的响应式特性

  • 可以通过app.msg、app.count访问，

  • 可以通过app.msg=xxx、app.count++直接赋值修改，回车，赋值/数据变化后，浏览器自动更新

  • 使用vue开发，如果需要更改视图，只需关系最核心的业务逻辑，根据业务逻辑修改数据，浏览器的显示会根据数据变化而自动更新

开发者工具

  • 安装Vue开发者工具：

    • 本质上是一个浏览器插件工具
    • edge商店搜索：vuejs development
    • 浏览器插件网站下载
    • github中找插件的官方项目下载

  • 工具安装后，使用条件：

    • 安装后需要允许访问文件网址（有时候可能所有配置都要打开允许）
    • 需要当前打开的页面是使用vue开发
    • 需要页面允许调试，如dev模式
    • 打开调试f12，符合以上条件，控制台会有vue页签显示

  • 使用开发者工具：

    • 打开控制台vue页签，可以直接修改，观察数据更新
power by VuePressThemeHope
Copyright © 2025 辉哥