铺垫(自学)
需要预习时自己提前安装好必安装:VUE-devtools
谷歌浏览器的插件 - 学习, 调试vue必备之利器 - 官方提供的呦 安装过程vscode-插件补充
vue文件代码高亮插件-vscode中安装 代码提示插件-vscode中安装1.Vue-为何学
目标
学习vue, 用更少的时间干更多的活注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)
市场欢迎度
现在很多项目都是用vue开发的 市场上90%工作都要求会vue, 会vue拿高薪, 甚至java或测试都要学点vue2.Vue-是什么
概念
渐进式javacript框架, 一套拥有自己规则的语法 官网地址: https://cn.vuejs/ (作者: 尤雨溪渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用
Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助 库 小而巧.只提供了特定的API,是属性和方法的集合 封装的属性或方法 (例jquery.js) 方法的集合,一般是个js文件 框架: 大而全,提供了一整套的问题解决方案,拥有自己的规则和元素, 比库强大的多 (例vue.js) 框架是拥有自己一套规则和语法(Framework)3.Vue-如何学
目标 :了解Vue的学习方式和开发方式
学习方法
-
熟练使用Vue语法, 陌生地方可以多敲几遍
-
在课上例子, 练习, 案例, 作业, 项目中, 反复磨炼使用 多练, 多用, 多总结
-
多练多查多总结(xmind 或 写博客),及时输出
总结: Vue是渐进式框架, 有自己的规则, 我们要记住语法, 特点和作用, 反复磨炼使用, 多总结
开发方式
-
传统开发模式:基于html/css/js文件开发Vue
-
工程化(脚手架)开发方式:在webpack环境中开发Vue,这是最推荐, 企业常用的方式
4.脚手架-介绍
目标:webpack自己配置环境繁琐
官方提供 脚手架, 快速搭建项目基础结构概念
脚手架 : 脚手架是为了保证各施工过程顺利进行而搭设的工作平台在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置
好处
-
开箱即用
-
0配置webpack
-
babel支持(降级ES5)
-
css, less,图片,字体图片支持
-
开发服务器支持(实时打包,快速高效)
5.脚手架-准备
目标
安装@vue/cli全局模块包, 得到全局Vue命令, 此包用于以后创建Vue脚手架项目步骤
全局安装 @vue/cli模块包
结果 :终端里的命令, 例如Vue命令, 以后创建脚手架项目# 1. 安装
# win
npm i @vue/cli -g
yarn global add @vue/cli
# mac
sudo npm i @vue/cli -g
# 2. 检测,能看到版本号即可
vue -V(大写的V)
vue --version
//总结: 如果出现版本号就安装成功, 否则失败
6.脚手架-----创建项目------启动服务目标
用Vue命令, 创建一个脚手架项目, 并启动webpack开发服务器步骤
1. 创建项目 vue create vuecli-demo(项目名)
注意: 项目名不能带大写字母, 中文和特殊符号
2.选择模板和包管理器, 等待脚手架项目创建完毕
注意:可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来
3. cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 注意 : 如何(在网页上浏览)这个项目 执行 yarn serve 启动本地热更新开发服务器4.启动成功
手架-目录分析
讲解
vuecil-demo # 项目目录 ├── node_modules # 项目依赖的第三方包 ├── public # 静态文件目录 ├── favicon.ico# 浏览器小图标 └── index.html # 单页面的html文件(网页浏览的是它)浏览器入口网页 ├── src # 业务文件夹 源代码 打包前的代码 ├── assets # 静态资源 └── logo.png # vue的logo图片 ├── components # 组件目录----------重要,一个组件就是一个vue文件 └── HelloWorld.vue # 欢迎页面vue代码文件 ├── App.vue # 整个应用的根组件-----------vue页面主入口 └── main.js # 入口js文件----------------项目打包的主入口-vue初始化 ├── .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 – 依赖包列表文件和自定义命令 node_modules - 都是下载的包 public/index.html - 浏览器运行的网页 src/App.vue - Vue页面入口 src/main.js - webpack打包的入口 package.json - 项目描述信息8.脚手架-代码和结构分析
main.js - 项目打包入口 ------------- Vue初始化 App.vue - -------------------------------Vue页面入口 index.html ------------------------------ 浏览器运行的文件 App.vue => main.js => index.html9.脚手架-自定义配置
目标 : 脚手架内置的webpack, 如何修改配置
vue.config.js : 脚手架配置文件
步骤
src并列处, 新建vue.config.js
/* 覆盖webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
}
10.脚手架-eslint了解
概念:
1.脚手架内置代码检查工具
2.eslint是代码检查工具,违反规定就报错
3.eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格
解决
方式1: 手动解决掉错误, 以后项目中会讲如何 自动解决 方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务11.脚手架-单vue文件
目标 : 掌握vue文件, 使用规则和特点
讲解
-
template里只能有一个根标签
-
vue文件-独立模块-作用域互不影响
-
style配合scoped属性, 保证样式只针对当前template内标签生效
-
vue文件配合webpack, 把他们打包起来插入到index.html
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
<div>欢迎使用vue</div>
</template>
<!-- js相关 -->
<script>
export default {
name: 'App'
}
</script>
<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>作用域
</style>
- 单vue文件的好处? 独立作用域,不再担心变量重名问题
- 单vue文件使用注意事项? emplate里只能有一个根标签
- 单vue文件里标签和样式最后怎么显示到页面? webpack打包后, 插入到index.html显示
12.阶段小结-脚手架环境
-
@vue/cli是什么?
答 : 全局模块包, 安装后得到Vue命令 -
如何创建脚手架项目?
答 : vue create 项目名, 得到一套标准文件夹+文件+webpack环境 -
脚手架项目如何启动?
答 : yarn server启动, 内置了webpack-dev-server, 得到一个地址和端口浏览器webpack打包后网页
-
脚手架项目好处?
答 : 开箱即用, 配置好的一套环境, 快速开发自己项目
-
脚手架项目入口有哪些?
答 : main.js - --------webpack打包入口 App.vue - ------------Vue页面入口 index.html - ---------网页入口 -
单Vue文件的好处?
1..独立作用域,作用域互不影响
2.style配合scoped, 样式针对当前页面标签生效, 互不影响
13.Vue语法-插值表达式
概念:又叫: 声明式渲染/文本插值/大胡子语法
语法: {{ 表达式 }} 双大括号,可以把Vue变量直接显示在标签内 注意:插值只能用在双标签 表达式:由运算符连接变量或者直接量构成的结构(凡是有结果的东西都是表达式) 例如: 1. 变量 或 常量 2. 对象.属性名 3. 算术运算 或 三元运算 4. 函数的调用 注意: 表达式不是语句
<template>
<div>
//声明一个被vue控制的DOM区域 --------->view视图
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
</div>
</template>
<script>
export default {
//msg和obj是vue数据变量
//要在js中data函数里声明, 返回一个数据对象
data() { // 格式固定, 定义vue数据之处
return { // key相当于变量名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
//Vue中变量声明在哪里? : data函数内, return的对象, 对象内的key就是变量名
//1. 什么是插值表达式? : 双大括号{{ 数据变量 }}, 可以把vue数据变量直接 显示在双标签内
</script>
14.Vue基础-MVVM设计模式
概念:设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)
MVVM,一种软件架构模式,决定了写代码的思想和层次
M: model数据模型 (data里定义) ---------------------页面渲染时依赖的事件源
V: view视图 (页面标签)---------------------------- 当前页面所渲染的DOM结构
VM: ViewModel视图模型 (vue.js源码) --------------VUE实例 MVVM的核心
MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
V (修改视图) ---> M(数据自动同步)
M(修改数据) ---> V (视图自动同步)
1. 在vue中,不推荐直接手动操作DOM!!! 2. 在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!(思想转变)15.Vue指令-v-bind动态属性
-
语法:v-bind:属性名="vue变量"
-
简写::属性名="vue变量"
<template> <div id="yyds"> <a v-bind:href="url">百度一下</a> <a :href="url">百度一下</a> <img :src="imgUrl" alt="" /> <!-- <a href="url">百度一下</a> --> </div> </template> <script> export default { // data中声明的是需要在模板中用到的变量 data() { return { url: "https://www.baidu", imgUrl: "https://cn.vuejs/images/logo.svg", }; }, }; </script>
16.Vue指令-v-on事件绑定
- 语法 提前在method中声明一个函数
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
- v-on:事件名="要执行的少量代码"
- 简写: @事件名="methods中的函数"
17.Vue指令-v-on事件对象
无传参, 通过形参直接接收
有参数, 手动传入 $event 指代事件对象
18.Vue指令-v-on事件修饰符
事件修饰符 - 给事件带来更强大的功能
@事件名.修饰符="methods里函数"
修饰符列表
1.stop - 阻止事件冒泡
2.prevent - 阻止默认行为
19.Vue指令-v-on按键修饰符
概念 : 给键盘事件, 添加修饰符, 增强能力
语法:
@keyup.enter - 监测回车按键
@keyup.esc - 监测返回按键
20.Vue指令-v-model双向绑定1
作用 : v-model, 把表单值和Vue变量双向绑定
语法: v-model="Vue数据变量"
双向数据绑定
变量变化 ------> 视图自动同步
视图变化 ------> 变量自动同步
21.Vue指令-v-model双向绑定2
v-model:
把元素的value属性 与 Vue数据变量 双向关联
数据 <-> 视图
场景:收集表单元素的值
v-model用在下拉列表上:
1. v-model写在select上
2.关联的值option的value
v-model用在单选框上:
1. 不需要name属性
2.需要手动的给单选框添加value属性(因为它默认没有value属性)
v-model用在复选框上:(重点)
1. 决定是否勾选:v-model绑定的变量是布尔类型,此时v-model关联的是复选框的checked属性
2. 多选:
1. v-model绑定的变量是数组类型 -> 此时v-model关联的是复选框的value属性
2.需要手动的给复选框添加value属性(因为它默认没有value属性)
22.Vue指令-v-model修饰符
语法: v-model.修饰符="Vue数据变量"
.number 尝试以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在change时触发而非input时触发
23.Vue指令-v-html
1.v-text="vue数据变量" 覆盖元素内默认
2.v-html="vue数据变量
3.{{}} 开发最常用 插值表达式 Mustache
27.Vue指令-v-show和v-if
目标:控制标签显示或隐藏
语法:
1.v-show="vue变量" v-show 用的display:none隐藏 (频繁切换使用)
2.v-if="vue变量" v-if 直接从DOM树上移除
29.Vue指令-v-for
目标 : v-for, 用数据循环生成标签
vue 提供了 v-for 列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 item in items 形式的特殊语法,其中:
⚫ items 是待循环的数组
⚫ item 是被循环的每一项
语法:v-for="(值变量, 索引变量) in 目标结构"
v-for="值变量 in 目标结构"
更多推荐
VUE的第一天
发布评论