vue学习笔记（一）——vue基础（vue/cli、vue指令）

因为奋斗超太帅啦

已于 2023-11-14 17:21:07 修改

阅读量134

点赞数

文章标签： vue.js 学习笔记

于 2023-11-06 21:31:34 首次发布

本文链接：https://blog.csdn.net/weixin_56370772/article/details/134253647

版权

一、Vue基本概念

1.1 Vue是什么

渐进式 javacript 框架 , 一套拥有自己规则的语法

官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

① 渐进式

生活里-渐进式
渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用
web里-渐进式
HTML能写网页, CSS能让网页更好看, JS赋予网页交互效果, jQ写的更快, node可以提供动态数据
Vue里-渐进式
Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个Vue回过头来看, 会很有帮助。渐进式就是逐渐使用, 集成更多的功能

② 库和框架

库: 封装的属性或方法 (例jQuery)
框架: 拥有自己的规则和元素, 比库强大的多 (例Vue)

1.2 Vue学习方式

传统开发模式：基于html文件开发Vue

工程化开发方式：在webpack环境中开发Vue，这是最推荐, 企业常用的方式

二、@vue/cli脚手架

2.1 @vue/cli和脚手架介绍

@vue/cli 是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

脚手架好处

开箱即用

0配置webpack

babel支持

css, less支持

开发服务器支持

2.2 @vue/cli安装

全局安装@vue/cli 模块包

查看是否成功

如何安装全局包

yarn global add 包名 / npm install 包名 –g

我们会得到什么呢

全局包会在计算机中配置全局命令(例: vue命令)

2.3 @vue/cli 创建项目

1. 创建项目

注意 : 项目名不能有大写字母 , 中文和特殊符号

2. 选择模板和包管理器, 等待脚手架项目创建完毕

2.4 @vue/cli 启动开发服务

1. cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 浏览项目页面

2. 如果未自动弹出浏览器, 手动打开输入提示的域名+端口浏览项目页面

2.5 @vue/cli 目录和代码分析

目标：文件夹和文件含义, 关键文件里代码意思

脚手架里主要文件和作用?

1. node_modules – 都是下载的第三方包

2. public/index.html – 浏览器运行的网页

3. src/main.js – webpack 打包的入口

4. src/App.vue – Vue页面入口

5. package.json – 依赖包列表文件

2.6 项目架构了解

目标：知道项目入口, 以及代码执行顺序和引入关系

main.js和App.vue, 以及index.html作用和关系?

1. main.js – 项目打包主入口 – Vue初始化

2. App.vue – Vue页面主入口

3. index.html – 浏览器运行的文件

4. App.vue => main.js => index.html

2.7 @vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为Vue脚手架项目用的vue.config.js

src并列处新建vue.config.js, 填入配置, 重启webpack开发服务器

2.8 eslint检查代码

目标：eslint是一种代码检查的工具

如果写代码违反了eslint的规则-报错

演示: 在main.js中随便定义变量 – 不使用 – 观察eslint报错

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务（方法比较老，目前已经不在适用）

方式2:如果有 .eslintrc.js文件，注释 '@vue/standard'这个代码。

2.9 单vue文件讲解

Vue推荐采用.vue文件来开发项目

template里只能有 一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

单vue文件好处?

独立作用域, 不再担心变量重名问题

单vue文件使用注意事项?

要注意template里只能有一个根标签

2.10 脚手架项目_清理欢迎界面

assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)

src/App.vue默认有很多内容, 可以全部删除留下template和script和style的框。（ 在App.vue生成的快捷键：<vue + 回车）

欢迎界面是哪些, 如何清除?

1. assets下的图片和components下的文件, App.vue初始代码

2. 删除即可, 但是要留下Vue项目入口页面App.vue文件

三、Vue指令

3.1 Vue基础-插值表达式

目标：在dom标签中, 直接插入vue数据变量

又叫: 声明式渲染/文本插值

语法: {{ 表达式 }}

msg和obj是vue数据变量

要在js中data函数里声明

