Vue2基础笔记回顾（一）

站长

2023年09月20日 15:30 · 阅读数 62

Vue 是什么

目标

Vue2基础笔记回顾（一）

概念

渐进式 JavaScript 框架，拥有自己的一套语法规则，官网地址。

渐进式

🤔 渐进式：渐进式就是按需、逐渐的使用某部分功能。

前端学习的渐进式：逐渐进步，学习前端的“渐进式”。

Vue2基础笔记回顾（一）

Vue 的渐进式：逐渐使用部分功能，不必全部使用。

Vue2基础笔记回顾（一）

库和框架

库：针对特定问题的单一解决方案，小而精，一般封装了好用的属性或方法（例如 jQuery）。

框架：提供了一整套的解决方案，特点是大而全，（例如 Vue）。

Vue2基础笔记回顾（一）

Vue 如何学

目标

了解 Vue 的学习方式和开发方式。

开发方式

传统开发模式：基于每一个单独的 HTML/CSS/JS 文件开发 Vue。

Vue2基础笔记回顾（一）

工程化（脚手架）开发方式：在 Webpack 环境中开发 Vue，这是最推荐，企业中使用的方式。

Vue2基础笔记回顾（一）

Vue 脚手架

脚手架介绍

目标

自己配置 Webpack 环境非常的繁琐，官方提供了 Vue CLI 这个脚手架，可以快速搭建项目基础结构。

概念

生活中的脚手架是为了保证施工过程顺利而进行搭设的工作平台，在代码里的体现，就是一套固定标准的，文件夹 + 文件 + Webpack 配置。

Vue2基础笔记回顾（一）

好处

开箱即用。
Webpack 零配置。
Babel 支持。
CSS、Less 支持。
开发服务器支持。

脚手架准备

步骤

打开终端在文件夹路径处输入cmd，enter进入

全局安装 @vue/cli 模块包。(终端中进行)

yarn global add @vue/cli # or npm install -g @vue/cli

🤔 如果半天没动静（95%都是网速问题），可以按 ctrl c，换网络热点继续重来。

查看 Vue 脚手架版本。(终端中进行)

vue -V
# 注意 -V 是大写的 vue -V

如果出现版本号就表示安装成功，否则失败。

创建项目

目标

用 Vue 命令，创建一个脚手架项目，并启动 Webpack 开发服务器。

步骤

创建项目，注意：项目名不要带大写字母、中文和特殊符号。(终端中进行)

vue create vuecli-demo
# vue 和 create 是命令，是固定的写法，vuecli-demo 是自己的文件夹名字

选择模板，可以上下箭头选择，回车确定，弄错了 ctrl+c 从第 1 步来。

Vue2基础笔记回顾（一）

选择包管理器。

Vue2基础笔记回顾（一）

耐心等待脚手架需要的依赖包（喝点水，等会 ~）。

Vue2基础笔记回顾（一）

通过 cd 命令进入项目路由，通过 yarn serve 启动服务器。

cd vuecil-demo  yarn serve # 或 npm run serve

只要看到绿色的，表示成功了。

Vue2基础笔记回顾（一） 7. 在浏览器中输入地址。

Vue2基础笔记回顾（一）

脚手架目录

目标

了解目录作用，基于它开发自己项目。

vuecil-demo         # 项目目录
   ├── node_modules # 项目依赖的第三方包
   ├── public       # 静态文件目录
     ├── favicon.ico# 浏览器小图标
     └── index.html # 单页面的 HTML 文件（网页浏览的就是它）
   ├── src          # 源代码文件夹
     ├── assets     # 静态资源
       └── logo.png # Vue 的 logo 图片
     ├── components # 组件目录
       └── HelloWorld.vue # 欢迎页面 Vue 代码文件
     ├── App.vue    # 整个应用的根组件
     └── main.js    # 入口 JS 文件
   ├── .gitignore   # git 提交忽略配置
   ├── babel.config.js  # babel 配置
   ├── package.json # 依赖包列表
   ├── README.md    # 项目说明
   └── yarn.lock    # 项目包版本锁定和缓存地址

