vue基础

第 1 章：Vue 核心

Vue 简介

前端简介

1. 前端三要素

• HTML (结构) :超文本标记语言(Hyper Text Markup Language) ，决定网页的结构和内容
• CSS (表现) :层叠样式表(Cascading Style sheets) ，设定网页的表现样式
• JavaScript (行为) :是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行,用于控制网页的行为
• CSS预处理：用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。
• 常用的CSS预处理器有哪些\n\nSASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。\nLESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。

2. JavaScript框架

• jQuery: 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6、7、8;
• Angular: Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发;对后台程序员友好，对前端程序员不太友好;最大的缺点是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是两个东西;截止发表博客时已推出了Angular6)
• React: Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率;缺点是使用复杂，因为需要额外学习一门[JSX] 语言;
• Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;
• Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

前端三大框架：Angular、React、Vue

Vue介绍与描述

Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合

1. 英文官网: https://vuejs.org/
2. 中文官网: https://cn.vuejs.org/
3. 动态构建用户界面的渐进式 JavaScript 框架
4. 作者: 尤雨溪

Vue 的特点

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
   1. 它本身只关注UI, 也可以引入其它第三方库开发项目

与其它 JS 框架的关联

1. 借鉴Angular 的模板和数据绑定技术
2. 借鉴React 的组件化和虚拟DOM 技术

Vue 周边库

Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据

网络通信 ： axios

页面跳转 ： vue-router

状态管理：vuex

Vue-UI : ICE , Element UI

1. vue-cli: vue 脚手架
2. vue-resource
3. axios
4. vue-router: 路由
5. vuex: 状态管理
6. element-ui: 基于vue 的UI 组件库(PC 端)

……

初识 Vue

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oeaynl94-1676686957303)(media/29f96672907e954dd83ae5fc1b8411f7.jpeg)]

1. 模板语法

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-io8mmfnu-1676686957305)(media/dda9dd54d3c401d913c3aea21d886982.jpeg)]

1. 模板的理解

html 中包含了一些JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）
   1. 指令（以v-开头）

插值语法

1. 功能: 用于解析标签体内容
2. 语法: {{xxx}} ，xxxx 会作为js 表达式解析

指令语法

1. 功能: 解析标签属性、解析标签体内容、绑定事件
2. 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为js 表达式被解析
3. 说明：Vue 中有有很多的指令，此处只是用v-bind 举个例子
   1. 列；v-bind v-if v-else v-show v-model v-for v-on

数据绑定v-model v-bind

Vue中有2种数据绑定的方式：

1.单向绑定(v-bind)：数据只能从data流向页面。

2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单类元素上（如：input、select等）

2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZprpy8u-1676686957306)(media/608b6800e0af8e18e58e4feaddf8cda8.jpeg)]效果

单向数据绑定

1. 语法：v-bind:href =“xxx” 或简写为 :href
   1. 特点：数据只能从data 流向页面

<div id=“app”>

<span v-bind:title=“message”>鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

</div>

</body>

<!–导入js–>

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js”></script>

<script>

var vm = new Vue({

el: “#app”,

data: {

message: “hello,vue”

}

})

</script>

双向数据绑定

1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
   1. 特点：数据不仅能从data 流向页面，还能从页面流向 data

<!–view层 模板–>

<div id=“app”>

下拉框：

<select v-model=“selected”>

<option value=“” disabled>-请选择-</option>

<option>A</option>

<option>B</option>

<option>C</option>

</select>

<p>value:{{selected}}</p>

</div>

</body>

<!–导入js–>

<script src=“https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js”></script>

<script>

var vm = new Vue({

el: “#app”,

data: {

selected: “”

}

})

</script>

MVVM 模型

1. M：模型(Model) ：对应data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue 实例对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tl3uTDim-1676686957307)(media/d823439b2b1ff12cd1fa8e4cac29c1c6.jpeg)]

• Model : 模型层，在这里表示JavaScript对象

• View : 视图层,在这里表示DOM (HTML操作的元素)

