今日目标:
学习目录:
学习, 调试vue必备之利器 - 官方提供的呦
如果实在打不开谷歌商店, 换个网
不要图标上带橘黄色beta的
vue文件代码高亮插件-vscode中安装
代码提示插件-vscode中安装
var a = 10;
console.log(a); // a就是变量, 运行后使用变量里的值再原地打印
console.log(10 + 50); // 10 + 50 就是表达式
console.log(a > 9); // 这叫判断表达式, 原地结果是true
new的作用和含义
new 类名() - 原地得到一个实例对象 - 对象身上有key(或叫属性, 叫键都行), 对应的值是我们要使用的
实例化对象
实例化对象就是new 类名() 创造出来的对象, 身上包含属性(key, 键) 对应的 值
什么是对象上的, 属性和方法
let obj = { // 属性指的是a, b, c, d, e这些名字
a: 10,
b: [1, 2, 3],
c: function(){},
d () {},
e: () => {} // 值是冒号:右边的值
}
// 这个格式是固定的, 必须张口就来, 张手就写, 准确率100%
let obj = {
a: 10,
b: 20
}
console.log(obj.a); // 从obj对象的a上取值, 原地打印10
obj.b = 100; // 有=, 固定把右侧的值赋予给左侧的键, 再打印obj这个对象, b的值是100了
this指向口诀:
目标: 更少的时间,干更多的活,开发网站速度快
例如: 把数组数据-循环铺设到li中, 看看分别如何做的?
<ul id="myUl"></ul>
<script>
let arr = ["春天", "夏天", "秋天", "冬天"];
let myUl = document.getElementById("myUl");
for (let i = 0; i < arr.length; i++) {
let theLi = document.createElement("li");
theLi.innerHTML = arr[i];
myUl.appendChild(theLi);
}
</script>
<li v-for="item in arr">{{item}}</li>
<script>
new Vue({
// ...
data: {
arr: ["春天", "夏天", "秋天", "冬天"]
}
})
</script>
注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js
开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)
现在很多项目都是用vue开发的
我们为什么学习Vue?
什么是渐进式
什么是库和框架
库: 封装的属性或方法 (例jquery.js)(小工具)
框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)(大工具)
Vue是什么?
Vue是一个JavaScript渐进式框架
什么是渐进式?
渐进式就是按需逐渐集成功能
什么是库和框架?
库是方法的集合,而框架是一套拥有自己规则的语法
1.2_Vue学习的方式
目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目
@vue/cli的好处
目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程
yarn global add @vue/cli #global 全局的
# OR
npm install -g @vue/cli
vue -V
总结: 如果出现版本号就安装成功, 否则失败
目标: 使用vue命令, 创建脚手架项目
注意: 项目名不能带大写字母, 中文和特殊符号
# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo
# create:创建
cd vuecil-demo
npm run serve
# 或
yarn serve
总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目
目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思
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 – 依赖包列表文件
PS:assets与public都是存放静态资源的目录,区别是啥?
脚手架里主要文件和作用?
main.js和App.vue以及index.html作用和关系?
目标:项目中没有webpack.config.js文件,因为@vue/cli用的vue.config.js
/* 覆盖webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000 // 端口
}
}
脚手架项目配置文件是什么?
eslint是什么?
如何暂时关闭?
目标: 单vue文件好处, 独立作用域互不影响
最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行
单vue文件的好处?
单vue文件使用注意事项?
欢迎界面是哪些?如何清除?
目的: 在dom标签中, 直接插入内容
<template>
<div>
<h1>{{ msg }}</h1> //可以是变量
<h2>{{ obj.name }}</h2> //可以是对象.属性
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> //可以是表达式
</div>
</template>
<script>
export default {
data() { // 格式固定, 定义vue数据之处
return { //固定格式,返回一个数据对象
msg: "hello, vue", // key相当于变量名
obj: {
name: "小vue",
age: 5
}
}
}
}
</script>
<style>
</style>
总结: dom中插值表达式赋值, vue的变量必须在data里声明
什么是插值表达式?
Vue中变量声明在哪里?
目的: 转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结
演示: 在上个代码基础上 , 在devtool工具改变M层的变量 , 观察V层(视图的自动同步)
等下面学了v-model再观察V改变M的效果
MVVM,一种软件架构模式,决定了写代码的思想和层次
MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
在vue中,不推荐直接手动操作DOM!!!
在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!(思想转变)
总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 提高开发效率
什么是设计模式?
MVVM是什么?
MVVM好处?
目标: 给标签属性设置vue变量的值
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头
每个指令, 都有独立的作用
<template>
<div>
<!-- 2. 值 -> 标签原生属性上 -->
<!-- 语法: v-bind:原生属性名="vue变量" -->
<a v-bind:href="url">点击去百度</a>
<!-- 语法: :原生属性名="vue变量" -->
<img :src="imgUrl" />
<img :src="localImg">
</div>
</template>
<script>
import imgObj from "./assets/1.gif"; // 唯独js需要导入图片文件(css/标签里可以直接使用图片地址)
export default {
// 1. 准备变量
data() {
return {
url: "http://www.baidu.com",
//PS:网络地址可以直接使用,但是本地的图片,就需要导入来使用
imgUrl:
"http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg",
localImg: imgObj
};
}
};
</script>
<style>
</style>
总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果
如何给dom标签的属性设置Vue变量?
目标: 给标签绑定事件
<!-- vue指令: v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
//简写@事件名
<button @click="subFn">减少</button>
<script>
export default {
// ...其他省略
methods: {
addFn(){ // this代表export default后{}对象, data和methods里的属性都直接挂在它身上
this.count++
},
addCountFn(num){
this.count += num
},
subFn(){
this.count--
}
}
}
</script>
总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数
如何给dom标签绑定事件?
如何给事件传值?
目标: vue事件处理函数中, 拿到事件对象
PS:
<template>
<div>
<a @click="one" href="http://www.baidu.com">百度</a>
<hr />
<a @click="two(10, $event)" href="http://www.taobao.com">淘宝</a>
</div>
</template>
<script>
export default {
methods: {
// 1. 事件触发, 无传值, 可以直接获取事件对象是
one(e){
e.preventDefault()
},
// 2. 事件触发, 传值, 需要手动传入$event
two(num, e){
e.preventDefault()
}
}
};
</script>
<style>
</style>
Vue事件处理函数,如何拿到事件对象?
目的: 在事件后面.修饰符名 - 给事件带来更强大的功能
<template>
<div>
<div @click="fatherFn">
<p @click.stop="oneFn">.stop - 阻止事件冒泡</p>
<a href="http://www.baidu.com" @click.prevent.stop>去百度</a>
<p @click.once="twoFn">点击观察事件处理函数执行几次</p>
</div>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("fahter-触发click事件");
},
oneFn(){
console.log("p标签点击了");
},
twoFn(){
console.log("p标签被点击了");
}
}
}
</script>
<style>
</style>
总结: 修饰符给事件扩展额外功能
Vue有哪些主要修饰符,都有什么功能?
目标: 给键盘事件, 添加修饰符, 增强能力
语法:
[更多修饰符](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6)
代码:
<template>
<div>
<!-- 1. 绑定键盘按下事件.enter-回车 -->
<input type="text" @keydown.enter="enterFn">
<!-- 2. .esc修饰符 - 取消键 -->
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("用户按下的回车");
},
escFn(){
console.log("用户按下esc键");
}
}
}
</script>
<style>
</style>
总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程
按键修饰符如何使用?
有哪些主要按键修饰符?
3.7_实例-翻转世界
目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)
提示: 把字符串取反赋予回去
<template>
<div>
<!-- 1. 变量准备-静态页面铺设 -->
<h1>{{ msg }}</h1>
<!-- 2. 绑定点击事件 -->
<button @click="btn">逆转世界</button>
</div>
</template>
<script>
export default {
data(){
return {
msg: "Hello, World"
}
},
methods: {
btn(){
// // 3. 截取字符串返回数组
// let arr = this.msg.split("")
// // 4. 翻转
// arr.reverse()
// // 5. 数组拼接起来
// this.msg = arr.join("")
// 简化
this.msg = this.msg.split("").reverse().join("")
}
}
}
</script>
<style>
</style>
总结: 记住方法特点, 多做需求, vue是数据变化视图自动更新, 减少操作DOM时间, 提高开发效率
点击翻转字符串显示思路是什么?
目标: 把value属性和vue数据变量, 双向绑定到一起
<template>
<div>
<div>
<span>用户名:</span>
<!-- 1. v-model
双向数据绑定
value属性 - vue变量
-->
<input type="text" v-model="username">
</div>
<div>
<span>密码: </span>
<input type="password" v-model="pass">
</div>
</div>
</template>
<script>
export default {
data(){
return {
username: "",
pass: ""
}
}
}
</script>
<style>
</style>
总结: 本阶段v-model只能用在表单元素上, 以后学组件后讲v-model高级用法
目标:value属性和Vue数据变量, 双向绑定到一起
<template>
<div>
<div>
<span>来自于: </span>
<!-- 下拉菜单要绑定在select上 -->
<select v-model="from">
<option value="北京市">北京</option>
<option value="南京市">南京</option>
<option value="天津市">天津</option>
</select>
</div>
<div>
<!-- (重要)
遇到复选框, v-model的变量值
非数组 - 关联的是复选框的checked属性(只要选中一个复选框,就会把checked的值true给此变量)
数组 - 关联的是复选框的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="男" name="sex" v-model="gender">男
<input type="radio" value="女" name="sex" v-model="gender">女
</div>
<div>
<span>自我介绍</span>
<textarea v-model="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data(){
return {
from: "",
//hobby:"", //默认是空字符串,但是只要勾选一个复选框,此值即为true
hobby: [],
gender: "男",
intro: ""
}
}
}
</script>
<style>
</style>
目标: 让v-model拥有更强大的功能
<template>
<div>
<div>
<span>年龄</span>
<!-- .number修饰符-把值parseFloat转数值再赋予给v-model对应的变量 -->
<!-- 标签中,所有属性的值的类型是字符串 ,所以用户输入的23,是一个字符串的"23"-->
<input type="text" v-model.number="age">
</div>
<div>
<!-- .trim修饰 - 去除首尾两边空格 -->
<span>人生格言</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量 -->
<!-- change: 监听文本框的内容改变,但是需要失去焦点才会触发
input:监听文本框的内容改变-->
<span>个人简介</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data(){
return {
age: 0,
motto: "",
intro: ""
}
}
}
</script>
<style>
</style>
总结: v-model修饰符, 可以对值进行预处理, 非常高效好用
Vue针对v-model有哪些修饰符来提高我们编程效率?
目的: 更新DOM对象的innerText/innerHTML
<template>
<div>
<p v-text="str"></p>
<p v-html="str">{{ 10 + 20 }}</p>
<!-- 注意: v-text或v-html会覆盖插值表达式 -->
</div>
</template>
<script>
export default {
data(){
return {
str: "我是一个span"
}
}
}
</script>
<style>
</style>
总结: v-text把值当成普通字符串显示, v-html把值当做html解析
目标: 控制标签的隐藏或出现
<template>
<div>
<!-- v-show 或者 v-if
v-show="vue变量"
v-if="vue变量"
-->
<h1 v-show="isShow">我是h1</h1>
<h2 v-if="isOk">我是h2</h2>
<!--
v-show隐藏: 采用display:none // 频繁切换
v-if隐藏: 采用从DOM树直接移除 // 移除
-->
<!-- v-if和v-else使用 -->
<p v-if="age >= 18">成年了</p>
<p v-else>未成年</p>
</div>
</template>
<script>
export default {
data(){
return {
isShow: false,
isOk: false,
age: 2
}
}
}
</script>
<style>
</style>
总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏
目标: 点击展开或收起时,把内容区域显示或者隐藏
此案例使用了less语法, 项目中下载模块(因为脚手架中webpack是4.x版本,所以在下载less时需要指定版本号)
yarn add [email protected] [email protected] -D
结构与样式代码:
<template>
<div id="app">
<h3>案例:折叠面板</h3>
<div>
<div class="title">
<h4>芙蓉楼送辛渐</h4>
<span class="btn" @click="isShow = !isShow">
{{ isShow ? '收起' : '展开' }}
</span>
</div>
<div class="container" v-show="isShow">
<p>寒雨连江夜入吴, </p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true
}
}
}
</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>
案例思路?
目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成
语法
目标结构:
注意:
v-for的临时变量名不能用到v-for范围外
代码:
<template>
<div>
<!-- 语法1:
v-for="(值变量名, 索引变量名) in 目标结构"
口诀: 想要谁循环就放到谁身上
-->
<ul>
<li v-for="(item, index) in arr" :key="index">
{{ item }} ---- {{ index }}
</li>
</ul>
<!-- 语法2:
v-for="值变量名 in 目标结构"
-->
<ul>
<li v-for="obj in stuArr" :key="obj.id">
<span>{{ obj.name }}</span>
<span>{{ obj.sex }}</span>
<span>{{ obj.hobby }}</span>
</li>
</ul>
<!-- 语法3:(了解)
v-for="(value, key) in 对象"
-->
<div>
<p v-for="(value, key) in tObj" :key="value">
<span>{{ value }}</span>
=======
<span>{{ key }}</span>
</p>
</div>
<!-- 语法4: (了解)
v-for="变量名 in 固定数字"
从1开始遍历
-->
<div v-for="n in count" :key="n">{{ n }}</div>
</div>
</template>
<script>
export default {
data() {
return {
arr: ["小明", "小欢欢", "大黄"],
stuArr: [
{
id: 1001,
name: "孙悟空",
sex: "男",
hobby: "吃桃子",
},
{
id: 1002,
name: "猪八戒",
sex: "男",
hobby: "背媳妇",
},
],
tObj: {
name: "小黑",
age: 18,
class: "1期",
},
count: 10,
};
},
};
</script>
<style>
</style>
总结: vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成
简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离, vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单. 相比传统网页, vue是单页面可以只刷新某一部分
jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签
Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视图关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能
MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联
MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定
.prevent: 提交事件不再重载页面;
.stop: 阻止单击事件冒泡;
.once: 只执行一次这个事件
不支持ie8及以下,部分兼容ie9 ,完全兼容10以上, 因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。
渐进式代表的含义是:主张最少, 自底向上, 增量开发, 组件集合, 便于复用
v-show和v-if的区别? 分别说明其使用场景?
v-show 和v-if都是true的时候显示,false的时候隐藏
但是:false的情况下,
v-show是采用的display:none
v-if采用惰性加载
如果需要频繁切换显示隐藏需要使用v-show
v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
v-show 显示内容
v-if 显示与隐藏
v-else 必须和v-if连用 不能单独使用 否则报错
v-bind 动态绑定 作用: 及时对页面的数据进行更改, 可以简写成:分号
v-on 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.
<template>
<div id="app">
<ul>
<li v-for="item in myArr" :key="item">{{ item }}</li>
</ul>
<button @click="btn">走一走</button>
</div>
</template>
<script>
export default {
data() {
return {
myArr: ["帅哥", "美女", "程序猿"],
};
},
methods: {
btn() {
// 头部数据加入到末尾
this.myArr.push(this.myArr[0]);
// 再把头部的数据删除掉
this.myArr.shift();
},
},
};
</script>
<template>
<div id="app">
<ul>
<li v-for="(item, ind) in arr" :key="item">
<span>{{ item }}</span>
<button @click="del(ind)">删除</button>
</li>
</ul>
<button @click="add">生成</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 5, 3],
};
},
methods: {
add() {
this.arr.push(Math.floor(Math.random() * 20));
},
del(index) {
this.arr.splice(index, 1);
},
},
};
</script>
<template>
<div id="app">
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<!-- 循环渲染的元素tr -->
<tr v-for="(item,index) in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
<tr v-if="list.length === 0">
<td colspan="4">没有数据咯~</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "奔驰", time: "2020-08-01" },
{ id: 2, name: "宝马", time: "2020-08-02" },
{ id: 3, name: "奥迪", time: "2020-08-03" },
],
};
},
methods: {
del(index) {
// 删除按钮 - 得到索引, 删除数组里元素
this.list.splice(index, 1);
},
},
};
</script>