目录
- Vue的简介
- Vue的基础用法
- Vue的事件绑定
- Vue的双向绑定
- Vue的渲染
- Vue的过滤器
- Vue的侦听器
- Vue的计算属性
- Vue中axios的使用
- Vue的props的运用
- Vue的样式冲突
- Vue的生命周期
前言
这是我自己根据黑马程序员的视频对Vue2.js进行的大总结，里面的内容可能会存在着很多不足的地方，但是该总结的我都把它写进去啦！！！，重点的知识我会在里面用红色的字体加粗哦！
一、Vue的简介
官方给出的概念：Vue是一套用于构建用户界面的前端框架
(1)、构建用户界面
---用vue往html页面中填充数据，非常的方便
(2)、框架
---是一套现成的解决方案
1、Vue的两大特性
(1)、数据驱动视图：
---数据的变化会驱动视图自动更新
---好处：当页面数据发生变化时，页面会自动重新渲染
(2)、双向数据绑定：
---在网页中，form表单负责采集数据，Ajax负责提交数据
---js数据的变化，会自动渲染到页面上
--- 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
2、MVVM
二、Vue的基础用法
1.基本使用步骤
（1）导入vue.js的script脚本文件
（2）在页面中声明一个将要被vue所控制的DOM区域
（3）创建vm实例对象（vue实例对象）
<body>
<div id="app">{{username}}</div>
<!-- 1、导入Vue的库文件，在window全局就有了Vue这个构造函数 -->
<script src="../lib/vue-2.6.12.js"></script>
<script>
//2、 创建Vue的实例对象
const vm=new Vue({
//el属性是固定写法，表示当前VM实例要控制页面上的哪个区域，接收的值是一个选择器
el:'#app',
// data对象就是要渲染到页面上的数据
data:{
username:'张三'
}
})
</script>
</body>2.指令
指令是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
2.1 内容渲染指令
概念：内容渲染指令用来辅助开发者渲染DOM元素的文本内容
(1)、v-text指令的缺点：会覆盖元素内部原有的内容！
(2) 、{{ }}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容
(3)、 v-html指令的作用：可以把带有标签的字符串，渲染成真正的HTML内容，{{}}和v-text只能渲染纯文本
注意：(1)、{{ }}插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中
（2）插值里面可以计算,还可以进行三元表达式判断。
<div>{{1+2+3}}</div>
<div>{{num<10?num:0+num }}</div>
data:{
num:3
}
代码展示如下：
<body> <div id="app"> <p v-text="username"></p> <p v-text="gender">性别</p> <hr> <p>姓名：{{username}}</p> <p>性别:{{gender}}</p> <hr> <p>{{info}}</p> <p v-text="info"></p> <p v-html="info"></p> </div> <!-- 导入Vue的库文件，在window全局就有了Vue这个构造函数 --> <script src="../lib/vue-2.6.12.js"></script> <script> // 创建Vue的实例对象 const vm=new Vue({ el:'#app',//el属性是固定写法 data:{ username:'张三', gender:'女', info:'<h1 style="color:red">欢迎光临</h1>' } }) </script> </body>
2.2、属性绑定指令
在Vue中，可以使用v-bind：指令，为元素的属性动态绑定值
简写是英文的 ：
在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
<div :title="'box'+index"> 这是一个div</div>
2.3、动态添加索引值
//box一定要加单引号，然后跟id进行动态拼接：box2
<div :title="'box'+id">这是一个div</div>
//这是data里的数据
data:{
id:2
}三、事件绑定
---1、v-on：简写@
---2、语法格式：
<button @click="add"></button>
methods:{
add(){
---如果在方法中要修改data中的数据，可以通过this访问到
this.count+=1
}
3、事件绑定并传参
<button @click="add(1)"</button>
methods:{
add(n){
---如果在方法中要修改data中的数据，可以通过this访问到
this.count+=n
}
4、$event
<!-- vue提供了内置变量，名字叫$event 他就是原生DoM事件的对象e -->
绑定事件后面传两个参数：
（1）实参
（2）$event (可以获取事件e)
<button @click="add(1,$event)">+1</button>
// methods的作用，就是定义事件的处理函数
methods:{
// add:function(){
// console.log('ok')
// }
// 简写
add(n,e){
this.count+=n
if(this.count %2===0){
e.target.style.backgroundColor='red'
}
else{
e.target.style.backgroundColor=''
}
},}5、事件修饰符
.prevent:阻止默认行为（例如：阻止a链接的跳转，阻止表单的提交等)
<a @click.prevent="xxx”>链接</a>
.stop:阻止事件冒泡
<button @click.stop="xxx"></button>.capture 以捕获模式触发当前的事件处理函数
.once 绑定事件只触发一次
.self 只有在event.target是当前元素自身触发事件处理函数
6、按键修饰符
<input @keyup.enter="submit"> // 按下enter键是触发
<input @keyup.esc="clearInput> //按下esc键触发
四、Vue的双向绑定
v-model 双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据
<p>{{name}}</p>
<input type="text" v-model="name">
data:{
name:'张三',
//当用户修改了输入框的内容，data里面的值和插值里面的值都会发生改变
},
注意：v-bind是单向数据绑定，v-model是双向数据绑定
v-model只能绑定在表单数据里，不能和div，p等元素标签进行绑定
（1）v-model指令的修饰符
五、Vue的渲染
5.1、条件渲染指令
(1)、v-show 的原理是动态为元素添加或移除display:none样式，来实现元素的显示和隐藏
**如果要频繁的切换元素的显示状态，用v-show性能会更好
<p v-show="flag">这是v-show指令</p>
(2)、v-if的原理是：每次动态创建或移除元素，来实现元素的显示和隐藏
**如果刚进入页面的时候，某些元素默认不需要被展示，而后期这个元素很可能也不需要被展示出来，此时v-if性能更好
<p v-if="flag">这是v-if指令</p>
(3)v-if的配套指令 相当于js里面的if -->else if-->else if-->else
<div v-if="type==='A'">优秀</div>
<div v-else-if="type==='B'">良好</div>
<div v-else-if="type==='C'">一般</div>
<div v-else>较差</div>注意：v-else-if指令必须配合v-if指令一起使用，否则他将不会被识别
5.2、列表渲染指令
注意： 官方建议：只要用到了v-for的指令，那么一定要绑定一个：key属性 而且，尽量把id做为key的值 官方对key的值的类型：字符串或数字类型
(item,index)第一个参数是data里面的list数据，第二个是索引号
<tr v-for="(item,index) in list" :title="item.name+index" :key="item.id">
<td>{{index}}</td>
<script src="../lib/vue-2.6.12.js"></script><td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
data:{
list:[
{id:0,name:'张三'},
{id:1,name:'李斯'},
{id:2,name:'张华'},
{id:3,name:'王五'}
]
}六、Vue的过滤器
过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定
6.1、私有过滤器
过滤器应该被添加到js表达式的尾部，由“管道符"进行调用
<body> //在过滤器中过滤后，最终得到的值是过滤器后面的值
<div id="app">
{{message | api}} //过滤器前面的值是由data里面的数据决定的，后面的值自己随意命名
</div>
<script src="../lib/vue-2.6.12.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
message:'hello world!'
},
// 过滤器函数，必须被定义到filters节点之下
// 过滤器本质是一个函数
filters:{
// 在过滤器的形参中，就可以获取到‘管道符’前面待处理的那个值
api(val){
//这个是 私有过滤器
// 字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
const first=val.charAt(0).toUpperCase()
// 字符串的slice方法，可以截取字符串，从指定索引往后截取
const other=val.slice(1)
const all=first+other
return all
}
}
})
</script>
</body>过滤器的注意点：
1、要定义到filters节点下，本质是一个函数
2、在过滤器函数中，一定要有return值
3、在过滤器的形参中，就可以获取到‘管道符’前面待处理的那个值
4、如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是"私有过滤器"
6.2、全局过滤器
在filters节点下定义的过滤器，称为”私有过滤器”,因为它只能在当前vm实例所控的el区域内使用，如果希望在多个vue实例之间共享过滤器，则需要定义一个全局过滤器。
<div id="app2">
{{message | api}}
</div>
// 定义一个全局过滤器
Vue.filter('api',function(str){
const first=str.charAt(0).toUpperCase()
// 字符串的slice方法，可以截取字符串，从指定索引往后截取
const other=str.slice(1)
const all=first+other
return all
})6.3、多个过滤器的调用
<div id="app2">
{{message | api}}
</div>
<!-- 连续调用多个过滤器 -->
<div id="app3">
{{message | api | maxLength}}
</div>
<script src="../lib/vue-2.6.12.js"></script>
<script>
// 定义一个全局过滤器
Vue.filter('api',function(str){
const first=str.charAt(0).toUpperCase()
// 字符串的slice方法，可以截取字符串，从指定索引往后截取
const other=str.slice(1)
const all=first+other
return all
})
// 定义控制文本长度的过滤器
Vue.filter("maxLength",function(str){
if(str.length<=10) return str
return str.slice(0,10)+'...'
})
const vm=new Vue({
el:'#app',
data:{
message:'hello world!'
}，})
</script>6.4、过滤器传参
<div id="app3">
{{message | api | maxLength(3)}}
</div>
// 定义控制文本长度的过滤器
Vue.filter("maxLength",function(str,len=10){
if(str.length<=10) return str
return str.slice(0,len)+'...'
})
const vm=new Vue({
el:'#app',
data:{
message:'hello world!'
},}）
输出结果：hel... //因为maxLength(3)中是实参是3。
七、Vue的侦听器
watch侦听器：运行开发者监视数据的变化，从而针对数据的变化做特定的操作
7.1、方法格式的侦听器
---缺点1：无法在刚进入页面的时候，自动触发！！！
---缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
语法格式：
const vm=new Vue({
el:'#app',//el属性是固定写法
data:{
username:"admin"
},
// 所有的侦听器，都应该被定义到watch节点下
watch:{
//监听 username值的变化
// 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
// 新值在前，旧值在后
username(newVal,oldVal){
// console.log(newVal,oldVal);}}
7.2、对象格式的侦听器
---好处1：可以通过immediate选项，让侦听器自动触发！！！
---好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化！！！
const vm=new Vue({
el:'#app',//el属性是固定写法
data:{
info:{
username:"admin"
}
},
// 所有的侦听器，都应该被定义到watch节点下
watch:{
// 定义对象格式的侦听器
// info:{
// // 侦听器的处理函数
// handler(newVal,oldVal){
// console.log(newVal,oldVal);
// },
//开启深度监听，只要对象中任何一个属性变化，都会触发‘对象的侦听器’
deep:true (深度监听) 或者 immediate：true (自动触发一次)
// }
// 如果要侦听的是对象的子属性的变化，则必须包含一层单引号
'info.username'(newVal){
console.log(newVal);
}
}
})7.3、监听对象单个属性的变化
八、Vue的计算属性
计算属性：所有的计算属性都要定义到computed节点之下，计算属性在定义的时候，要定义成‘方法格式’
特点：
1.定义的时候，要被定义为“方法”
2.在使用计算属性的时候，当普通的属性使用即可
好处：
1、实现了代码的复用
2、只要计算属性中依赖的数据源变化，则计算属性会自动重新求值
九、Vue中axios的使用
1、发起GET请求
如果调用某个方法的返回值是Promise实例，则前面可以添加await,
await只能用在被async“修饰”的方法中
// 调用axios方法得到的返回值是Promise对象
document.querySelector('#btn').addEventListener('click', async function(){
//解构赋值的时候，使用：进行重命名
---1、调用axios之后，使用async/await进行简化
---2、使用解构赋值，从axios封装的大对象中，把data属性解构出来
---3、把解构出来的data属性，使用冒号进行重命名，一般都重命名为{data:res}
const {data:res}=await axios({
// 请求方式
method:'GET',
// 请求地址
url:'http://www.liulongvin.top:3006/api/getbooks',
// URL中的查询参数
params:{
id:1
}
}).then(function(res){
console.log(res.data);
})
}
2、发起POST请求
document.querySelector('#btn').addEventListener('click', async function(){
const {data:res}=await axios({
// 请求方式
method:'POST',
// 请求地址
url:'http://www.liulongvin.top:3006/api/getbooks',
// URL中的查询参数
data:{
name:'zs',
age:18
}
}).then(function(res){
console.log(res.data);
})
}
注意：axios 专注于数据请求的库
3、全局配置axios
在main.js入口文件中，通过app.config.globalProperties全局挂载axios,示例代码如下：
十、Vue的props的运用
1、组件的props
props是组件的自定义属性，组件的使用者可以通过props把数据传递到子组件内部供子组件内部进行使用，在封装通用组件的时候，合理的使用props可以极大的提高组件的复用性！
props的作用：父组件通过props向子组件传递要展示的数据。
注意：props是只读的，程序员不能直接修改props的值，否则会直接报错。想要修改props的值，可以把props的值转存到data中，因为data中的数据是可读可写的！！！
data(){
return{ count:this.init }}
2、props的default默认值
3、props的type值类型
4、 props的required必填项校验
如果组件的某个props是必填项，必须让组件的使用者为其传递属性的值。此时可以通过如下反射光将其设置为必填项：
props:{
init:{
default:0,
type:Number,
required:true //必填项校验 } }
5、无法使用未声明的props
6、动态绑定props值
7、props的大小写命名
8、Props的校验
指的是：在封装组件时对外界传递过来的props数据进行合法性的校验，从而防止数据不合法的问题。
（1）对象类型的props节点
（2）基础类型的检查
注意：如果某个props属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型
props：{
PropA:[String ,Number], //PropA属性的值可以是“字符串”或“数字"
}
（3）自定义验证函数
十一、Vue的样式冲突
1、组件之间的样式冲突问题
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题
解决样式冲入的方法：
（1）在style样式内部添加 scoped，防止样式冲突。
<style lang="less" scoped></style>
（2）/deep/样式穿透
/deep/ .title{ }
或者 :deep(.title){ } //这个方法是用在vue3中的
（3)[data-v-xxx]
.title[data-v-xxx]
十二、Vue的生命周期
生命周期是指一个组件从创建-->运行-->销毁的整个阶段，强调的是一个时间段。
生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。
817
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