• ViewModel : 连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者

• ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新

• ViewModel 能够监听到视图的变化，并能够通知数据发生改变

  至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定

1.5.1 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处：

• 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
  View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
• 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
• 可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

事件处理

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DsiYTscI-1676686957308)(media/65f946e4c50fcc3c7017e6ed3a0bf7c3.jpeg)]

绑定监听v-on

1. v-on:xxx=“fun”
2. @xxx=“fun”
3. @xxx=“fun(参数)”
4. 默认事件形参: event
5. 隐含属性对象: $event

事件修饰符

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

Vue中的事件修饰符：

1.prevent：阻止默认事件（常用）；

2.stop：阻止事件冒泡（常用）；

3.once：事件只触发一次（常用）；

4.capture：使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件；

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

number：输入字符串转为有效的数字

.lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

按键修饰符

1.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件被触发。

(2).配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性与监视

效果

<body>

<!–

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

–>

<!-- 准备好一个容器–>

<div id=“root”>

姓：<input type=“text” v-model=“firstName”> <br/><br/>

名：<input type=“text” v-model=“lastName”> <br/><br/>

测试：<input type=“text” v-model=“x”> <br/><br/>

全名：<span>{{fullName}}</span> <br/><br/>

<!-- 全名：<span>{{fullName}}</span> <br/><br/>

全名：<span>{{fullName}}</span> <br/><br/>

全名：<span>{{fullName}}</span> -->

</div>

</body>

<script type=“text/javascript”>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({

el:‘#root’,

data:{

firstName:‘张’,

lastName:‘三’,

x:‘你好’

},

methods: {

demo(){

}

},

computed:{

fullName:{

//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值

//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。

get(){

console.log(‘get被调用了’)

// console.log(this) //此处的this是vm

return this.firstName + ‘-’ + this.lastName

},

//set什么时候调用? 当fullName被修改时。

set(value){

console.log(‘set’,value)

const arr = value.split(‘-’)

this.firstName = arr[0]

this.lastName = arr[1]

}

}

}

})

</script>

//简写 在不需要set

fullName(){

console.log(‘get被调用了’)

return this.firstName + ‘-’ + this.lastName

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G1sRl5SA-1676686957309)(media/2ff655df8fb9aa66101e9b10cf72fa97.jpeg)]

1. 计算属性-computed
2. 要显示的数据不存在，要通过计算得来。
   1. 在computed 对象中定义计算属性。
3. 在页面中使用{{方法名}}来显示计算的结果。

监视属性-watch

<body>

<!–

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1.new Vue时传入watch配置

(2).通过vm.$watch监视

–>)

<!-- 准备好一个容器–>

<div id=“root”>

<h2>今天天气很{{info}}</h2>

<button @click=“changeWeather”>切换天气</button>

</div>

</body>

<script type=“text/javascript”>

Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

const vm = new Vue({

el:‘#root’,

data:{

isHot:true,

},

computed:{

info(){

return this.isHot ? ‘炎热’ : ‘凉爽’

}

},

methods: {

changeWeather(){

this.isHot = !this.isHot

}

},

/* watch:{

isHot:{

immediate:true, //初始化时让handler调用一下

//handler什么时候调用？当isHot发生改变时。

handler(newValue,oldValue){

console.log(‘isHot被修改了’,newValue,oldValue)

}

}

} */

})

vm.$watch(‘isHot’,{

immediate:true, //初始化时让handler调用一下

//handler什么时候调用？当isHot发生改变时。

handler(newValue,oldValue){

console.log(‘isHot被修改了’,newValue,oldValue)

}

})

</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K4KW2bN7-1676686957310)(media/390e7d09a983a35090a2f1d745b86df0.jpeg)]

1. 通过通过vm 对象的$watch()或watch 配置来监视指定的属性
2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算
   1. immediate:true, //初始化时让handler调用一下
      1. deep:true可以监测对象内部值改变（多层）。

//简写

/* isHot(newValue,oldValue){

console.log(‘isHot被修改了’,newValue,oldValue,this)

} */

