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

相关推荐
烛阴21 分钟前
Mix
前端·webgl
代码续发33 分钟前
前端组件梳理
前端
试图让你心动1 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_1 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记2 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏2 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数2 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante2 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam3 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript