Vue2入门笔记
Vue入门必备本！⭐关注我查看全套配套笔记
学习视频：https://www.bilibili.com/video/BV1Zy4y1K7SH/【尚硅谷Vue全家桶】
本博客是对该视频内容的整理以及加入自己的理解 想全面学习的推荐大家去看原视频
1.基础
1.特点
1.采用组件化模式，提高代码复用率，让代码更好维护
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率
3.使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点
2.官网内容
官方网址 ：cn.vuejs.org
3.下载及安装
1.下载
在官方网址 : 安装 — Vue.js (vuejs.org)
需要配置以下内容：
2.安装开发者工具
一、Chrome浏览器安装方式：
①：点击右上角三个点
②：点击更多工具
③：点击扩展程序
④：点击右上角的开发者模式，将他启用
⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可
二：Edge浏览器安装方式
①：点击浏览器右上角的三个点
②：点击扩展
③：点击左下角的开发人员模式，将他启用
④：将Vue.crx文件拖动到浏览器即可
https://pan.baidu.com/s/1MtYvMPew4lb14piIrs9x6w
提取码：6666
3.关闭开发者提示
Vue.config.productionTip = false;
2.基础使用
// 非Vue控制的函数尽量写成箭头函数
1.基础Vue全局配置(传参)/使用对象方法
<div id="root">
<h1>你好,{{name}}</h1> <!-- 使用模板语法去渲染 -->
</div>
<div class="root">
<h1>你好,{{name}}</h1> <!-- {{ }} 中必须写JS表达式！ -->
<h2>现在时间是{{Date.now()}}</h2>
</div>
<!-- 表达式: 一个表达式会生成一个值,可以放在任何一个需要值的地方 -->
<script>
x = new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务 通常为css选择器字符串
data:{ //储存数据,只能在指定的容器中去使用,值写成一个对象
name:'尚硅谷',
}
})
// 只会选择第一个 root
// 容器与Vue是一一对应的！！！
const y = new Vue({
el:'.root',
data:{
name:'尚硅谷'
}
// data第二种写法 函数式写法 vue自动调用该函数
// 不能使用箭头函数 this 会指向windows
data:fuction(){
console.log('QQQ', this)
return{
name:'尚硅谷'
}
}
}
})
// 使用方法修改参数
y.$mount('#root') // s修改实例构造器中的 element
</script>2.模板语法
<!--
插值语法
功能:用于解析标签体内容
写法:{[xXXx}]. xxx是js表达式,且可以直接读取到data中的所有属性
-->
<h1>你好,{{name}}</h1>
<!--
指令语法 设置元素的属性
功能:用于解析标签（包括:标签属性、标签体内容、绑定事件.....)
举例:v-bind:href=""xxx”或简写为:href="xxx""，xxx同样要js表达式，且可以直接读取到data中的所有属性
备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。
-->
<a v-bind:href="url">点我</a>
<!-- 简写 -->
<a :href="url">点我</a>3.数据绑定
<input v-bind:value="url">我是单项绑定
<input v-model:value="url">我是双向绑定
<!-- v-model 只能用在表单类元素上 输入类元素 含有value值 -->
<!-- 简写 -->
// 绑定后 为js表达式 不绑定为字符串
<input :value="url">我是单项绑定
<input v-model="url">我是双向绑定4.MVVM模型
1.M:模型(Model):对应data中的数据
2.V:视图(View):模板
3.VM:视图模型(ViewModel) : Vue 实例对象心
因此 vm 也经常作为 Vue的实例对象
const vm = new Vue({})
5.vm
<!--
vm中实例含有的内容
可以直接在 Vue 模板中直接使用
-->
<h1>
{{ $mount('#root') }}
</h1>
{{name}} 存在是因为会自动添加到 vm 对象中6.进阶技术 Object方法
// 使用 object.defineProperty 添加对象成员
Object.defineProperty(对象名,添加的键,添加的值)
Object.defineProperty(obj,keys,{
value:18, // 设置
enumerable:true, // 控制属性是否可以被枚举(被遍历) 默认为false
writable:true, // 控制属性是否可以被修改 默认为false
configurable:true, // 控制属性石佛可以被删除 默认为false
// 当有人读取person的age属性时，get函数(getter)就会被调用,且返回值就是age的值
get:function(){
return number;
}
// 简写
get(){
return number;
}
// getter 与 setter
set(value){
number = value;
}
})7.数据代理
<!--数据代理:通过一个对象代理对另一个对象中属性的操作（读/写) -->
<script>
obj1 = {
x:100,
}
obj2 = {
y:200,
}
Object.defineProperty(obj2,x,{
value:obj1.x, // 此处与 obj1 的属性绑定
})
</script>
数据代理在 Vue 中的应用
<!--
vm 实例中的数据 与构造器中 data中的数据绑定
-->
_data实际上里面为数据劫持
8.事件的基本使用
<div id="root">
<!-- 事件触发回调函数 -->
// 需要传参可以加括号 但是 event会消失 加入 $event Vue帮助传参
<button v-on:click="showInfo($event,66)">点我提示信息</button>
<!-- 事件修饰符 + 简写 @ -->
<a href="#" @click.prevent="methods">点我跳转</a> // 阻止跳转
<!--
1.prevent: 阻止默认事件（常用);
2.stop:阻止事件冒泡（常用);
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
// 默认的时候 先执行回调函数 等待回调函数执行完毕再运行默认事件(鼠标下滑等)
-->
</div>
<script>
x = new Vue({
el:'#root',
data:{ // 数据劫持 + 数据代理
name:'尚硅谷',
},
methods:{ // methods中的函数可以加到data中 但会拖累Vue
showInfo(event,number){ // event 为事件对象
alert("同学你好" + number);
},
aClick(e){
e.preventDefault();
alert("同学你好")
}
}
})
</script>9.键盘事件
<!--准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}学习</h2> <!-- 这里的.enter代表按下键盘enter键 -->
<input type="text" placeholder="按下回车提示输入"@keyup.enter="showInfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示
new Vue({
el : "#root",
data:{
name:"尚硅谷"
},
methods:showInfo(e){
console.log(e.target.value)
},
})
</script>
1.Vue中常用的按赞别名：
回车 =>enter
删除=>delete（捕获“删除”和“退格”键)
退出=>esc
空格=>space
换行=>tab
上=>up
下=>down
左=>left
右=> right
2.Vue未提供别名的按健，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
caps-lock 大小写键别名
3.系统修饰健(用法特殊): ctrl、alt、shift、meta(win)
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键。事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具休的按键(不推荐)
5.Vue.config.keyCodes.自定义健名=健码,可以去定制按健别名/*
修饰符是可以连续使用的(链式调用)
- @click.prevent.top
- @keydown.alt.y / y 与 alt 一起按下 /
*/
10.计算属性
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
// 模板中可以写一些简单的语句 但是不能写 Vm中没有的！
<h2>欢迎来到{{name = !name}}学习</h2>
<input type="text" placeholder="按下回车提示输入"@keyup.enter="showInfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue在启动时生成生产提示
new Vue({
el : "#root",
data:{
// firstname 叫属性
// "尚硅谷" 叫属性值
firstname:"尚硅谷",
lastname:"snowman",
},
methods:{
get(){
// method中的方式不会缓存 会被多次调用
}
}
// computed的属性叫做计算属性
computed:{
// 输入 {{fullname}} 自动调用fullname get函数
fullname:{
// fullname 被读取调用get
get(){
// 此处的 this 被 Vue 配置为 vm
// get 什么时候调用?
// 1.初次读取fullname时 2.所依赖的数据改变时
return this.firstname + this.lastname;
// fullname 被修改时 调用set
set(value){
const arr = value.split('-');
this.firstname = arr[0];
this.lastname = arr[1];
}
/*
* 1.定义:要用的属性不有在,要通过已有属性计算得来。
* 2.原理:底层什助了objcet.defineproperty方法捉供的getter和setter.
* 3.get函数什么时候执行?
(1).初次读取时会执行一次.
(2).当依赖的数据发生改变时会被再次调用。
* 4.优势:与methods实现和比,内部有级存机制(复用）。效率更高。调试方便
* 5,备注:
1.计算届性最终会出现在vm上,直接读取使用即可..
2.如果计算属性要被修返，那必须写set函数夫响应修改，fset中要引起计算时依赖的数据发牛
*/
}
// 简写方式 确定只读不改
fullname(){
return "小猪佩奇";
}
}
}
})
</script>11.监视属性
Vue ({
// 监视在 vm 中的值是否发生变化 变化时 作何处理
watch:{
isHot:{
// 初始化时调用一次handler
immediate:true,
// isHot发生变化 传参 newValue为新的值 oldValue 为旧的值
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
})
// 第二种写法 添加到vm实例中
vm.$watch('isHot',{
immediate:true,
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
})12.深度监视
// Vue可以检测多层级的监视 watch不检测
/*
* (1).vue中的watch默认不监测对象内部值的改变(一层）。
* (2).配置deep:true可以监测对象内部值改变(多层）。
* 备注:
* (1).vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以!
* (2).使用watch时根据数据的具体结构,决定是否采用深度监视。
*/
Vue ({
data:{
number:{
a:500,
b:600,
},
name:'逯少',
}
// 监视在 vm 中的值是否发生变化 变化时 作何处理
watch:{
number:{
// 开启深度监视 不开启的话number的成员不会被检测
deep:true,
// 初始化时调用一次handler
immediate:true,
// number发生变化 传参 newValue为新的值 oldValue 为旧的值
handler(newValue,oldValue){
console.log(newValue,oldValue);
}
}
},
// watch 简写 前提: 不需要 deep immediate
watch:{
name(){
console.log("name被改变了");
}
}
})
// $符简写
vm.$watch('isHot',fuction(){
console.log("isHot被改变了");
})13.watch与computed对比
// computed更容易写
// 但是computed无法进行异步操作
// computed 需要返回值 异步会出错
// watch中的异步操作
handler(){
setTimeout(()=>{
console.log("1s passing number改变了");
},1000)
}
/*
* computed和lwatch之间的区别:
* 1.computed能完成的功能。 watch都可以完成..
* 2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步糅作。
* 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
* 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数。这样this的指向才是vm或组件实例对象。
*/
14.修改/绑定 class
Vue 会解析数组/对象 --> Js表达式
<!-- 需要的 class 是动态的 -->
<div class="basic" :class="yourclass"></div><br/><br/>
<!--绑定class样式--数组写法，适用丁:要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="list_arr"></div>
<!--绑定class样式对象写法。适用于:要绑定的样式个数确定、名宁也确定但要动态决定用不川-->
<div class="basic" :class="classObj"></div>
<!-- Style行内样式 传入Style对象 或者 数组内包含Style对象-->
<div class="basic" :style="styleObj"></div>
---> 经过Vue解析之后会变成
<div class="basic normal"></div><br/><br/>
<div class="basic class1 class2 class3" :class="list_arr"></div>
<div class="basic class1 class3"></div>
<div class="basic" style="color:red;fontSize:10px;backgroundColir:grzy;"></div>
<script>
new Vue({
el:'#id',
data:{
yourclass:'normal',
list_arr:['class1','class2','class3'],
classObj:{
class1:true,
class2:false,
class3:true,
}
// 此处的样式必须为 css 中有的样式 font-size --> fontSize 多单词拆散大小写拼接
styleObj:{
color:red,
fontSize:10px,
backgroundColir:grzy,
}
}
})
</script>15.条件渲染
<!-- v-show 与 v-if show控制display属性 if直接会删除/保留该元素 -->
“” 中填写 js 表达式
<div v-show="false">我的display属性为none</div>
<div v-show="true">我的display属性为默认</div>
<!-- 与js语法中if else if else 的用法一致 -->
<div v-if="false">我不会在DOM中出现</div>
<div v-else-if="false">我不会在DOM中出现</div>
<div v-else="false">我不会在DOM中出现</div>
<div v-if="true">我会在DOM中出现</div>
需要整体隐藏的时候 使用 template不会影响结构
div也可以 注意css
template 只能与 v-if 配合 v-show 会失效
<template v-if="表达式">
<h1>h1</h1>
<h1>h2</h1>
</template>16.列表渲染 循环
<div>
<ul>
<!-- 每个li标签需要有其单独唯一的标识 -->
<li v-for="p in persons" :key="p.id">{{p.id}}-{{p.name}}</li>
<!-- p为persons中的元素 index为其对应的下标 index写key比较方便 -->
<li v-for="(p,index) in persons" :key="index">{{p.id}}-{{p.name}}</li>
<!-- v-for 可以遍历 数组,对象,字符串 -->
<!-- 遍历对象 -->
<li v-for="(value,key) in Obj" :key="key">{{key}}-{{value}}</li>
</ul>
</div>
<script>
new Vue({
el:'#id',
data:{
persons:[
{id:"001", name:"001"},
{id:"002", name:"002"},
{id:"003", name:"003"},
]
Obj:{
name:"王二",
adress:"二仙桥",
}
}
})
</script>
<!--
v-for指令:
1.用于展示列表数据
2.语法:v-for="(item,index) in xxx" : key="yyy"
3.可逅历:数组、对象、字符串（用的很少)、指定次致（用的很少)
-->17.循环 key详解
<!-- 虚拟Dom 对比算法 ！！！ 对比后转化为真实 Dom
key 如果用 index进行绑定会出问题 -->
<!-- 一定要使用唯一的 key 可以使用数据库中的主键 -->
<!--
面试题: react、 vue中的key有什么作用?（key的内部原理)
1，虚拟DON中'key的作用:
key是虚拟DOA对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DO随后Vue进行【新虚抵DOM】 与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DO相同的key:
若虚拟DOM中内容没变,百接使用之前的真实DOM
若虚拟DOM中内容变了，则生成新的真实DOM。随后替换掉页面中之前的真实DOM
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM。随后渲染到到页面。
3.用index作为key 可能会引发的问题:
1.若对数据进行:逆序添加、逆序剧除等破环顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题,但效率低。
2．如果结构中还包含输入类的DOM:
会产生错误DOM更新==>界面有问题
4．开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key，I比如id、于机号、身份证号、学号等唯一伯。
2.如果不存在对数据的逆序添加、逆序朋除等破坏顺序操作，仅用于渲染列表用于展示使用index作为key是没有问题的。
-->18.列表过滤 (搜索)
<input v-model="keyWord" placeholder="请输入姓名">
<ul>
<li v-for="p in filterPersons" :key="p.id">{{p.id}}-{{p.name}}</li>
<button @click="sortType = 1">id降序</button>
<button @click="sortType = 0">原排序</button>
</ul>
<script>
new Vue({
el:'#id',
data:{
sortType:0,
keyWord:"",
persons:[
{id:"001", name:"001"},
{id:"002", name:"002"},
{id:"003", name:"003"},
{id:"004", name:"004"},
],
filterPersons:[],
},
// 使用watch 实现搜索方法
watch:{
keyWords:{
immediate:true,
handler(val){
this.filterPersons = this.persons.filter((e)=>{
return p.name.indexOf(bal) !== -1;
})
}
}
},
// 计算属性实现
computed:{
filterPersons:{
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1;
})
}
}
// 实现 分需求 排序功能
computed:{
filterPersons:{
const list = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1;
})
if(this.sortType){
list.sort((p1.age,p2.age)=>{
return this.sortType === 1 ? p1.age-p2.age : p2.age-p1.age;
}
return list;
}
}
}
})
</script>
<!--
"abc".indexOf('') >>> 0 //空字符串返回值为 0
-->3.Vue检测数据的原理
19.Vue检测数据改变的原理
<!-- 更改数据 -->
<script>
// Vue无法检测
vm.persons[0] = {id:"001", name:"马老师", age:50};
// Vue可以检测
vm.persons[0].name = "马老师";
vm.persons[0].age = 50;
</script>
<script>
// data --> 加工后 vm 对象中生成 _data 包含data中的属性 并创建对应的getter setter方法
get set 方法 在调用 对象时会自动被更改
// 直接 object.defineProperty 对应的对象 调用get set 会陷入死循环
// 创建检测实例对象 进行数据代理
data = {
name:"王二",
age:18,
}
const obs = new Observer(data)
console.log(obs)
function observer(obj){
//汇总对象中所有的属性形成一个数组
const keys = object.keys(obj)
//遍历
keys.forEach((k)=>{
object.defineProperty(this,k,{
get(){
return obj[k]
},
set(val){
obj[k] = val
}
</script>
!!!!!! 检测原理就是使用setter 考虑非常周到！递归数组都能检测！！！20.vue.set 添加响应式属性
// _data 与 data 是数据代理
// Vue 方法
Vue.set(target,key,value)
Vue.set(vm.student,"name","王二")
Vue.set(vm._data.student,"name","王二")
// vm 方法
vm.$set(vm.student,"name","王二")
vm.$set(vm._data.student,"name","王二")
// 局限性 set 不能 将 vm 作为 target21.Vue检测数组
// 不能直接更改数组中的数值 vue 无法检测
// Vue 可以检测程序员使用数组方法
// 以下均为可以修改数组的方法
/* push/pop 末尾 添加/删除 元素
* unshift/shift 开头 添加/删除 元素
* splice 替换元素
* sort 排序
* reverse 反转
*/
// 两个push不一样 vue 对push进行了覆写 原push功能 + 响应式的更改
vm.data.student.hobby.push === Array.prototype.push
>>> false 总结
/*
Vue监视数据的原理:
1. vue会监视data中所有层次的数据。
2．如何监测对象中的裁据
通过setter实现监视,且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如T给后添加的属性做响应式，请使用如下API:
vue.set(target.propertyName/index.value)
vm.$set(target. propertyName/index. value)
3。如何监测数组中的数据
通过包裹数组更新元素的方法实现,本质就是做了两件事:
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板,进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法:
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set()或vm.$set()
特别注意: Vue.set()和 vm.$set()不能给vm 或 vm的根数据对象添加属性 !!
*/4.收集表单数据
/*
若:<input type="text"/>，则v-model收集的是value值。用户输入的就是value值。
若:<input type="radio" />，则v-model收集的是value值，且要给标签配置value值。
若:<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or未勾选，是布尔值)
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
*/5.过滤器
day.js 库可以格式化时间
在BootCDN可以查询到开源的所有库
过滤器 可以在 v-bind 与 插值语法中使用
<!-- 语法: 本质是一种函数 可以连续链式使用-->
<h3>现在是: {{time | timeFormater() | otherFilters()}}</h3>
<script>
// 全局过滤器 任意 Vue 实例对象中均可使用
Vue.filter("mySlice",fuction(){
return "过滤后的内容"
})
var vm = new Vue({
filters:{
timeFormater(value){
return "value为传入time的值 返回值作为 表达式展示的值"
}
}
})
</script>6.Vue指令汇总
<!--
v-bind :单向绑定解析表达式,可简写为:XXX
v-model :双向数据绑定
v-for :遍历数组/对象/字符串
v-on: 绑定事件监听,可简写为@
v-if:条件渲染（动态控制节点是否存存在)
v-else:条件渲染《动态控制节点是否存存在)
v-show:条件渲染(动态控制节点是否展示)
v-text: 替换整个 Value
v-html: 可以渲染html语法 <h1></h1>
// v-html 具有安全性问题 xss注入
v-cloak: 加入该属性与css display:none Vue接管时会删除该属性
v-once: 让某元素只渲染一次
v-pre: 阻止Vue解析doucment
-->
<!--
v-html指令:
1.作用:向指定节点中渲染包含html结构的内容
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会
(2).v-html可以识别html结构。
3.严重注意: v-html有安全性问题!!!!
(1).在网站上动态渲染任意HTAL是非常危险的,容易导致XSS攻击.
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!
-->
<!--
v-cloak指令（没有值):
1.本质是一个特殊属性，Vue实例创建完中并接管容器后。会删掉v-cloak属性.
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
-->
<style>
[v-cloak]{
display:none;
}
</style>
<!--
v-once指令:
1.v-once所在节点在初次动态渲染后,就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
-->
<!--
v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
-->7.Vue自定义指令
7.1函数式
n放大十倍之后的值为:
<span v-big="n"> </span>
<input v-bind:value="n">
<script>
new Vue({
directives:{
// element传入对应元素对象
// binding 与 big中的表达式绑定 "n"
big(element,binding){
element.innerText = binding.value * 10;
// 绑定时会自动调用 但是 input 还没有放入doucment fouce不起作用
element.fouce();
}
// big函数何时会被调用?
// 1.指令与元素成功绑定时(一开始)
// 2.指令所在的模板被重新解析时
}
})
</script>7.2对象式
<input v-fbind:value="n">
<script>
new Vue({
directives:{
// 此对象中所有的 this 均指向 window
fbind:{
// 绑定时被调用
bind(){
},
// 元素被插入时被调用
inserted(){
},
// 模板被重新解析时被调用
update(){
},
}
}
})
</script>7.3小总结
注意: 命名时尽量不要用大写字母 Vue 会将大写字母 解析成小写字母
v-set-member ---> `set-member`(){}
<script>
// 全局Vue directives配置
Vue.directive('big',{
...
})
</script>8.生命周期函数
8.1 mounted介绍
// 动态绑定数据需要写成对象的形式
<h2 style="{opacity: opacity}"> 我会变化透明度 </h2>
// 属性值与键名重复时可简写
<h2 style="{opacity}"></h2>
<script>
new Vue({
data:{
opacity:1,
},
methos:{
change(){
// 非 Vue 管理的函数 使用箭头函数 this 指向 Vue(vm)
setInterval(()=>{
this.opacity -= 0.01;
if(this.opacity <= 0) this.opacity = 1;
// 透明变化的字体
},16)
}
},
// mounted 挂载
// Vue完成模板的解析并且把初始的真实Dom放入元素页面后(挂在完毕后) 执行mounted
// 写入此处执行一次 mounted 函数 进行计时器函数书写
// 第一次放入时执行 ！！！ 之后的叫更新 重新解析 不执行 mounted
mounted(){
setInterval(()=>{
this.opacity -= 0.01;
if(this.opacity <= 0) this.opacity = 1;
// 透明变化的字体
},16)
}
// 生命周期函数有多种 这里只介绍了 mounted
})
</script>8.2挂载流程
<script>
new Vue({
tmplate:`在此处可以写 HTML 语法 替换模板`
// 初始化:生命周期、事件，但数据代理还未开始。
// 此时:无法通过vm访问到data中的数据. methods中的方法。
beforeCreate(){}
// 初始化:数据监测、数据代理。
// 此时:可以通过vm访问到data中的数据、 methods中配置的方法。
// 还未进行模板解析 生成虚拟DOM
created(){}
// 1.页面呈现的是未经Vue编译的DOM结构。
// 2.所有对DOM的操作，最终都不奏效。 因为在最后会使用 虚拟DOM 替换全部真实DOM
// 进行模板解析之后 虚拟DOM已生成
beforeMount(){}
// 将虚拟DOM转为真实DOM插入页面
// 1.页面中呈现的是经过Vue编译的DOM.
// 2.对DOM的操作均有效(尽可能避免)。
// 至此初始化过程结束，一般在此进行:
// 开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
mounted(){}
})
</script>8.3更新流程:
new Vue({
// 此时:数据是新的，但页面是旧的，即:页面尚未和数据保持同步。
beforeUpdate(){}
// 虚拟DOM 之间的对比 修改虚拟DOM
// 此时:数据是新的，页面也是新的，即:页面和数据保持同步。
updated(){}
})8.4销毁流程
// 使用 $destroy() 方法 完全销毁vm实例 不会进行管理 DOM页面了
// vm.$destroy()
// 原生DOM事件不会被销毁 会销毁自定义事件
new Vue({
// 此时: vm中所有的: data、methods、指令等等，都处于可用状态，马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息.解绑自定义事件等收尾操作
beforeDestory(){}
// vm 已销毁
destoryed(){}
})
9.组件化 !!!
定义：现实应用中局部功能代码和资源的集合
非单文件组件∶
一个文件中包含有n个组件。
单文件组件∶
一个文件中只包含有1个组件。
1.非单文件组件
1.非单文件组件
// 1.创建组件
const school = Vue.extend({
// 不需要写 el 配置项 只可配置在 vm 实例中
// el:"",
// data 必须写成函数式
// 对象式引用的内存中同一地址 会出错(Vue报错阻止)
data:fouction(){
return {...}
}
template:`
HTML 内容
`
})
// 2.注册组件
new Vue({
el:"#root",
// 注册组件 (局部注册)
components:{
xuexiao:school,
// 以下可以简写
school:school,
// 简写形式
school
}
})
// 全局注册组件
// Vue.component('hello',hello)
// 3.在HTML页面中使用组件标签
// 在 components 中配置的键值
/*
<div id="root">
<xuexiao></xuexiao>
</div>
*/注意点
// Vue推荐组件命名
/*
单个单词: 1.school (纯小写) 2.School(首字母大写)
多个单词: 1.my-school (用-连接) 2.MySchool(每个单词首字母均大写 需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTAL中已有的元素名称，例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
Vue.extend({
name:"显示的名字",
})
2.关于组件标签:
第一种写法:<school></school>
第二种写法:<school/>
备注:不用使用脚手架时,<schoo1/>会导致后续组件不能渲染。
3.一个简写方式:
const school = Vue.extend(options）可简写为: const school = options
// 如果注册时传入的是对象 Vue 自动调用Vue.extend
*/2.组件的嵌套
// 可以在组件中书写组件配置项
const school = Vue.extends({
template:"...",
compoent:{
scool,
"..."
}
})
const student = Vue.extends({
template:"...",
components:{
scool,
"..."
}
})3. Vue Compoent构造函数
vm 实例中 包含 $children 为数组 数组中包含着 VueComponent 对象
VueComponent 中 的成员变量以及方法与 vm 一致
组件: 不可使用 el data 只能使用函数式
/*
关于VueComponent:
1.school组件木质是一个名为vueComponent的构造函数，且不是和序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<schoolx</school>.Vue解析时会帮我们创建school组件的实例对象,Nvue帮我们执行的:new VueComponent(options)-
3.特别注意:每次调用vue.extend，返回的都是一个全新的VueComponent! !!!
4.关于this指向:
(1).组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
(2).new Vue配置中:
data雨数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】.
5.VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象）.
Vue的实例对象,以后简称vm.
*/4.重要的内置关系
/*
1.一个重要的内置关系:VueComponent.prototype._proto_ == Vue.prototype
2.为什么要有这个关系:让组件实例对象(vc）可以访问到Vue原型上的属性、方法。
*/Vue 与 VueComponent 的关系
2.单文件组件
{webpack, 脚手架} 编译使用 .vue后缀
App结构
安装 VSCODE vue 插件 后 输入 <v tab键就可自动补全
main.js