class 与 style 绑定

理解

1. 在应用界面中, 某个(些)元素的样式是变化的
2. class/style 绑定就是专门用来实现动态样式效果的技术

class 绑定

1. :class=‘xxx’
2. 表达式是字符串: ‘classA’
3. 表达式是对象: {classA:isA, classB: isB}
4. 表达式是数组: [‘classA’, ‘classB’]

style 绑定

1. :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
2. 其中activeColor/fontSize 是data 属性

条件渲染

条件渲染指令

1. v-if 与v-else
2. v-show

比较v-if 与v-show

1. 如果需要频繁切换 v-show 较好
2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)

条件渲染：

1.v-if

写法：

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).v-else=“表达式”

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

列表渲染

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z7cafVmd-1676686957312)(media/70419bc66fdd424f5e9ccd1f5300a54a.jpeg)]

<body>

<!-- 准备好一个容器–>

<div id=“root”>

<h2>人员列表</h2>

<input type=“text” placeholder=“请输入名字” v-model=“keyWord”>

<button @click=“sortType = 2”>年龄升序</button>

<button @click=“sortType = 1”>年龄降序</button>

<button @click=“sortType = 0”>原顺序</button>

<ul>

<li v-for=“(p,index) of filPerons” :key=“p.id”>

{{p.name}}-{{p.age}}-{{p.sex}}

<input type=“text”>

</li>

</ul>

</div>

<script type=“text/javascript”>

Vue.config.productionTip = false

new Vue({

el:‘#root’,

data:{

keyWord:‘’,

sortType:0, //0原顺序 1降序 2升序

persons:[

{id:‘001’,name:‘马冬梅’,age:30,sex:‘女’},

{id:‘002’,name:‘周冬雨’,age:31,sex:‘女’},

{id:‘003’,name:‘周杰伦’,age:18,sex:‘男’},

{id:‘004’,name:‘温兆伦’,age:19,sex:‘男’}

]

},

computed:{

filPerons(){

const arr = this.persons.filter(§=>{

return p.name.indexOf(this.keyWord) !== -1

})

//判断一下是否需要排序

if(this.sortType){

arr.sort((p1,p2)=>{

return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age

})

}

return arr

}

}

})

</script>

列表显示指令

遍历数组: v-for / index遍历对象: v-for / key

面试题：react、vue中的key有什么作用？（key的内部原理）

1. 虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

3. 用index作为key可能会引发的问题：

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

2. 如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

4. 开发中如何选择key?:

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

使用index作为key是没有问题的。

es6对数组操作

.在Vue修改数组中的某个元素一定要用如下方法：

1. 使用这些API:

push()方法可向数组的末尾添加一个或多个元素、

pop()方法数组最后一位元素删除并返回数组的最后一个元素、

shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。、

unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。、

splice(index,howmany,item, …, ) 方法向/从数组中添加/删除项目，然后返回被删除的项目
第一个参数：表示从哪个索引位置（index）添加/删除元素
第二个参数：要删除的项目数量。如果设置为 0，则不会删除项目。
第三个参数：可选。向数组添加的新项目。、

sort()、默认排序是 _score 降序

reverse() 方法颠倒数组中元素的顺序。

indexOf（）

2.Vue.set() 或 vm.$set()

收集表单数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVoNshXp-1676686957313)(media/757873f63e668cb9f12781098cb94f5b.jpeg)]

1. 过滤器

<!–

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据, 是产生新的对应的数据

–>

<!-- 准备好一个容器–>

<div id=“root”>

<h2>显示格式化后的时间</h2>

<!-- 计算属性实现 -->

<h3>现在是：{{fmtTime}}</h3>

<!-- methods实现 -->

<h3>现在是：{{getFmtTime()}}</h3>

<!-- 过滤器实现 -->

<h3>现在是：{{time | timeFormater}}</h3>

<!-- 过滤器实现（传参） -->

