Vue 入门到精通（更新中....）
作者也是新手，写这个博客的目的是一方面复习一下学过的内容，另一方面也是给想了解Vue的人一个简易的一个文档。主要内容为对应标题的代码，偶尔代码内会有注释，在代码下方是该节所涉及到的知识点，精力有限，暂时还没有各个章节的概述。如果有看不懂的地方可以留言，大家一起学习，共同进步。
作者看的教程视频来自B站， 2019年最全最新Vue、Vuejs教程，从入门到精通（up：ilovecoding）个人觉得这个教程还是不错的，很适合Vue的初学者，不过一定要有HTML和CSS的基础！！！（侵删）
与文章相对应的 代码，不需要积分，进度会比文章快一些，还有一些文章内没有提到的小案例
如有问题请随时指出！！！！！
ES6语法（补充）
块级作用域
代码（知识点在代码内，有注释）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script src="../js/vue.js"></script>
<script>
//ES5中的var是没有块级作用域的（if/for）
//ES6中的var是有块级作用域的（if/for）
//ES5之前因为if和for都没块级作用域的概念，只有函数有作用域，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题
//ES6中加入了let，let是有if和for块级作用域的
// {var name ='why'
// console.log(name);}
// console.log(name);
// //{}不是作用域，不在{}内也可使用
//没有块级作用域引起的问题
// var func;
// if (true){
// var name='why'
// func=function (){
// console.log(name);
// }
// func()
// }
// name='213132'
// func()
//有可能func以组件的模式传给别人，如果在执行func之前，更改了name，那么name的值将会变为被更改之后的值，func无效
// var btns = document.getElementsByTagName('button');
// //getElementsByTagName不要写错
// for (var i=0;i<btns.length; i++){
// btns[i].addEventListener('click',function (){
// console.log('我是错误的ES5：'+'第'+ i +'个按钮被点击');
//
//
// })
// }
//没有块级作用域，无法达到预期效果，解决方法创建闭包
//为什么闭包可以解决问题？
//函数有作用域
//ES5写法
// var btns = document.getElementsByTagName('button');
// //getElementsByTagName不要写错
// for (var i=0;i<btns.length; i++){
// (function (i){
// btns[i].addEventListener('click',function (){
// console.log('我是正确的ES5： '+'第'+ i +'个按钮被点击');
//
//
// })
// })(i)
//
// }//过于繁琐，别扭
//
// log快捷，‘带输出日志’.log
//ES5写法举例
// var name ='aaa'
// function abc (bbb){//bbb='aaa'
// console.log(bbb);
// }
// abc(name)
// name='qqqq'
//ES6写法
const btns=document.getElementsByTagName('button')
for (let i=0;i<btns.length;i++) {
//注意一定不能写var i=0； 要写let i=0
btns[i].addEventListener('click',function () {
console.log('我是ES6： '+'第' + i + '个按钮被点击');
})
}
// for 所对应的{}会执行5次
//因为在ES6语法中，let有左右与，所以在第一次运行时i=0.第二次运行时i=1. 以此类推
//因为在ES5语法中，没有作用域，修改的是外部的i，多次更改之后，内部调用的是最终更改完的i
// 下面为模仿ES6执行时的伪代码，加强理解
// {i=0
// //注意一定不能写var i=0； 要写let i=0
// btns[i].addEventListener('click',function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// {i=1
// //注意一定不能写var i=0； 要写let i=0
// btns[i].addEventListener('click',function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// {i=2
// //注意一定不能写var i=0； 要写let i=0
// btns[i].addEventListener('click',function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// {i=3
// //注意一定不能写var i=0； 要写let i=0
// btns[i].addEventListener('click',function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
// {i=4
// //注意一定不能写var i=0； 要写let i=0
// btns[i].addEventListener('click',function () {
// console.log('第' + i + '个按钮被点击');
// })
// }
</script>
</body>
</html>
认识Vue
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。
如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。
在学习Vue之后一定不要在读作 “wei you yi”了，正确读音/vjuː/。
Vue官网
Vue.js安装
-
兼容性
Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 -
语义化版本控制
Vue 在其所有项目中公布的功能和行为都遵循语义化版本控制。对于未公布的或内部暴露的行为，其变更会描述在发布说明中。 -
更新日志
最新稳定版本：2.6.11
每个版本的更新日志见 GitHub。 -
Vue Devtools
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用
安装方式
1.直接用 <script> 引入
下载好vue.js，导入到程序中，通过<script src="../js/vue.js"></script>引用vue.js
在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
开发版本包含完整的警告和调试模式
生产版本删除了警告，33.30KB min+gzip
（建议在Vue官网下载开发版本）
其他下载方式后续更新，或去官网自行下载
第一章 初识Vue
第一节 Hello Vue
1.let（变量） const（常量）
const app =new Vue（{}）
2.el (用于挂载要管理的元素) el:’#挂载的元素’
el:'#app'
3.data （定义元素） data：{ 需定义的元素：’’ }
data:{//定义数据
name:'哈哈哈哈'
}
4.Mustache（胡须）语法即双大括号{{}},只能在{{}}
<div id="app">{{name}}</div>
第二节 Vue列表
v-for (列表)
`<ul><li v-for ="变量 in 列表">{{变量}}</li></ul>`
第二章 差值的操作
``第一节 Mustache语法
{{}}空格{{}}={{元素+‘空格’+元素}}
<h2>{{firstname+' '+lastname}}</h2>
<h2>{{firstname+lastname}}</h2>
<h2>{{firstname}} {{lastname}}</h2>
第二节 v-once的使用
v-once 只会渲染一次，不会随着数据改变而改变
第三节 v-html指令的使用
在不使用v-html指令时，vue无法解析data内定义的元素属性，只会原封不动的展示文本，在使用v-html指令后，会将链接进行解析并转换成html
第四节 v-text指令的使用
v-text只能显示文本，并且不够灵活
第五节 v-pre指令的使用
使用v-pre指令之后，{{}}内的内容不会被解析，会原封不动的显示出来
第六节 v-cloak指令的使用
1.v-cloak翻译为斗篷，在vue解析之前v-cloak存在，style成立，不显示任何内容，在vue解析之后v-cloak消失，style不成立，显示解析内容
2.settimeout 延时操作，1000为1s。
第三章 动态绑定属性
第一节 v-bind的基本使用
1.v-bind 动态绑定class 语法糖“：”
<a :href="aherf">B站</a>
2.绑定动态属性时需使用v-bind，如超链接、图片链接、样式等
<img v-bind:src="imgurl"></img>
<a v-bind:href="aherf">B站</a>
第二节 v-bind动态绑定class（对象语法）
- 绑定对象时，v-bind:class="{}“或:class=”{}"
<h2 :class="{active:isactive,line:isline}">哈哈哈</h2>
<h2 :class="getclass()">哈哈哈</h2>
2.<h2 :class="{类名1：布尔值（true），类名2：布尔值}">哈哈哈</h2>
3.上述方法可更改为在methods内写入
getclass:function (){
return{active:this.isactive,line:this.isline} }
后<h2 :class="getclass()">哈哈哈</h2>
第三节 v-bind动态绑定class（数组语法）
1.数组写法:class[‘active’,‘line’]
<h2 :class="['active','line']">哈哈哈</h2>
2.有单引号时为字符串，无单引号为变量
3.使用动态绑定时也可用其他形式的class 如
<h2 class=“active” :class="{active:isactive,line:isline}">哈哈哈</h2>
第四节 作业v-for和v-bind的结合
要求：
1.在执行代码之后第一行文字为蓝色
2.执行代码后，点击任意一行文字可使其变为蓝色，其他位置的文字变为黑色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in letters"
:class="{active: currentIndex === index}"
@click="liclick(index)">
{{index}}.{{item}}
</li>
</ul>
<!-- <button @click="btnclick">按钮</button> 注意：此处不能添加button按钮单击事件，否则会引起冲突-->
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
letters:['黑猫警长','舒克和贝塔','葫芦娃'],
currentIndex:0//状态
},
methods:{
liclick (index){
this.currentIndex = index
}
}
})
</script>
</body>
</html>
第五节 v-bind动态绑定style（对象语法）
1.设定字体大小时，在div标签内，需‘100px’，一定要有单引号
<h2 :style="{fontSize:size+'px',backgroundColor:color}">哈哈哈</h2>
2.如果在data内设定，为填写字体单位时，需在div标签标明单位
<`h2 :style="{fontSize:size+'px',backgroundColor:color}">哈哈哈</h2>
3.绑定style也可在motheds内写
methods:{
button: function (){
this.isactive = !this.isactive
},
getclass:function (){
return{active:this.isactive,line:this.isline}
}
}
div
<h2 :class="getclass()">哈哈哈</h2>
第六节 v-bind动态绑定style（数组语法）
1.v-bind指令采用数组语法绑定style时，
<h2 :style="[baseStyle,baseStyle1]">哈哈哈</h2>
在methods定义好，数组内无需添加单引号
methods:{
button: function (){
this.isactive = !this.isactive
},
getclass:function (){
return{active:this.isactive,line:this.isline}
}
}
第四章 计算属性
第一节 计算属性的基本使用
computed:{
fullname:function (){
return this.firstname +' '+this.lastname
}
}
computed ：计算属性
第二节 计算属性的复杂操作
在计算属性内利用for循环计算price的总价格
computed:{
totalPrice:function (){
let result=0
for (let i=0; i < this.books.length; i++){
result +=this.books[i].price
}
return result
}
}
第三节 计算属性的setter与getter
1.set为只读属性，一般情况下时不写set的
computed:{
fullname:{
// set: function(){
// set为只读属性，一般是没有set方法的
// },
get: function(){
return this.lastname+' '+this.firstname
}
}
}
2.因为可不写set，所以在计算属性中可将`
fullname（）{
get：function（）{
}}
简写为fullname（）{}
第五节 计算属性和methods的对比
<h2>{{firstname}} {{lastname}}</h2>， 直接拼接 语法过于繁琐，不推荐使用<h2>{{getfullname()}}</h2>
， 采用methods方法，没有缓存，执行多次时会调用多次<h2>{{fullname}}</h2>， compted计算属性，有缓存，多次执行只会调用一次
第五章 事件监听
第一节 v-on的基本使用
1.v-on (类似触发器) v-on:click="" 点击按钮后触发事件
2.语法糖：简写
3.v-on:click="" 等于@click=""
<button @click="add">+</button>
<button @click="sub">-</button>
4.methods (方法) methonds:{方法名：function（）{ } }
methods:{
add: function (){
console.log('添加');
this.conter++
},
sub: function (){
console.log('减少');
this.conter--
}
}
第二节 v-on的参数问题
1.如果函数需要参数，但是没有传入，则形参为undefined
举例：function abc(name){ console.log(name);} abc()
2. 事件调用的方法没有参数
举例：<button @click="btn1click()">1</button> <button @click="btn1click">1</button>
3.在事件定义时，写函数时省略了（），但是方法本身是需要一个参数的
举例：<button @click="btn2click()">2</button> <button @click="btn2click">2</button>
4.vue会默认将浏览器生成的event事件对象传入到方法
5.方法定义时，我们需要event对象，同时又需要其他参数
举例：<button @click="btn3click(123,$event)">3</button>
6.在调用方式，手动的获取到浏览器参数的event对象:$event
7.如果123替换为‘abc’则输出abc，如果为abc，则abc为一个变量，需要在data内定义abc
<button @click="btn3click(123,$event)">3</button>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 事件调用的方法没有参数-->
<button @click="btn1click()">1</button>
<button @click="btn1click">1</button>
<!-- 在事件定义时，写函数时省略了（），但是方法本身是需要一个参数的-->
<button @click="btn2click()">2</button>
<button @click="btn2click">2</button>
<!-- vue会默认将浏览器生成的event事件对象传入到方法-->
<!-- 方法定义时，我们需要event对象，同时又需要其他参数-->
<!-- 在调用方式，如何手动的获取到浏览器参数的event对象:$event-->
<button @click="btn3click(123,$event)">3</button>
<!-- 如果123替换为‘abc’则输出abc，如果为abc，则abc为一个变量，需要在data内定义abc-->
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
},
methods:{
btn1click() {
console.log("btnclick");
},
btn2click(event){
console.log('.....', event);
},
btn3click(abc,event){
console.log('++++', abc, event);
}
}
})
// 如果函数需要参数，但是没有传入，则形参为undefined
// function abc(name){
// console.log(name);
// }
// abc()
</script>
</body>
</html>
第三节 v-on的装饰符
1.stop修饰符：在使用stop后，会将divclick和btnclick进行分割处理，如果没有stop则会出现冒泡，点击按钮会同时显示divclick和btnclick被点击。
<div @click="divclick">啊啊啊啊啊
<button @click.stop="btnclick">1</button>
</div>
2.prevent修饰符： prevent阻止默认事件，这里阻止的是默认提交
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitclick">
</form>
3.监听键盘的某个按键的点击v-on:keyup=""
4. keyup使用较多 松开键盘会有提示 keydown是监听键盘按下
<input type="text" v-on:keyup="keyup">
5.once修饰符，只使用一次
<button @click.once="click">2222</button>
第六章 条件判断
第一节 v-if v-else v-else-if的基本使用
v-if后需添加布尔值进行判断
<h2 v-if="isshow">{{name}}</h2>
const app=new Vue({
el:'#app',
data:{
name:'哈哈哈',
isshow: true
}
})
第二节 用户登录切换的案例
1.vue在进行dom渲染时，出于性能的考虑，会尽可能使用已经存在的元素
而不是创建新的元素
2.在切换新的文本框时，内容不会发生改变
3.解决方法：需要在input内加上key，并且保证key的值不同
<span v-if="login">
<label for="username"> 账号登录：</label>
<input type="text" id="username" placeholder="账号登录" key="1">
<button @click="btnclick">账号登录</button>
</span>
<span v-else>
<label for="email">邮箱登录：</label>
<input type="text" id="email" placeholder="邮箱登录" key="2">
<button @click="btnclick">邮箱登录</button>
</span>
第三节 v-show和v-if的区别
1.v-if和v-show的区别：
v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中，即当为false时从dom中删除，当为true时在dom中添加
v-show：当条件为false时，只是给我们的元素添加一个行内样式：display：none
2. 在显示和隐藏的切换频率非常高时使用v-show，当只有一次时使用v-if
第七章 循环遍历
第一节 v-for遍历数组
再添加index后显示当前元素的索引（从0开始）
<li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
第二节 v-for遍历对象
1.在遍历对象过程中如果只获取一个值，那么就是value
<li v-for="item in info">{{item}}</li>
2.获取key和value 格式（value，key）
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
3.获取key和value和index 格式（value，key，index）
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
第三节 v-for使用时添加key
1.添加key时不能使用index，因为index不是对应的
<li v-for="item in letters" :key="item">{{item}}</li>
2.渲染成功后再渲染新元素的方式
- 无key值时会挨个替换不同数组，如在第二个元素后添加，会将第二个元素及之后元素进行替换，并在最后添加一个新元素 （2） 有key
- 有k值时根据key一一对比，有key的元素是否发生变化，如果无变化，会使用原元素，然后在相应元素后直接插入
3.key的作用是为了高效的更新虚拟dom diff算法
4.添加的内容为唯一性
第四节 数组的响应式
一、响应式
1.push方法
this.letters.push('aaaa')
this.letters.push('aaaa','aaaaaa','aaaaaaa')
2.pop() 删除数组最后一个元素
this.letters.pop();
3.shift() 删除数组中的第一个元素
this.letters.shift();
4.unshift() 在数组最前面添加元素
this.letters.unshift('aaa')
this.letters.unshift('aaaa','aaaaaa','aaaaaaa')
5.splise 删除元素，插入元素，替换元素
- 删除元素：splise(strat:从那个位置删除、插入、替换元素 删除元素时：第二个元素写要删除元素的个数，如果不写数值，会删除除第一个元素）
this.letters.splice(1,2)
const start=2;
this.letters.splice(start)
- 替换元素 可理解为先删除在添加 第二个参数表示我们要替换几个元素，后面是要替换的元素
this.letters.splice(1,2,'a','w')
- 插入元素:第二个参数传入0，并且后面跟上要插入的元素
this.letters.splice(1,0,'s','d','g')
6.sort() 排序
this.letters.sort()
7.reverse()反转
this.letters.reverse()
二、 非响应式
通过索引值修改数组中的元素
this.letters[0]='aaaaa';
``
扫一扫
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