什么是插值表达式?

双大括号, 可以把vue数据变量直接显示在标签内

Vue中变量声明在哪里?

data函数返回的对象上, 用key属性声明

3.2 vue基础-MVVM设计模式

目标：转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结

什么是设计模式?

设计模式是对代码分层, 引入一种架构的概念

MVVM是什么?

MVVM(模型, 视图, 视图模型双向关联的一种设计模式)

MVVM好处?

减少DOM操作, 提高开发效率

3.3 Vue指令-v-bind

目标：给标签属性设置Vue变量的值

v-bind语法和简写

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

如何给dom标签的属性, 设置Vue数据变量?

:属性名=“Vue数据变量”

3.4 Vue指令-v-on

目标：给标签绑定事件

语法

v-on:事件名=“要执行的少量代码"

v-on:事件名=“methods中的函数名"

v-on:事件名=“methods中的函数名(实参)"

方法在methods选项定义

v-on: 可以简写成@

语法:

@事件名=“methods中的函数”

如何给dom标签绑定事件?

@事件名=“methods里的函数名”

如何给事件传值呢?

@事件名=“methods里的函数名(实参)”

3.5 Vue指令-v-on事件对象

目标：Vue事件处理函数中, 拿到事件对象

语法

无传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

3.6 Vue指令-v-on事件修饰符

目标：在事件后面.修饰符名 - 给事件带来更强大的功能

语法

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

修饰符列表

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

3.7 Vue指令-v-on按键修饰符

目标：给键盘事件, 添加修饰符, 增强能力

语法:

@keydown.enter - 监测回车按键

@keydown.esc - 监测返回按键

更多修饰符: https://cn.vuejs.org/v2/guide/events.html

3.8 课上练习_翻转世界

翻转世界

分析：先静后动

①：定义变量 message:‘HELLO, WORLD’

②：插值表达式赋予到 dom 上, 准备按钮和文字

③: 按钮绑定点击事件和函数

④: 对 message 值用 split 拆分, 返回数组

⑤: 数组元素翻转用 reverse 方法

⑥: 再把数组用 join 拼接成字符串赋予给 message

⑦: 因为Vue是MVVM设计模式, 数据驱动视图, 所以视图自动改变

3.9 Vue指令-v-model

目标：value属性和Vue数据变量, 双向绑定到一起

语法: v-model="Vue数据变量"

双向数据绑定

变量变化 -> 视图自动同步

视图变化 -> 变量自动同步

例子, 做个注册表单, 了解v-model在各种表单标签如何使用

<template>
  <div>
    <!-- 下拉框 -->
    <div>
      <span>家乡：</span>
      <select v-model="hometown">
        <option value="成都">成都</option>
        <option value="大理">大理</option>
        <option value="日照">日照</option>
        <option value="北京">北京</option>
      </select>
    </div>
    <!-- 单选框 -->
    <div>
      <span>性别：</span>
      <label for="man">
        <input type="radio" name="sex" id="man" v-model="gender" value="男">男
      </label>
      <label for="woman">
        <input type="radio" name="sex" id="woman" v-model="gender" value="女">女
      </label>
    </div>
    <!-- 多选框 -->
    <div>
      <span>爱好：</span>
      <label for="bassketball">
        <input type="checkbox" id="bassketball" v-model="hobby" value="篮球">篮球
      </label>
      <label for="football">
        <input type="checkbox" id="football" v-model="hobby" value="足球">足球
      </label>
      <label for="volleyball">
        <input type="checkbox" id="volleyball" v-model="hobby" value="排球">排球
      </label>
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

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

v-model用在哪里?

暂时只能用在表单标签上

v-model有什么作用?

把vue的数据变量和表单的value属性双向绑定在一起

下拉菜单v-model写在哪里?

在select, value在option上

v-model用在复选框时, 需要注意什么?

v-model的vue变量是

非数组 – 关联的是checked属性

数组 – 关联的是value属性

vue变量初始值会不会影响表单的默认状态?

会影响, 因为双向数据绑定-互相影响