记住下面几个主要文件的作用。

node_modules      – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js       – Webpack 打包的入口文件
src/App.vue       – Vue 入口页面
package.json      – 依赖包列表文件和自定义命令

脚手架结构

项目入口和其他文件的关系。

如图所示，一切从 main.js 开始，到 index.html 结束。

Vue2基础笔记回顾（一）

脚手架配置

脚手架内置的 Webpack，如何修改配置。

步骤

和 src 目录同级，新建 vue.config.js。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,
    devServer: {
        host: 'localhost',
        port: 3000,
        open: true,
    },
})

关于 ESLint

目标

了解什么是 ESLint？

解释

🤔 ESLint 脚手架内置代码检查工具（插件），可以帮助我们检查你的代码风格。

例如在 main.js 随便声明个变量（不使用这个变量）。

Vue2基础笔记回顾（一）

运行后观察发现，终端和页面都报错了，因为 ESLint 检测出来代码写的不严谨。

Vue2基础笔记回顾（一）

解决

方式 1：手动解决掉错误，百度就可以解决。

方式 2：暂时关闭 ESLint 检查（因为现在主要精力在学习 Vue 语法上）。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    // ...其他代码
    lintOnSave: false,
})

🤔 注意：配置文件的修改需要重启服务才能生效。

单 Vue 文件

掌握 Vue 文件，使用规则和特点。

template 里只能有一个根标签。
每一个 Vue 文件是一个独立模块，有自己的作用域，不用担心命名冲突问题。
style 配合 scoped 属性，可以保证样式只针对当前文件的 template 内标签生效。
配合 Webpack，可以把 .vue 文件打包起来插入到 index.html。

<!-- template 必须，只能有一个根标签，影响渲染到页面的标签结构 -->
<template>
    <div>欢迎使用 Vue</div>
</template>

<!-- JS 相关 -->
<script>
    export default {
        name: 'App',
    }
</script>

<!-- 当前组件的样式，设置 scoped，可以保证样式只对当前页面有效 -->
<style scoped></style>

清理欢迎界面

步骤

精简 src/App.vue 文件中的内容如下。

<template>
    <div>App</div>
</template>

<script>
    export default {}
</script>

<style></style>

assets 和 components 文件夹下的内容都清空。

Vue2基础笔记回顾（一）

Vue 掌握插值表达式

学习插值表达式，能做到在 DOM 中插入内容。

学习

叫法：声明式渲染/文本插值/大胡子语法。
语法：{{ 表达式 }}。

<template>
    <div>
        <h1>{{ msg }}</h1>
        <h2>{{ obj.name }}</h2>
        <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
    </div>
</template>

<script>
    export default {
        data() {
            // 格式固定，定义 Vue 数据之处
            return {
                // key 相当于变量名
                msg: 'Hello, Vue',
                obj: {
                    name: '小 Vue',
                    age: 5,
                },
            }
        },
    }
</script>

Vue MVVM 设计模式

了解 Vue 设计模式，转换自己编程思想。

演示

演示：在上个代码基础上，通过 devtool 开发者工具改变 M 层的数据，观察 V 层（发现视图的自动同步）。

Vue2基础笔记回顾（一）

设计模式：是一套被反复使用的、代码设计经验的总结（代码分层，架构设计）。

MVVM 是一种软件/框架开发模式，需要了解其中所表示的含义。
- M：model 数据模型（需要在 data 里定义）。
- V：view 视图（页面）。
- VM：ViewModel 视图模型（Vue 源码）。
MVVM 通过数据双向绑定让数据自动地同步到视图，不再需要操作 DOM（思想转变）。

Vue2基础笔记回顾（一）

Vue v-bind 动态属性

v-bind，掌握给标签属性如何赋值 Vue 变量。

Vue 指令：实质上就是特殊的 HTML 标签属性，特点：v- 开头，每个指令都有特定的作用，学习第一个指定 v-bind。

