前端框架Vue

vue基础知识点

首先介绍用 HTML 写结构 + script 里写 Vue,不需要环境

1.差值表达式{``{ }}

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 引入 Vue 2 -->
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>
代码 作用
<div id="app"> 页面上定义一个区域,Vue 会控制这个区域
{``{ message }} 插值表达式,显示 data 中的变量 message 的值
new Vue({...}) 创建一个 Vue 实例(最核心的部分)
el: '#app' 让 Vue 接管 id="app" 的 HTML 部分(#为id)
data: { message: ... } 定义数据,Vue 会自动和页面绑定

2.属性绑定 v-bind(简写为 :)

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>v-biuld</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!-- 引入 Vue 2 -->
</head>
<body>
    <div id="app">
        <img :src="imageUrl" alt="示例图片">
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
            imageUrl: 'https://vuejs.org/images/logo.png'
            }
        });
    </script>
</body>
</html>
代码 作用
:src="imageUrl" 动态绑定图片地址,等价于 v-bind:src
imageUrl 是你在 data 中定义的变量,比如图片地址
使用场景 动态图片、链接、class 等都可用 v-bind

3. 事件处理 v-on:click(简写为 @click)

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <button @click="count++">你点了 {{ count }} 次</button>
    </div>

    <script>
    new Vue({
        el: '#app',
        data: {
        count: 0
        }
    });
    </script>

</body>
</html>
代码 作用
@click="count++" 当按钮被点击时,变量 count 自动加一
{``{ count }} 实时显示点击次数(插值表达式)

4. 双向绑定 v-model

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <input v-model="name" placeholder="输入你的名字">
    <p>你好,{{ name }}</p>
    </div>

    <script>
    new Vue({
        el: '#app',
        data: {
        name: ''
        }
    });
    </script>
</body>
</html>


代码 作用
v-model="name" 让输入框和 name 数据双向同步
{``{ name }} 实时显示你输入的内容
场景 表单、输入框、下拉框等都可以用 v-model

5. 条件渲染 v-if

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <button @click="show = !show">切换显示</button>
    <p v-if="show">你现在能看到这句话。</p>
    <p v-else>你现在看不到原来的那句话了。</p>
    </div>

    <script>
    new Vue({
        el: '#app',
        data: {
        show: true
        }
    });
    </script>
    
</body>
</html>


代码 作用
v-if="show" showtrue 时,显示这段文字
@click="show = !show" 点击按钮会让 show 变成相反值,达到隐藏/显示的效果

6. 列表渲染 v-for

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <ul>
        <li v-for="fruit in fruits">{{ fruit }}</li>
    </ul>
    </div>

    <script>
    new Vue({
        el: '#app',
        data: {
        fruits: ['苹果', '香蕉', '橘子']
        }
    });
    </script>
    
</body>
</html>
代码 作用
v-for="fruit in fruits" 遍历数组 fruits
{``{ fruit }} 显示每一项的值
场景 渲染列表、表格、选项等

7. 计算属性 computed

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
    <input v-model="firstName"> +
    <input v-model="lastName">
    <p>全名是:{{ fullName }}</p>
    </div>

    <script>
    new Vue({
        el: '#app',
        data: {
        firstName: '张',
        lastName: '三'
        },
        computed: {
        fullName() {
            return this.firstName + this.lastName;
        }
        }
    });
    </script>

    
</body>
</html>
代码 作用
v-model="firstName" 输入名字
v-model="lastName" 输入姓氏
computed.fullName 自动计算并返回全名
优势 当依赖的数据变化时,自动重新计算,无需手动调用函数

值得注意的是computed里的函数实际上是一种简写,完整如下:

html 复制代码
fullName: function() {
  return this.firstName + this.lastName;
}

这是因为JavaScript 从 ES6 开始,支持对象方法的简写写法,即对象作为方法名,返回的直接作为对象的内容

总结

Vue 指令/语法 含义 示例
{``{ data }} 插值语法,显示数据值 <p>{``{ name }}</p>
v-bind or : 绑定 HTML 属性 <img :src="imageUrl">
@click 绑定点击事件 <button @click="do()">
v-model 双向数据绑定 <input v-model="name">
v-if/v-else 条件显示/隐藏 <p v-if="isVisible">
v-for 遍历数组,渲染列表 v-for="item in items"

Vue进阶

前置知识

  1. 模块化开发:大程序拆成多个小模块,每个模块完成特定功能,最终组合起来构建完整应用。在 Vue 中,每个 .vue 文件就是一个模块(组件模块)
  2. Vue CLI 与 Vite
    这两者是 Vue 项目的两种构建工具:
特性 Vue CLI Vite
技术年代 较早(Webpack) 较新(基于原生 ES 模块)
编译速度 慢(初始构建慢) ⚡ 极快(冷启动秒开)
配置复杂度 低,开箱即用
推荐使用 Vue2 项目 Vue3 项目官方推荐
html 复制代码
my-project/
├── public/        # 静态资源
├── src/
│   ├── main.js    # 入口文件
│   ├── App.vue    # 根组件
│   └── components/
├── package.json   # 项目信息 & 依赖
  1. Node.js 环境:一个 运行 JavaScript 的服务器端环境;让你在本地运行 npm 命令来安装和运行项目;不是 Vue 专属,是前端工具生态的底层。

创建vue

1.环境配置请见其他博客

2.在代码文件夹输入

bash 复制代码
vue create test2

选择vue版本

这时会出现如下文件夹和终端信息

输入下面代码,是运行整个文件用的

bash 复制代码
npm run serve

进入Local,出现这个页面就是成功了。

相关推荐
Cache技术分享4 分钟前
203. Java 异常 - Throwable 类及其子类
前端·后端
wingring5 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码
前端
LFly_ice6 分钟前
学习React-20-useId
前端·学习·react.js
要加油哦~10 分钟前
刷题 | 牛客 - 前端面试手撕题 - 中等 - 1-2/20 知识点&解答
前端·面试
Async Cipher19 分钟前
JSON-LD 的格式
前端·javascript
LFly_ice34 分钟前
学习React-18-useCallBack
前端·学习·react.js
双普拉斯38 分钟前
Spring WebFlux调用生成式AI提供的stream流式接口,实现返回实时对话
java·vue.js·人工智能·后端·spring
How_doyou_do2 小时前
样式冲突修复组件
前端·javascript·html
IT_陈寒2 小时前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe2 小时前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app