山西农业大学20241014

01-VUE

- 一 VUE
- - 1. VUE2 和 VUE3
  - 2. VUE概述
  - - 2.1 构建用户界面
    - 2.2 渐进式
  - 3. 创建Vue实例
  - - 3.1 引入vue -- 下载方式
    - 3.2 引入vue方式
    - 3.3. 代码演示
  - 4. Vue语法
  - - 4.1 插值表达式 {{}}
    - 4.2 响应式特性
    - - 4.2.1 响应式
      - 4.2.2 如何访问和修改data中的数据
  - 5. Vue开发插件

一 VUE

1. VUE2 和 VUE3

VUE2: 稳定; 2016年9月分别, 8年多时间, 200次左右的更新
VUE3: 趋势;

性能提升=> 1.2-2倍;
内核体积更小=>10kb
TS支持度更高
组合式API,封装复用逻辑

2. VUE概述

vue3: https://cn.vuejs.org/
vue2: https://v2.cn.vuejs.org/

概念: Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

2.1 构建用户界面

基于数据渲染出用户可以看到的界面

2.2 渐进式

循序渐进, 不一定非得把Vue中左右的API都学完才能开发, 可以学一点开发一点

库: 类似于工具箱, 是一堆方法的集合, 比如: axios, echarts等
框架: 是一套完整的解决方案, 实现了大部分功能, 我们只需要按照一定的规则去编码即可

3. 创建Vue实例

3.1 引入vue – 下载方式

3.2 引入vue方式

3.3. 代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>构建第一个vue实例</title>
  </head>
  <body>
    <!-- 
        创建vue实例
        1. 准备容器(Vue所管理的范围)
        2. 引包(开发版本'生产版本)官网
        3. 创建实例 new Vue
        4. 添加配置项(el,data), 完成渲染
    -->
    <!-- 不是vue管理的范围 -->
    <div class="box2">box2---{{message}}</div>

    <!-- vue所有管理的范围 -->
    <div id="app">
      <h1>{{message}}</h1>
    </div>
    <!-- 引入VUE: 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      //  一旦引入vue核心包, 在全局环境中, 有vue的构造函数, 创建vue实例
      var app = new Vue({
        // 通过el 配置选择器, 指定 vue 管理的哪个盒子
        el: '#app',
        // 通过 data 提供数据
        data: {
          message: 'hello 山西!!!',
        },
      });
    </script>
  </body>
</html>

4. Vue语法

4.1 插值表达式 {{}}

插值表达式是Vue的模板语法,可以使用插值表达式渲染出Vue提供的数据
表达式: 可以被求值的代码 ; 可以利用表达式进行插值, 渲染到页面中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>插值表达式</title>
  </head>
  <body>
    <!--  插值表达式: 利用表达式进行数据的渲染 -->
    <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>
      <!-- 错误演示 -->
      <!-- 1. 在插值运算符中使用的数据, 必须在data中声明 -->
      <!-- <p>{{hobby}}</p> -->
      <!-- 2. 支持的是表达式,  而非语句; if, for...-->
      <!-- <p>{{if}}</p> -->
      <!-- 3. 不能在标签属性中使用{{}}插值, 插值表达式只能在标签内容部分使用 -->
      <p title="{{nickname}}">我是p标签</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          nickname: 'Nice',
          age: 15,
          friend: {
            name: 'Lily',
            desc: '热爱学习',
          },
        },
      });
    </script>
  </body>
</html>

4.2 响应式特性

4.2.1 响应式

简单理解: 数据改变, 视图也会变

<body>
    <!--  响应式特性:  -->
    <div id="app">
      <p>{{msg}}</p>
      <p>{{count}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
            // 响应式数据-->数据发生变化, 视图会自动更新
          msg: 'Hello 山西!!!',
          count: 100,
        },
      });
    </script>
  </body>