第 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:管理)或既有项目整合
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
- 动态构建用户界面的渐进式 JavaScript 框架
- 作者: 尤雨溪
Vue 的特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注UI, 也可以引入其它第三方库开发项目
与其它 JS 框架的关联
- 借鉴Angular 的模板和数据绑定技术
- 借鉴React 的组件化和虚拟DOM 技术
Vue 周边库
Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
HTML + CSS + JS : 视图 : 给用户看,刷新后台给的数据
网络通信 : axios
页面跳转 : vue-router
状态管理:vuex
Vue-UI : ICE , Element UI
- vue-cli: vue 脚手架
- vue-resource
- axios
- vue-router: 路由
- vuex: 状态管理
- element-ui: 基于vue 的UI 组件库(PC 端)
……
初识 Vue
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oeaynl94-1676686957303)(media/29f96672907e954dd83ae5fc1b8411f7.jpeg)]
- 模板语法
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-io8mmfnu-1676686957305)(media/dda9dd54d3c401d913c3aea21d886982.jpeg)]
- 模板的理解
html 中包含了一些JS 语法代码,语法分为两种,分别为:
- 插值语法(双大括号表达式)
- 指令(以v-开头)
插值语法
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ,xxxx 会作为js 表达式解析
指令语法
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例:v-bind:href = ‘xxxx’ ,xxxx 会作为js 表达式被解析
- 说明:Vue 中有有很多的指令,此处只是用v-bind 举个例子
- 列;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)]效果
单向数据绑定
- 语法:v-bind:href =“xxx” 或简写为 :href
- 特点:数据只能从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>
双向数据绑定
- 语法:v-mode:value=“xxx” 或简写为 v-model=“xxx”
- 特点:数据不仅能从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 模型
- M:模型(Model) :对应data 中的数据
- V:视图(View) :模板
- 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
- v-on:xxx=“fun”
- @xxx=“fun”
- @xxx=“fun(参数)”
- 默认事件形参: event
- 隐含属性对象: $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)]
- 计算属性-computed
- 要显示的数据不存在,要通过计算得来。
- 在computed 对象中定义计算属性。
- 在页面中使用{{方法名}}来显示计算的结果。
监视属性-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)]
- 通过通过vm 对象的$watch()或watch 配置来监视指定的属性
- 当属性变化时, 回调函数自动调用, 在函数内部进行计算
- immediate:true, //初始化时让handler调用一下
- deep:true可以监测对象内部值改变(多层)。
- immediate:true, //初始化时让handler调用一下
//简写
/* isHot(newValue,oldValue){
console.log(‘isHot被修改了’,newValue,oldValue,this)
} */
class 与 style 绑定
理解
- 在应用界面中, 某个(些)元素的样式是变化的
- class/style 绑定就是专门用来实现动态样式效果的技术
class 绑定
- :class=‘xxx’
- 表达式是字符串: ‘classA’
- 表达式是对象: {classA:isA, classB: isB}
- 表达式是数组: [‘classA’, ‘classB’]
style 绑定
- :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
- 其中activeColor/fontSize 是data 属性
条件渲染
条件渲染指令
- v-if 与v-else
- v-show
比较v-if 与v-show
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, 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修改数组中的某个元素一定要用如下方法:
- 使用这些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.注册过滤器: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)
})
理解过滤器
- 功能: 对要显示的数据进行特定格式化后再显示
- 注意: 并没有改变原本的数据, 是产生新的对应的数据
内置指令与自定义指令
常用内置指令
- v-text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果为true, 当前标签才会输出到页面
- v-else: 如果为false, 当前标签才会输出到页面
- v-show : 通过控制display 样式来控制显示/隐藏
- v-for : 遍历数组/对象
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 绑定解析表达式, 可以省略v-bind
- v-model : 双向数据绑定
- 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 生命周期分析
- 初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted()
- 更新状态: this.xxx = value
- beforeUpdate()
- updated()
- 销毁vue 实例: vm.$destory()
- beforeDestory()
- destoryed()
常用的生命周期方法
- mounted(): 发送ajax 请求, 启动定时器等异步任务
- beforeDestory(): 做收尾工作, 如: 清除定时器
第 2 章:Vue 组件化编程
模块与组件、模块化与组件化
模块
- 理解: 向外提供特定功能的 js 程序, 一般就是一个js 文件
- 为什么: js 文件很多很复杂
- 作用: 复用js, 简化js 的编写, 提高js 运行效率
组件
- 理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image……)
- 为什么: 一个界面的功能很复杂
- 作用: 复用编码, 简化项目编码, 提高运行效率
模块化
当应用中的js 都以模块来编写的, 那这个应用就是一个模块化的应用。
组件化
当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。
非单文件组件
- 模板编写没有提示
- 没有构建过程, 无法将ES6 转换成ES5
- 不支持组件的CSS
- 真正开发中几乎不用
单文件组件
一个.vue 文件的组成(3 个部分)
模板页面
<template>页面模板
</template>
JS 模块对象
<script> export default {
data() {return {}}, methods: {},
computed: {}, components: {}
}
</script>
样式
<style>样式定义
</style>
基本使用
- 引入组件
- 映射成标签
- 使用组件标签
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.一个重要的内置关系: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>