本文介绍了Vue.js的基础知识，包括Vue的渐进式特性、与库和框架的区别，以及@vue/cli的使用。详细讲解了如何创建项目、启动服务，分析了Vue的MVVM设计模式，并深入探讨了Vue的各种核心指令，如v-bind、v-on、v-model等，帮助读者快速掌握Vue开发。
为什么要学VUE?
为了: 更少的时间,干更多的活. 开发网站速度, 快;
注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js;
开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通),现在很多项目都是用vue开发的。
目录
一、Vue是什么
vue是一个渐进式的javaScript 框架;
什么是渐进式
渐进式: 逐渐进步, 集成更多功能和方法 ,想用什么就用什么, 不必全都使用;
补充概念:库和框架
库: 封装的属性或方法 (例如 jquery.js);
------------ jquery.js----小的,便捷的库;
框架(Framework): 拥有自己的规则和元素, 比库强大的多 (例vue.js);
开发模式
- 传统开发模式：基于html/css/js文件开发vue;
- 工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式;
二、@vue/cli脚手架
利用webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目;
@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目。
脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
@vue/cli的好处
- 开箱即用；
- 不需要配置webpack；
- babel支持；
- css, less支持；
- 开发服务器支持；
安装@vue/cli
目标：把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程。
- 全局安装命令
yarn global add @vue/cli
# OR
npm install -g @vue/cli注意: 如果半天没动静(95%都是网速问题), 可以ctrl c
-
停止重新来
-
换一个网继续重来
- 查看vue脚手架版本
vue -V // 如果出现版本号就安装成功, 否则失败@vue/cli 创建项目启动服务
------使用vue命令, 创建脚手架项目
注意: 项目名不能带大写字母, 中文和特殊符号
1.创建项目
# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo2.选择模板 (==可以上下箭头选择, 弄错了ctrl+c重来== )
选择用什么方式下载脚手架项目需要的依赖包-----回车
3.回车等待生成项目文件夹+文件+下载必须的第三方包们
4.进入脚手架项目下, 启动内置的热更新本地服务器
cd vuecil-demo
npm run serve
# 或
yarn serve当看到绿色的successFully 表示安装成功啦~ (底层node+webpack热更新服务)
打开浏览器输入上述地址 查看页面(点击网址或者Ctrl +点击网址)
@vue/cli 目录和代码
主要的文件和含义:
node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件
@vue/cli 项目架构
@vue/cli 自定义配置
在 src并列处新建vue.config.js
/* 覆盖webpack的配置 */
module.exports = {
devServer: { // 自定义服务配置
open: true, // 自动打开浏览器
port: 3000
}
}eslint --- 清理不用的代码
eslint---检查代码书写规范(检测无用变量)
我们来看一个例子: 先在main.js 随便声明个变量 a, 但是不要使用
这是就会发现, 终端和页面都报错了
见到这样子的错误, 证明你的代码不严谨
我们暂时主要学习Vue语法,暂时关闭eslint检查 ,在vue.config.js中配置后重启服务
module.exports={
lintOnSave:false,// 关闭eslint检查
}@vue/cli 单vue文件
Vue推荐采用.vue文件来开发项目，template里只能有一个根标签。
vue文件-独立模块-作用域互不影响，这样可以 避免变量重名,冲突。
style配合scoped属性, 保证样式只针对当前template内标签生效。
最后:vue文件配合webpack, 把框架，样式，js打包起来插入到index.html,然后在浏览器运行
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
<div>欢迎使用vue</div>
</template>
<!-- js相关 -->
<script>
export default {
name: 'App'
}
</script>
<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>把@vue/cli 自带的欢迎界面删除
-
src/App.vue默认有很多内容, 可以全部删除留下框
-
assets 和 components 文件夹下的一切都删除掉
经过上面的安装,和配置,就建立好了一个vue项目架构,接下来,我们学习一些基础的Vue指令
三、Vue指令
插值表达式
语法: {{ 表达式/属性名 }}
dom中插值表达式赋值, vue的变量必须在data里声明
<template>
<div>
<h1>{{ msg }}</h1>
<h2>{{ obj.name }}</h2>
<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
</div>
</template>
<script>
export default {
data() { // 格式固定, 定义vue数据之处 data == 函数
return { // 属性名 相当于变量名
msg: "hello, vue",
obj: {
name: "小vue",
age: 5
}
}
}
}
</script>
<style>
</style>vue的 MVVM 设计模式
转变思维, 用数据驱动视图改变
设计模式-------对代码分层,引入一种架构的概念
-
MVVM，一种软件架构模式，决定了写代码的思想和层次
-
M： model数据模型 (data里定义)
-
V： view视图 （html页面）
-
VM： ViewModel视图模型 (vue.js源码)
好处:
减少DOM操作;
提高效率;
数据驱动视图;
-
-
MVVM通过
数据双向绑定让数据自动地双向同步 不再需要操作DOM-
V（修改视图） -> M（数据自动同步）
-
M（修改数据） -> V（视图自动同步）
-
注意思想转变:在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！
vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率
v-bind指令
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头
每个指令, 都有独立的作用
-
语法：
v-bind:属性名="vue变量" -
简写：
:属性名="vue变量"
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">把vue变量的值, 赋予给dom属性上, 影响标签显示效果。
v-bind 动态class
标签class设置动态的值
语法:
-
:class="{类名: 布尔值}"
<template>
<div>
<!-- 语法:
:class="{类名: 布尔值}"
使用场景: vue变量控制标签是否应该有类名
-->
<p :class="{red_str: bool}">动态class</p>
</div>
</template>
<script>
export default {
data(){
return {
bool: true
}
}
}
</script>
<style scoped>
.red_str{
color: red;
}
</style>v-bind 动态style
给标签动态设置style的值
语法
-
:style="{css属性: 值}"
<template>
<div>
<!-- 动态style语法
:style="{css属性名: 值}"
-->
<p :style="{backgroundColor: colorStr}">动态style</p>
</div>
</template>
<script>
export default {
data(){
return {
colorStr: 'red'
}
}
}
</script>
<style>
</style>v-on指令----绑定事件
-
语法
-
v-on:事件名="要执行的==少量代码=="
-
v-on:事件名="methods中的函数" methods 和data并列级
-
v-on:事件名="methods中的函数(实参)"
-
-
简写: @事件名="methods中的函数"
实例代码:
<!-- 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里return出来的属性)
this.count++
},
addCountFn(num){
this.count += num
},
subFn(){
this.count--
}
}
}
</script>v-on指令---- 拿到事件对象
语法:
-
无传参, 通过形参直接接收
-
传参, 通过$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>v-on修饰符
在事件后面.修饰符名 - 给事件扩展额外功能
语法:
-
@事件名.修饰符="methods里函数"
-
.stop - 阻止事件冒泡
-
.prevent - 阻止默认行为
-
.once - 程序运行期间, 只触发一次事件处理函数
-
示例代码:
<template>
<div @click="fatherFn">
<!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
<button @click.stop="btn">.stop阻止事件冒泡</button>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
<button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father被触发");
},
btn(){
console.log(1);
}
}
}
</script>v-on按键修饰符
语法:
-
@keyup.enter - 监测回车按键
-
@keyup.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>v-model----双向数据绑定
把value属性和vue数据变量, 双向绑定到一起
-
语法: v-model="vue数据变量"
-
内部原理:oninput事件
-
双向数据绑定
-
数据变化 -> 视图自动同步
-
视图变化 -> 数据自动同步
-
-
演示: 用户名绑定 ( vue内部是MVVM设计模式)
<template>
<div>
<!--
v-model:是实现vuejs变量和表单标签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>
<!-- (重要)
遇到复选框, v-model的变量值
非数组 - 关联的是复选框的checked属性
数组 - 关联的是复选框的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 {
username: "",
pass: "",
from: "",
hobby: [],
sex: "",
intro: "",
};
// 总结:
// 特别注意: v-model, 在input[checkbox]的多选框状态
// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
}
};
</script>本阶段v-model只能用在表单元素上
v-model修饰符
语法:
-
v-model.修饰符="vue数据变量"
-
.number 以parseFloat转成数字类型 (只对数字字符串有效)
-
.trim 去除首尾空白字符
-
.lazy 在change时触发而非inupt时----失去焦点,且内容改变时再把值赋给变量
-
<template>
<div>
<div>
<span>年龄:</span>
<input type="text" v-model.number="age">
</div>
<div>
<span>人生格言:</span>
<input type="text" v-model.trim="motto">
</div>
<div>
<span>自我介绍:</span>
<textarea v-model.lazy="intro"></textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {
age: "",
motto: "",
intro: ""
}
}
}
</script>v-text和v-html
作用：更新DOM对象的innerText/innerHTML
-
语法:
-
v-text="vue数据变量"
-
v-html="vue数据变量"
-
-
注意: innerText/innerHTML 会覆盖插值表达式
-
区别:
- v-text把值当成普通字符串显示;
- v-html把值当成标签进行解析
<template>
<div>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str: "<span>我是一个span标签</span>"
}
}
}
</script>v-show和v-if
作用:控制标签的隐藏或出现
语法:
-
v-show="vue变量"
-
v-if="vue变量"
vue变量====true 显示 ;
vue变量====false 隐藏
-
原理
-
v-show 用display:none隐藏 (频繁切换使用) 变量 :false
内置原理 display:none/block
-
v-if 直接从DOM树上移除 变量: false
内置原理 : remove()
-
-
高级
-
v-else使用
-
<template>
<div>
<h1 v-show="isOk">v-show的盒子</h1>
<h1 v-if="isOk">v-if的盒子</h1>
<div>
<p v-if="age > 18">我成年了</p>
<p v-else>还得多吃饭</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOk: true,
age: 15
}
}
}
</script>v-for 循环遍历指令
列表渲染, 所在标签结构, 按照数据数量, 循环生成=== 遍历,数组或者对象
-
语法
-
v-for="(值, 索引) in 目标结构" 后一个值是索引变量
-
v-for="值 in 目标结构"
-
谁循环,写在谁身上
-
-
目标结构:
-
可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构);
-
v-for="(value, key) in 目标对象" ;
-
遍历数字时,从 1 开始遍历;
-
-
注意:
v-for的临时变量名不能用到v-for范围外
<template>
<div id="app">
<div id="app">
<!-- v-for 把一组数据, 渲染成一组DOM -->
<!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
<p>学生姓名</p>
<ul>
<li v-for="(item, index) in arr" :key="item">
{{ index }} - {{ item }}
</li>
</ul>
<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>
<!-- v-for遍历对象(了解) -->
<p>老师信息</p>
<div v-for="(value, key) in tObj" :key="value">
{{ key }} -- {{ value }}
</div>
<!-- v-for遍历整数(了解) - 从1开始 -->
<p>序号</p>
<div v-for="i in count" :key="i">{{ i }}</div>
</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>v-for更新监测
口诀:
数组变更方法, 就会导致v-for更新, 页面更新;
数组变更方法：对原数组进行修改,不会生成新数组的方法
-
push() -
pop() -
shift() -
unshift() -
splice() -
sort() -
reverse()
数组非变更方法: 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()
-
slice() -
filter() -
concat()
this.$set() 语法 : this.set( 更新目标结构,更新位置,更新值)
<template>
<div>
<ul>
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
</ul>
<button @click="updateBtn">更新第一个元素值</button>
</div>
</template>
<script>
export default {
data(){
return {
arr: [5, 3, 9, 2, 1]
}
},
methods: {
updateBtn(){
// 3. 更新某个值的时候, v-for是监测不到的
// this.arr[0] = 1000;
// 解决-this.$set()
// 参数1: 更新目标结构
// 参数2: 更新位置
// 参数3: 更新值
this.$set(this.arr, 0, 1000)
}
}
}
</script>
<style>
</style>v-for就地更新
v-for 的默认行为会尝试原地修改元素而不是移动它们。
v-for更新时,是如何操作DOM的?
v-for 循环出新的虚拟DOM,和旧的虚拟DOM对比差异,然后复用标签，就地更新需要修改的部分
虚拟dom
.vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上
虚拟DOM结构 : 本质是个JS对象 ===保存节点信息
vue数据更新
-
生成新的虚拟DOM结构
-
和旧的虚拟DOM结构对比
-
利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁
好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)
2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)
diff算法
vue用diff算法, 新虚拟dom, 和旧的虚拟dom比较
===== 同级标签进行比较
情况1: 根元素变了, 删除重建
旧虚拟DOM
<div id="box">
<p class="my_p">123</p>
</div>新虚拟DOM
<ul id="box">
<li class="my_p">123</li>
</ul>情况2: 根元素没变, 属性改变, ==元素复用==, 更新属性
旧虚拟DOM
<div id="box">
<p class="my_p">123</p>
</div>新虚拟DOM
<div id="myBox" title="标题">
<p class="my_p">123</p>
</div>情况3: 根元素没变, 子元素没变, 元素内容改变
diff算法-key
1.无key - 就地更新
<ul id="myUL">
<li v-for="str in arr">
{{ str }}
<input type="text">
</li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>export default {
data(){
return {
arr: ["老大", "新来的", "老二", "老三"]
}
},
methods: {
addFn(){
this.arr.splice(1, 0, '新来的')
}
}
};v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示
如果需要在下标为1的位置添加1个元素
2.有key - 值为索引 ==== 就地更新
新旧虚拟DOM对比, key存在就复用此标签更新内容, 如果不存在就直接建立一个新的
<ul id="myUL">
<li v-for="(str, index) in arr" :key="index">
{{ str }}
<input type="text">
</li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>export default {
data(){
return {
arr: ["老大", "新来的", "老二", "老三"]
}
},
methods: {
addFn(){
this.arr.splice(1, 0, '新来的')
}
}
};3.有key - 值为id
key的值只能是唯一不重复的 字符串或数值。
v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示。
新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签, 复用标签；
新DOM里数据的key存在, 去旧的虚拟DOM结构里没有找到key标签的标签, 创建；
旧DOM结构的key, 在新的DOM结构里没有了, 则移除key所在的标签。
<template>
<div>
<ul>
<li v-for="obj in arr" :key="obj.id">
{{ obj.name }}
<input type="text">
</li>
</ul>
<button @click="btn">下标1位置插入新来的</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{
name: '老大',
id: 50
},
{
name: '老二',
id: 31
},
{
name: '老三',
id: 10
}
],
};
},
methods: {
btn(){
this.arr.splice(1, 0, {
id: 19,
name: '新来的'
})
}
}
};
</script>
<style>
</style>
扫一扫
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
