前端框架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,出现这个页面就是成功了。

相关推荐
rzl027 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang8 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景10 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼11 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿12 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再15 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55519 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录24 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000025 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl26 分钟前
深度剖析Kafka读写机制
前端