<h3>现在是：{{time | timeFormater(‘YYYY_MM_DD’) | mySlice}}</h3>

<h3 :x=“msg | mySlice”>尚硅谷</h3>

</div>

<div id=“root2”>

<h2>{{msg | mySlice}}</h2>

</div>

</body>

<script type=“text/javascript”>

Vue.config.productionTip = false

//全局过滤器

Vue.filter(‘mySlice’,function(value){

return value.slice(0,4)

})

new Vue({

el:‘#root’,

data:{

time:1621561377603, //时间戳

msg:‘你好，尚硅谷’

},

computed: {

fmtTime(){

return dayjs(this.time).format(‘YYYY年MM月DD日 HH:mm:ss’)

}

},

methods: {

getFmtTime(){

return dayjs(this.time).format(‘YYYY年MM月DD日 HH:mm:ss’)

}

},

//局部过滤器

filters:{

timeFormater(value,str=‘YYYY年MM月DD日 HH:mm:ss’){

// console.log(‘@’,value)

return dayjs(value).format(str)

}

}

})

new Vue({

el:‘#root2’,

data:{

msg:‘hello,atguigu!’

}

})

</script>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZiQN3Sd8-1676686957314)(media/12652520dada59ae450c12b5a571834a.jpeg)]局部过滤器

filters:{

timeFormater(value,str=‘YYYY年MM月DD日 HH:mm:ss’){

// console.log(‘@’,value)

return dayjs(value).format(str)

}

全局过滤器

Vue.filter(‘mySlice’,function(value){

return value.slice(0,4)

})

理解过滤器

1. 功能: 对要显示的数据进行特定格式化后再显示
2. 注意: 并没有改变原本的数据, 是产生新的对应的数据

内置指令与自定义指令

常用内置指令

1. v-text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if : 如果为true, 当前标签才会输出到页面
4. v-else: 如果为false, 当前标签才会输出到页面
5. v-show : 通过控制display 样式来控制显示/隐藏
6. v-for : 遍历数组/对象
7. v-on : 绑定事件监听, 一般简写为@
8. v-bind : 绑定解析表达式, 可以省略v-bind
9. v-model : 双向数据绑定
10. v-cloak : 防止闪现, 与css 配合: [v-cloak] { display: none }

自定义指令

注册全局指令

Vue.directive(‘my-directive’, function(el, binding){ el.innerHTML = binding.value.toupperCase()

})

注册局部指令

directives : {

‘my-directive’ : { bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

二、配置对象中常用的3个回调：

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如

<div id=“root”>

<h2>{{name}}</h2>

<h2>当前的n值是：<span v-text=“n”></span> </h2>

<!-- <h2>放大10倍后的n值是：<span v-big-number=“n”></span> </h2> -->

<h2>放大10倍后的n值是：<span v-big=“n”></span> </h2>

<button @click=“n++”>点我n+1</button>

<hr/>

<input type=“text” v-fbind:value=“n”>

</div>

</body>

<script type=“text/javascript”>

Vue.config.productionTip = false

//定义全局指令

/* Vue.directive(‘fbind’,{

//指令与元素成功绑定时（一上来）

bind(element,binding){

element.value = binding.value

},

//指令所在元素被插入页面时

inserted(element,binding){

element.focus()

},

//指令所在的模板被重新解析时

update(element,binding){

element.value = binding.value

}

}) */

new Vue({

el:‘#root’,

data:{

name:‘尚硅谷’,

n:1

},

directives:{

//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。

/* ‘big-number’(element,binding){

// console.log(‘big’)

element.innerText = binding.value * 10

}, */

big(element,binding){

console.log(‘big’,this) //注意此处的this是window

// console.log(‘big’)

element.innerText = binding.value * 10

},

fbind:{

//指令与元素成功绑定时（一上来）

bind(element,binding){

element.value = binding.value

},

//指令所在元素被插入页面时

inserted(element,binding){

element.focus()

},

//指令所在的模板被重新解析时

update(element,binding){

element.value = binding.value

}

}

}

})

</script>

Vue 实例生命周期

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gan4JZFF-1676686957316)(media/01a0173fce9c34c5c08a6448237074fa.jpeg)]

生命周期流程图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m7WsbhbC-1676686957317)(media/6eba8c66dc16b2a1ec024aad49e20600.png)]