语法：v-bind:属性名="Vue 变量"。
简写：:属性名="Vue 变量"。

<!-- 通过 v-bind 指令，可以为属性动态赋值 -->
<template>
    <div>
        <a v-bind:href="url">我是a标签</a>
        <img :src="imgSrc" width="100" />
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: 'https://www.baidu.com',
                imgSrc: 'https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF',
            }
        },
    }
</script>

Vue v-on 事件绑定

基础语法

掌握通过 v-on 进行事件绑定。

学习

v-on:事件名=”methods 中的函数”。
v-on:事件名=”methods 中的函数(实参)”。
v-on: 可以简写为 @ 符号。

<template>
    <div>
        <p>你要买商品的数量：{{ count }}</p>
        <button v-on:click="addFn">+1</button>
        <button v-on:click="addCountFn(5)">+5</button>
        <button @click="subFn">-1</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                count: 1,
            }
        },
        methods: {
            addFn() {
                // this 表示当前组件实例，可以访问到 data 里面的数据
                this.count++
            },
            addCountFn(num) {
                this.count += num
            },
            subFn() {
                this.count--
            },
        },
    }
</script>

点击说笑话案例

点击按钮，随机切换显示一个笑话。

模板

准备一个变量，给初始值，显示到页面上。
再准备一个笑话数组。
点击按钮，随机提取一个笑话字符串，赋予给 word 变量。

<!-- 直接复制这个，接着写即可。 -->
<template>
    <div>
        <p>{{ word }}</p>
        <button>点击说笑话</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                word: '这里是一条笑话',
                jokeArr: [
                    '我去相亲网站去了，那你找到对象了吗? 不! 我找到了他们网站的一个Bug',
                    '讲述一下车怎么翻沟里了。我坐在副驾说沟！沟!沟! 朋友说：欧嘞，欧嘞。欧嘞 结果车就翻里了。',
                    '几位大哥开车去钓鱼，车陷草里了，然后几个大神说把草烧了就出来了，然后就放火烧了，结果就烧没了。',
                ],
            }
        },
    }
</script>

代码

<!-- 直接复制这个，接着写即可。 -->
<template>
    <div>
        <p>{{ word }}</p>
        <button @click="jokeBtnFn">点击说笑话</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                word: '这里是一条笑话',
                jokeArr: [
                    '我去相亲网站去了，那你找到对象了吗? 不! 我找到了他们网站的一个Bug',
                    '讲述一下车怎么翻沟里了。我坐在副驾说沟！沟!沟! 朋友说：欧嘞，欧嘞。欧嘞 结果车就翻里了。',
                    '几位大哥开车去钓鱼，车陷草里了，然后几个大神说把草烧了就出来了，然后就放火烧了，结果就烧没了。',
                ],
            }
        },
        methods: {
            jokeBtnFn() {
                const randNum = Math.floor(Math.random() * this.jokeArr.length)
                const str = this.jokeArr[randNum]
                this.word = str
            },
        },
    }
</script>

事件对象

Vue 事件处理函数中，如何拿到事件对象。

学习

无传参，通过形参直接接收。
传参，通过固定的 $event 指代事件对象传给事件处理函数。

<template>
    <div>
        <a @click="one" href="http://www.baidu.com">阻止跳转到百度</a>
        <hr />
        <a @click="two(10, $event)" href="http://www.baidu.com">阻止跳转到百度</a>
    </div>
</template>

<script>
    export default {
        methods: {
            one(e) {
                e.preventDefault()
            },
            two(num, e) {
                e.preventDefault()
            },
        },
    }
</script>

修饰符

掌握事件修饰符，可以给事件带来更强大的功能。

学习

@事件名.修饰符=”methods 里函数”。

.stop，阻止事件冒泡。
.prevent，阻止默认行为。

<template>
    <div @click="fatherFn">
        <!-- .stop 阻止冒泡，点击按钮时，外部的 click 不会再被触发 -->
        <button @click.stop="btn">.stop阻止事件冒泡</button>
        <!-- .prevent 阻止默认行为，点击 a 标签不会再进行跳转 -->
        <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    </div>
