vue的基础知识点总结
vue的基础知识点总结
小程序的前端框架可以选用uniapp，是一款集成了vue的小程序前端开发框架，同时一套代码可以适配h5，安卓和小程序。对vue感兴趣的同学可以上手玩玩
vue的基础指令
基本模板(不使用脚手架)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-Vue基本模板</title>
<!--1.下载导入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 2.创建一个Vue的实例对象
let vue = new Vue({
// 3.告诉Vue的实例对象, 将来需要控制界面上的哪个区域
el: '#app',
// 4.告诉Vue的实例对象, 被控制区域的数据是什么
data: {
name: "李南江"
}
});
</script>
</body>
</html>
<!--
1.Vue框架使用方式
1.1传统下载导入使用
1.2vue-cli安装导入使用
2.Vue框架使用步骤
2.1下载Vue框架
2.2导入Vue框架
2.3创建Vue实例对象
2.4指定Vue实例对象控制的区域
2.5指定Vue实例对象控制区域的数据
-->
vue数据的单项绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-Vue数据单向传递</title>
<!--1.下载导入Vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.MVVM设计模式
在MVVM设计模式中由3个部分组成
M : Model 数据模型(保存数据, 处理数据业务逻辑)
V : View 视图(展示数据, 与用户交互)
VM: View Model 数据模型和视图的桥梁(M是中国人, V是美国人, VM就是翻译)
MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从 M -> VM -> V
也可以从 V -> VM -> M
2.Vue中MVVM的划分
Vue其实是基于MVVM设计模式的
被控制的区域: View
Vue实例对象 : View Model
实例对象中的data: Model
3.Vue中数据的单向传递
我们把"数据"交给"Vue实例对象", "Vue实例对象"将数据交给"界面"
Model -> View Model -> View
-->
<!--这里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "李南江"
}
});
</script>
</body>
</html>
v-model数据的双向传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-Vue数据双向传递</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.Vue调试工具安装
如果你能打开谷歌插件商店, 直接在线安装即可
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN
由于国内无法打开谷歌国外插件商店, 所以可以离线安装
https://www.chromefor.com/vue-js-devtools_v5-3-0/
2.安装步骤:
2.1下载离线安装包
2.2打开谷歌插件界面
2.3直接将插件拖入
2.4报错 程序包无效: "CRX_HEADER_INVALID"
可以将安装包修改为rar后缀, 解压之后再安装
2.5重启浏览器
-->
<!--
2.数据双向绑定
默认情况下Vue只支持数据单向传递 M -> VM -> V
但是由于Vue是基于MVVM设计模式的, 所以也提供了双向传递的能力
在<input>、<textarea> 及 <select> 元素上可以用 v-model 指令创建双向数据绑定
注意点: v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
而总是将 Vue 实例的数据作为数据来源
-->
<!--这里就是MVVM中的View-->
<div id="app">
<p>{{ name }}</p>
<input type="text" v-model="msg">
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "李南江",
msg: "知播渔"
}
});
</script>
</body>
</html>
v-once只渲染一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-常用指令-v-once</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是指令?
指令就是Vue内部提供的一些自定义属性,
这些属性中封装好了Vue内部实现的一些功能
只要使用这些指令就可以使用Vue中实现的这些功能
2.Vue数据绑定的特点
只要数据发生变化, 界面就会跟着变化
3.v-once指令:
让界面不要跟着数据变化, 只渲染一次
-->
<!--这里就是MVVM中的View-->
<div id="app">
<p v-once>原始数据: {{ name }}</p>
<p>当前数据: {{ name }}</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "李南江",
}
});
</script>
</body>
</html>
v-cloak数据渲染完之后才显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-常用指令-v-cloak</title>
<style>
[v-cloak] { display: none }
</style>
</head>
<body>
<!--
1.Vue数据绑定过程
1.1会先将未绑定数据的界面展示给用户
1.2然后再根据模型中的数据和控制的区域生成绑定数据之后的HTML代码
1.3最后再将绑定数据之后的HTML渲染到界面上
正是在最终的HTML被生成渲染之前会先显示模板内容
所以如果用户网络比较慢或者网页性能比较差, 那么用户会看到模板内容
2.如何解决这个问题
利用v-cloak配合 [v-cloak]:{display: none}默认先隐藏未渲染的界面
等到生成HTML渲染之后再重新显示
3.v-cloak指令作用:
数据渲染之后自动显示元素
-->
<!--这里就是MVVM中的View-->
<div id="app">
<p v-cloak>{{ name }}</p>
</div>
<!--
<div id="app">
<p> 李南江 </p>
</div>
-->
<script src="js/vue.js"></script>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "李南江",
}
});
</script>
</body>
</html>
v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-常用指令v-text和v-html</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-text指令
v-text就相当于过去学习的innerText
2.什么是v-html指令
v-html就相当于过去学习的innerHTML
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!--插值的方式: 可以将指定的数据插入到指定的位置-->
<!-- <p>++++{{ name }}++++</p>-->
<!--插值的方式: 不会解析HTML-->
<!-- <p>++++{{ msg }}++++</p>-->
<!--v-text的方式: 会覆盖原有的内容-->
<!-- <p v-text="name">++++++++</p>-->
<!--v-text的方式: 也不会解析HTML-->
<!-- <p v-text="msg">++++++++</p>-->
<!--v-html的方式: 会覆盖原有的内容-->
<p v-html="name">++++++++</p>
<!--v-html的方式:会解析HTML-->
<p v-html="msg">++++++++</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "李南江",
msg: "<span>我是span</span>"
}
});
</script>
</body>
</html>
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-常用指令v-if</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-if指令
条件渲染: 如果v-if取值是true就渲染元素, 如果不是就不渲染元素
2.v-if特点:
如果条件不满足根本就不会创建这个元素(重点)
3.v-if注意点
v-if可以从模型中获取数据
v-if也可以直接赋值一个表达式
-->
<!--
4.v-else指令
v-else指令可以和v-if指令配合使用, 当v-if不满足条件时就执行v-else就显示v-else中的内容
5.v-else注意点
v-else不能单独出现
v-if和v-else中间不能出现其它内容
-->
<!--
6.v-else-if指令
v-else-if可以和v-if指令配合使用, 当v-if不满足条件时就依次执行后续v-else-if, 哪个满足就显示哪个
7.v-else-if注意点
和v-else一样
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p v-if="show">我是true</p>-->
<!-- <p v-if="hidden">我是false</p>-->
<!-- <p v-if="true">我是true</p>-->
<!-- <p v-if="false">我是false</p>-->
<!-- <p v-if="age >= 18">我是true</p>-->
<!-- <p v-if="age < 18">我是false</p>-->
<!-- <p v-if="age >= 18">成年人</p>-->
<!-- <p>中间的内容</p>-->
<!-- <p v-else>未成年人</p>-->
<p v-if="score >= 80">优秀</p>
<p v-else-if="score >= 60">良好</p>
<p v-else>差</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
show: true,
hidden: false,
age: 17,
score: 50
}
});
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-常用指令v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-show指令
v-show和v-if的能够一样都是条件渲染, 取值为true就显示, 取值为false就不显示
2.v-if和v-show区别
v-if: 只要取值为false就不会创建元素
v-show: 哪怕取值为false也会创建元素, 只是如果取值是false会设置元素的display为none
3.v-if和v-show应用场景
由于取值为false时v-if不会创建元素, 所以如果需要切换元素的显示和隐藏, 每次v-if都会创建和删除元素
由于取值为false时v-show会创建元素并设置display为none, 所有如果需要切换元素的显示和隐藏,
不会反复创建和删除, 只是修改display的值
所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p v-show="show">我是true</p>-->
<!-- <p v-show="hidden">我是false</p>-->
<!-- <p v-show="true">我是true</p>-->
<!-- <p v-show="false">我是false</p>-->
<!-- <p v-show="age >= 18">我是true</p>-->
<!-- <p v-show="age < 18">我是false</p>-->
<p v-show="show">我是段落1</p>
<p v-show="hidden">我是段落2</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
show: true,
hidden: false,
age: 18
}
});
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>10-常用指令v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-for指令
相当于JS中的for in循环, 可以根据数据多次渲染元素
2.v-for特点
可以遍历 数组, 字符, 数字, 对象
-->
<!--这里就是MVVM中的View-->
<div id="app">
<ul>
<!-- <li v-for="(value, index) in list">{{index}}---{{value}}</li> -->
<!-- <li v-for="(value, index) in 'abcdefg'">
{{index}}---{{value}}
</li> -->
<!-- <li v-for="(value, index) in 6">{{index}}---{{value}}</li> -->
<!-- <li v-for="(value, key) in obj">{{key}}---{{value}}</li> -->
</ul>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: "#app",
// 这里就是MVVM中的Model
data: {
list: ["张三", "李四", "王五", "赵六"],
obj: {
name: "lnj",
age: 33,
gender: "man",
class: "知播渔",
},
},
});
</script>
</body>
</html>
v-bind(语法糖: 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>10-常用指令v-bind</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-bind指令
在企业开发中想要给"元素"绑定数据, 我们可以使用{{}}, v-text, v-html
但是如果想给"元素的属性"绑定数据, 就必须使用v-bind
所以v-bind的作用是专门用于给"元素的属性"绑定数据的
2.v-bind格式
v-bind:属性名称="绑定的数据"
:属性名称="绑定的数据"
3.v-bind特点
赋值的数据可以是任意一个合法的JS表达式
例如: :属性名称="age + 1"
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p>{{name}}</p>-->
<!-- <p v-text="name"></p>-->
<!-- <p v-html="name"></p>-->
<!--注意点: 如果要给元素的属性绑定数据, 那么是不能够使用插值语法的-->
<!-- <input type="text" value="{{name}}" /> -->
<!--注意点: 虽然通过v-model可以将数据绑定到input标签的value属性上
但是v-model是有局限性的, v-model只能用于input/textarea/select
但是在企业开发中我们还可能需要给其它标签的属性绑定数据-->
<!-- <input type="text" v-model="name">-->
<!-- <input type="text" v-bind:value="name">-->
<!-- <input type="text" :value="name">-->
<input type="text" :value="age + 1" />
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: "#app",
// 这里就是MVVM中的Model
data: {
name: "知播渔666",
age: 18,
},
});
</script>
</body>
</html>
绑定类名:class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-常用指令-绑定类名</title>
<script src="js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.size{
font-size: 100px;
}
.color{
color: red;
}
.active{
background: skyblue;
}
</style>
</head>
<body>
<!--
1.v-bind指令的作用
v-bind指令给"任意标签"的"任意属性"绑定数据
对于大部分的属性而言我们只需要直接赋值即可, 例如:value="name"
但是对于class和style属性而言, 它的格式比较特殊
2.通过v-bind绑定类名格式
:class="['需要绑定类名', ...]"
3.注意点:
3.1直接赋值一个类名(没有放到数组中)默认回去Model中查找
:class="需要绑定类名"
2.2数组中的类名没有用引号括起来也会去Model中查找
:class="[需要绑定类名]"
2.3数组的每一个元素都可以是一个三目运算符按需导入
:class="[flag?'active':'']"
2.4可以使用对象来替代数组中的三目运算符按需导入
:class="[{'active': true}]"
2.5绑定的类名太多可以将类名封装到Model中
obj: {
'color': true,
'size': true,
'active': false,
}
4.绑定类名企业应用场景
从服务器动态获取样式后通过v-bind动态绑定类名
这样就可以让服务端来控制前端样式
常见场景: 618 双11等
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p class="size color active">我是段落</p>-->
<!--
注意点:
如果需要通过v-bind给class绑定类名, 那么不能直接赋值
默认情况下v-bind会去Model中查找数据, 但是Model中没有对应的类名, 所以无效, 所以不能直接赋值
-->
<!-- <p :class="size">我是段落</p>-->
<!--
注意点:
如果想让v-bind去style中查找类名, 那么就必须把类名放到数组中
但是放到数组中之后默认还是回去Model中查找
-->
<!-- <p :class="[size]">我是段落</p>-->
<!--
注意点:
将类名放到数组中之后, 还需要利用引号将类名括起来才会去style中查找
-->
<!-- <p :class="['size', 'color', 'active']">我是段落</p>-->
<!--
注意点:
如果是通过v-bind类绑定类名, 那么在绑定的时候可以编写一个三目运算符来实现按需绑定
格式: 条件表达式 ? '需要绑定的类名' : ''
-->
<!-- <p :class="['size', 'color', flag ? 'active' : '']">我是段落</p>-->
<!--
注意点:
如果是通过v-bind类绑定类名, 那么在绑定的时候可以通过对象来决定是否需要绑定
格式: {'需要绑定的类名' : 是否绑定}
-->
<!-- <p :class="['size', 'color',{'active' : false}]">我是段落</p>-->
<!--
注意点:
如果是通过v-bind类绑定类名, 那么还可以使用Model中的对象来替换数组
-->
<p :class="obj">我是段落</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
flag: false,
obj:{
'size': false,
'color': false,
'active': true,
}
}
});
</script>
</body>
</html>
绑定样式:style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-常用指令-绑定样式</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.如何通过v-bind给style属性绑定数据
1.1将数据放到对象中
:style="{color:'red','font-size':'50px'}"
1.2将数据放到Model对象中
obj: {
color: 'red',
'font-size': '80px',
}
2.注意点
2.1如果属性名称包含-, 那么必须用引号括起来
2.2如果需要绑定Model中的多个对象, 可以放到一个数组中赋值
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <p style="color: red">我是段落</p>-->
<!--
注意点:
和绑定类名一样, 默认情况下v-bind回去Model中查找, 找不到所以没有效果
-->
<!-- <p :style="color: red">我是段落</p>-->
<!--
注意点:
我们只需要将样式代码放到对象中赋值给style即可
但是取值必须用引号括起来
-->
<!-- <p :style="{color: 'red'}">我是段落</p>-->
<!--
注意点:
如果样式的名称带-, 那么也必须用引号括起来才可以
-->
<!-- <p :style="{color: 'red', 'font-size': '100px'}">我是段落</p>-->
<!-- <p :style="obj">我是段落</p>-->
<!--
注意点:
如果Model中保存了多个样式的对象 ,想将多个对象都绑定给style, 那么可以将多个对象放到数组中赋值给style即可
-->
<p :style="[obj1, obj2]">我是段落</p>
</div>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
obj1:{
"color": "blue",
"font-size": "100px"
},
obj2: {
"background-color": "red"
}
}
});
</script>
</body>
</html>
v-on(语法糖: @)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14-常用指令-v-on</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--
1.什么是v-on指令?
v-on指令专门用于给元素绑定监听事件
2.v-on指令格式
v-on:事件名称="回调函数名称"
@事件名称="回调函数名称"
3.v-on注意点:
v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数
-->
<!--这里就是MVVM中的View-->
<div id="app">
<!-- <button onclick="alert('lnj')">我是按钮</button>-->
<!--
注意点:
1.如果是通过v-on来绑定监听事件, 那么在指定事件名称的时候不需要写on
2.如果是通过v-on来绑定监听事件, 那么在赋值的时候必须赋值一个回调函数的名称
-->
<!-- <button v-on:click="alert('lnj')">我是按钮</button>-->
<!--
...
8 回复
vue都快忘光了，看了以后感觉捡起来了一些
太强了！写了这么多！属于是真正的大佬了！
现在正好在学Vue，看完后感觉在复习了的同时又学到了不少新知识~~
厉害了，文章干货很多
顺便复习一下,哈哈,加油~
复习了一遍vue的知识，不错
好贴，期待2和3
写了好多！学习了！
社区大佬真多 学到了学到了