vue 生命周期分析

1. 初始化显示

• beforeCreate()
  • created()
  • beforeMount()
  • mounted()

1. 更新状态: this.xxx = value

• beforeUpdate()
  • updated()

1. 销毁vue 实例: vm.$destory()

• beforeDestory()
  • destoryed()

常用的生命周期方法

1. mounted(): 发送ajax 请求, 启动定时器等异步任务
2. beforeDestory(): 做收尾工作, 如: 清除定时器

第 2 章：Vue 组件化编程

模块与组件、模块化与组件化

模块

1. 理解: 向外提供特定功能的 js 程序, 一般就是一个js 文件
2. 为什么: js 文件很多很复杂
3. 作用: 复用js, 简化js 的编写, 提高js 运行效率

组件

1. 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
2. 为什么: 一个界面的功能很复杂
3. 作用: 复用编码, 简化项目编码, 提高运行效率

模块化

当应用中的js 都以模块来编写的, 那这个应用就是一个模块化的应用。

组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

非单文件组件

1. 模板编写没有提示
2. 没有构建过程, 无法将ES6 转换成ES5
3. 不支持组件的CSS
4. 真正开发中几乎不用

单文件组件

一个.vue 文件的组成(3 个部分)

模板页面

<template>页面模板

</template>

JS 模块对象

<script> export default {

data() {return {}}, methods: {},

computed: {}, components: {}

}

</script>

样式

<style>样式定义

</style>

基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

1.一个重要的内置关系：VueComponent.prototype._proto_ === Vue.prototype

2.3.3数据代理

回顾Object.defineproperty方法

<script type=“text/javascript” >

let number = 18

let person = {

name:‘张三’,

sex:‘男’,

}

Object.defineProperty(person,‘age’,{

// value:18,

// enumerable:true, //控制属性是否可以枚举，默认值是false

// writable:true, //控制属性是否可以被修改，默认值是false

// configurable:true //控制属性是否可以被删除，默认值是false

//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值

get(){

console.log(‘有人读取age属性了’)

return number

},

//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值

set(value){

console.log(‘有人修改了age属性，且值是’,value)

number = value

}

})

// console.log(Object.keys(person))

console.log(person)

</script>

何为数据代理

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）–>

<script type=“text/javascript” >

let obj = {x:100}

let obj2 = {y:200}

Object.defineProperty(obj2,‘x’,{

get(){

return obj.x

},

set(value){

obj.x = value

}

})

</script>

一个.vue 文件的组成(3 个部分)

模板页面

<template>页面模板

</template>

JS 模块对象

<script> export default {

data() {return {}}, methods: {},

computed: {}, components: {}

}

</script>

样式

<style>样式定义

</style>

基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

1.一个重要的内置关系：VueComponent.prototype._proto_ === Vue.prototype

2.3.3数据代理

回顾Object.defineproperty方法

<script type=“text/javascript” >

let number = 18

let person = {

name:‘张三’,

sex:‘男’,

}

Object.defineProperty(person,‘age’,{

// value:18,

// enumerable:true, //控制属性是否可以枚举，默认值是false

// writable:true, //控制属性是否可以被修改，默认值是false

// configurable:true //控制属性是否可以被删除，默认值是false

//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值

get(){

console.log(‘有人读取age属性了’)

return number

},

//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值

set(value){

console.log(‘有人修改了age属性，且值是’,value)

number = value

}

})

// console.log(Object.keys(person))

console.log(person)

</script>

何为数据代理

<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）–>

<script type=“text/javascript” >

let obj = {x:100}

let obj2 = {y:200}

Object.defineProperty(obj2,‘x’,{

get(){

return obj.x

},

set(value){

obj.x = value

}

})

</script>