</template>

<script>
    export default {
        methods: {
            fatherFn() {
                console.log('father 被触发')
            },
            btn() {
                console.log(1)
            },
        },
    }
</script>

按键修饰符

给键盘事件，绑定修饰符。

学习

@keyup.enter，监听回车按键。
@keyup.esc，监听 ESC 按键。

<template>
    <div>
        <input type="text" @keydown.enter="enterFn" />
        <hr />
        <input type="text" @keydown.esc="escFn" />
    </div>
</template>

<script>
    export default {
        methods: {
            enterFn() {
                console.log('按下了 Enter')
            },
            escFn() {
                console.log('按下了 ESC')
            },
        },
    }
</script>

翻转世界案例

点击按钮，对视图中的文字进行反转。

Vue2基础笔记回顾（一）

代码

<template>
    <div>
        <h1>{{ message }}</h1>
        <button @click="btn">逆转世界</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'HELLO, WORLD',
            }
        },
        methods: {
            btn() {
                this.message = this.message.split('').reverse().join('')
            },
        },
    }
</script>

Vue v-model 双向绑定

基本绑定

v-model，把表单值和 Vue 变量双向绑定。

学习

语法: v-model=”vue 数据变量”。
双向数据绑定。
- 数据变化 -> 视图自动同步。
- 视图变化 -> 数据自动同步。
演示：text、password、select。

<template>
   <div>
       <!-- v-model：是实现 Vue 变量和表单标签 value 属性，双向绑定的指令 -->
       <div>
           <span>用户名:</span>
           <input type="text" v-model="username" />
       </div>
       <div>
           <span>密码:</span>
           <input type="password" v-model="pass" />
       </div>
       <div>
           <span>来自于: </span>
           <!-- 下拉菜单要绑定在select上 -->
           <select v-model="from">
               <option value="北京市">北京</option>
               <option value="南京市">南京</option>
               <option value="天津市">天津</option>
           </select>
       </div>
   </div>
</template>

<script>
   export default {
       data() {
           return {
               username: '',
               pass: '',
               from: '',
           }
       },
   }
</script>

其他绑定

v-model 在其他表单标签使用。

学习

用在 checkbox、radio、textarea 上。

修饰符

目标

掌握 v-model 上常见的修饰符。

学习

v-model.修饰符=”Vue 数据变量”。

.number，以 parseFloat 的形式转成数字类型。
.trim，去除首尾空白字符。
.lazy，在 change 时触发事件（默认是 input，输入时）。

<template>
   <div>
       <div>
           <!-- 遇到复选框，v-model 的变量值有下面两种情况 -->
           <!-- 非数组，关联的是复选框的 checked 属性（true / false） -->
           <!-- 数组，关联的是复选框的 value 属性 -->
           <span>爱好: </span>
           <input type="checkbox" v-model="hobby" value="抽烟" />抽烟 <input type="checkbox" v-model="hobby" value="喝酒" />喝酒 <input type="checkbox" v-model="hobby" value="写代码" />写代码
       </div>
       <div>
           <span>性别: </span>
           <input type="radio" value="男" v-model="gender" />男 <input type="radio" value="女" v-model="gender" />女
       </div>
       <div>
           <span>自我介绍</span>
           <textarea v-model="intro"></textarea>
       </div>
   </div>
</template>

<script>
   export default {
       data() {
           return {
               hobby: [],
               gender: '',
               intro: '',
           }
       },
   }
</script>

Vue v-html

学习 v-html，解析标签及内容。

学习

语法：v-html="Vue 数据变量"。
注意：会覆盖插值表达式（插值表达式不会解析标签）。

<template>
    <div>
        <div v-html="str"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                str: '<h2>我是一个span标签</h2>',
            }
        },
    }
</script>

Vue v-show 和 v-if

控制标签显示或隐藏。

学习

语法。
- v-show=”Vue 变量”。
- v-if=”Vue 变量”。
原理。
- v-show 是通过 CSS 样式控制的显示和隐藏（频繁切换使用）。
- v-if 直接从 DOM 树重新创建和移除，能配合 v-else-if、v-else 使用。

<template>
    <div>
        <h1 v-show="isOk">v-show的盒子</h1>
        <h1 v-if="isOk">v-if的盒子</h1>

        <div>
            <p v-if="age > 30">中年</p>
            <p v-else-if="age > 18">成年</p>
            <p v-else>未成年</p>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                isOk: true,
                age: 18,
            }
        },
    }
</script>

折叠面板案例

目标

需求：点击展开或收起时，把内容区域显示或者隐藏。

Vue2基础笔记回顾（一）

准备步骤

此案例使用了 less 语法，需要下载模块。

yarn add less less-loader -D

只有标签和样式（复制继续写）。

<template>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <div>
            <div class="title">
                <h4>芙蓉楼送辛渐</h4>
                <span class="btn"> 收起 </span>
            </div>
            <div class="container">
                <p>寒雨连江夜入吴，</p>
                <p>平明送客楚山孤。</p>
                <p>洛阳亲友如相问，</p>
                <p>一片冰心在玉壶。</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
    }
</script>

<style lang="less">
    body {
        background-color: #ccc;
        #app {
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border: 4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            padding: 1em 2em 2em;
            h3 {
                text-align: center;
            }
            .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid #ccc;
                padding: 0 1em;
            }
            .title h4 {
                line-height: 2;
                margin: 0;
            }
            .container {
                border: 1px solid #ccc;
                padding: 0 1em;
            }
            .btn {
                /* 鼠标改成手的形状 */
                cursor: pointer;
            }
        }
    }
</style>

完整代码

<template>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <div>
            <div class="title">
                <h4>芙蓉楼送辛渐</h4>
                <!-- #2 isShow 作用于文案 -->
                <!-- #4 绑定点击事件 -->
                <span class="btn" @click="isShow = !isShow"> {{ isShow ? '收起' : '展开' }} </span>
            </div>
            <!-- #3 isShow 作用于内容 -->
            <div class="container" v-show="isShow">
                <p>寒雨连江夜入吴,</p>
                <p>平明送客楚山孤。</p>
                <p>洛阳亲友如相问，</p>
                <p>一片冰心在玉壶。</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // #1
                isShow: false,
            }
        },
    }
</script>

Vue v-for

学习 v-for，循环数据生成标签。

学习

语法：v-for="(值变量，索引变量) in 目标"。
目标：数组 / 对象 / 数字 / 字符串。
注意。
- v-for 的临时变量名不能用到 v-for 范围外。
- 循环时候绑定的 key 值不能重复。

遍历数组。

<template>
    <div id="app">
        <!-- v-for 把一组数据，渲染成一组 DOM -->
        <!-- 口诀：让谁循环生成，v-for 就写谁身上 -->
        <p>学生姓名</p>
        <ul>
            <li v-for="(item, index) in arr" :key="item">{{ index }} - {{ item }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
        return {
            arr: ["小明", "小欢欢", "大黄"]
        }
    }
</script>

遍历数组内对象。

<template>
    <div id="app">
        <!-- 省略其他 -->
        <p>学生详细信息</p>
        <ul>
            <li v-for="obj in stuArr" :key="obj.id">
                <span>{{ obj.name }}</span>
                <span>{{ obj.sex }}</span>
                <span>{{ obj.hobby }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // ...省略其他
                stuArr: [
                    {
                        id: 1001,
                        name: '孙悟空',
                        sex: '男',
                        hobby: '吃桃子',
                    },
                    {
                        id: 1002,
                        name: '猪八戒',
                        sex: '男',
                        hobby: '背媳妇',
                    },
                ],
            }
        },
    }
</script>

Vue2基础笔记回顾（一）

转载自:https://juejin.cn/post/7158127733313110047