Vue2 技术栈
- 第 1 章:Vue 核心
- 1.1. Vue 简介
- 1.1.1. 官网
- 1.1.2. 介绍与描述
- 1.1.3. Vue 的特点
- 1.1.4. 与其它 JS 框架的关联
- 1.1.5. Vue 周边库
- 1.2. 初识 Vue
- 1.3. 模板语法
- 1.3.1. 效果
- 1.3.2. 模板的理解
- 1.3.3. 插值语法
- 1.3.4. 指令语法
- 1.4. 数据绑定
- 1.4.1. 效果
- 1.4.2. 单向数据绑定
- 1.4.3. 双向数据绑定
- 1.5. MVVM 模型
- vue的数据代理
- 1.6. 事件处理
- 1.6.1. 效果
- 1.6.2. 绑定监听
- 1.6.3. 事件修饰符
- 1.6.4. 按键修饰符
- 1.7. 计算属性与监视
- 1.7.1. 效果
- 1.7.2. 计算属性-computed
- 1.7.3. 监视属性-watch
- 1.8. class 与 style 绑定
- 1.8.1. 理解
- 1.8.2. class 绑定
- 1.8.3. style 绑定
在一个繁华的都市中,张明怀揣着对后端开发的热爱和憧憬,成功应聘了一家知名的科技公司。他对于即将到来的职场生活充满了期待,希望能够在那里施展自己的才华,实现自己的职业梦想。
然而,就在他入职的第一天,公司为了让他更快地融入团队,安排了一场技术分享会,要求他和其他新入职的同事一起参与。在分享会上,团队领导提到了Vue.js这个重要的前端框架,并询问大家是否熟悉其操作。
张明顿时感到一阵紧张,因为他之前并没有接触过Vue.js。虽然他在HTML、CSS和JavaScript方面有着扎实的基础,但对于Vue.js这个领域却是一片空白。他试图掩饰自己的不安,但内心却充满了忐忑。
分享会结束后,团队领导私下里找到张明,希望他能够在短时间内掌握Vue.js的基本操作,因为公司非常注重前端开发和技术创新。张明虽然答应了,但内心却感到无比的压力。
在接下来的几天里,张明拼命地学习Vue.js的相关知识,但由于缺乏实践经验,他始终无法熟练掌握。每当他试图编写Vue组件或者理解Vue的响应式原理时,总会遇到各种各样的困难。这让他感到非常沮丧和焦虑。
有一天,团队领导突然宣布要进行一次项目评审,并要求每个人都展示他们使用Vue.js开发的部分。张明感到自己的末日就要来临了,因为他知道自己根本无法在规定的时间内完成这个任务。
果然,在项目评审的过程中,张明遇到了一个严重的问题,他的Vue组件无法正常工作。他尝试了各种方法,但都没有成功。这时,团队领导走了过来,询问他的进展情况。
张明无奈地坦白了自己的困境,并表达了自己的愧疚和不安。他本以为会遭到严厉的批评或指责,但出乎意料的是,团队领导并没有责怪他,而是耐心地为他讲解了Vue.js的基本操作和注意事项。
在团队领导的帮助下,张明终于成功地解决了Vue组件的问题。虽然这次经历让他感到非常尴尬和羞愧,但他也深刻地认识到了自己的不足和需要改进的地方。
然而,不幸的是,由于张明在Vue.js方面的技能不足已经严重影响到了团队的项目进度和开发效率。在经过一段时间的观察和评估后,公司最终做出了一个艰难的决定:将张明解雇。
虽然这个结果让张明感到非常失落和沮丧,但他也意识到这是一个重要的教训。他明白了在职场中不仅要掌握专业技能,还要具备快速学习和适应新环境的能力。他决定在离开这家公司之前,认真反思自己的不足并努力学习Vue.js和其他相关技术知识,为将来的职场生涯打下坚实的基础。
所以VUE是什么东西呢?我们接着往下看…
第 1 章:Vue 核心
1.1. Vue 简介
1.1.1. 官网
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
1.1.2. 介绍与描述
-
- 动态构建用户界面的渐进式 JavaScript 框架
-
- 作者: 尤雨溪
1.1.3. Vue 的特点
-
- 遵循 MVVM 模式
-
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
-
- 它本身只关注 UI, 也可以引入其它第三方库开发项目
1.1.4. 与其它 JS 框架的关联
-
- 借鉴 Angular 的模板和数据绑定技术
-
- 借鉴 React 的组件化和虚拟 DOM 技术
1.1.5. Vue 周边库
-
- vue-cli: vue 脚手架
-
- vue-resource
-
- axios
-
- vue-router: 路由
-
- vuex: 状态管理
-
- element-ui: 基于 vue 的 UI 组件库(PC 端) ……
1.2. 初识 Vue
<div id="root">
<h1>hello world</h1>
</div>
1.3. 模板语法
1.3.1. 效果
<div id="root">
<!-- VUE模板和vue实例一对一绑定-->
<h1>hello {{name}}</h1>
<hr />
<a v-bind:href="url">baidu</a><br />
<!-- v-bind是单向数据绑定,v-model(只能用在表单类元素上,比如h元素就不行)是双向数据绑定 -->
数据绑定<input type="text" v-model="age"/>
</div>
<script type="text/javascript">
new Vue(
{
el:'#root',
data:{
name:'abc',
url: 'http://www.baidu.com',
age:20
},
});
// min版的vue需要手动开启
// Vue.config.devtools = true;
</script>
1.3.2. 模板的理解
html 中包含了一些 JS 语法代码,语法分为两种,分别为:
-
- 插值语法(双大括号表达式)
-
- 指令(以 v-开头)
1.3.3. 插值语法
-
- 功能: 用于解析标签体内容
-
- 语法: {{xxx}} ,xxxx 会作为 js 表达式解析
1.3.4. 指令语法
-
- 功能: 解析标签属性、解析标签体内容、绑定事件
-
- 举例:v-bind:href = ‘xxxx’ ,xxxx 会作为 js 表达式被解析
-
- 说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子
1.4. 数据绑定
1.4.1. 效果
<body>
<div id="root">
<!-- VUE模板和vue实例一对一绑定-->
<h1>hello {{name}}</h1>
<hr />
<a v-bind:href="url">baidu</a><br />
<!-- v-bind是单向数据绑定,v-model(只能用在表单类元素上,比如h元素就不行)是双向数据绑定 -->
单向数据绑定<input type="text" :value="age1"/>
双向数据绑定<input type="text" v-model="age"/>
</div>
<script type="text/javascript">
new Vue(
{
el:'#root',
data:{
name:'abc',
url: 'http://www.baidu.com',
age:20,
age1:10
},
});
// min版的vue需要手动开启
// Vue.config.devtools = true;
</script>
1.4.2. 单向数据绑定
-
- 语法:v-bind:href =“xxx” 或简写为 :href;
-
- 特点:数据只能从 data 流向页面(在页面修改值,data不变);
1.4.3. 双向数据绑定
-
- 语法:v-mode:value=“xxx” 或简写为 v-model=“xxx” ;
-
- 特点:数据不仅能从 data 流向页面,还能从页面流向 data(在页面修改值,data会改变);
1.5. MVVM 模型
-
- M:模型(Model) :对应 data 中的数据
-
- V:视图(View) :模板
-
- VM:视图模型(ViewModel) : Vue 实例对象
- VM:视图模型(ViewModel) : Vue 实例对象
vue的数据代理
Vue实例中的_data==data
<body>
<!--
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>名称:{{name}}</h2>
<h2>地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
name:'好好',
address:'深圳'
}
})
</script>
1.6. 事件处理
1.6.1. 效果
1.6.2. 绑定监听
-
- v-on:xxx=“fun”
-
- @xxx=“fun” (简写)
-
- @xxx=“fun(参数)”
-
- 默认事件形参: event
-
- 隐含属性对象: $event
1.6.3. 事件修饰符
- 1.prevent:阻止默认事件(常用);
- 2.stop:阻止事件冒泡(常用);
- 3.once:事件只触发一次(常用);
- 4.capture:使用事件的捕获模式;
- 5.self:只有event.target是当前操作的元素时才触发事件;
- 6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
<body>
<!--
Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
-->
<div id="root">
<h1>欢迎来到{{name}}学习</h1>
<a href="http://www.baidu.com" @click.prevent='showinfo'>点我</a>
<button v-on:click.once='showinfo'>点击提示</button>
<button @click='showinfo2(666)'>点击提示</button>
<div @click='showinfo' class='demo'>
<button @click.stop='showinfo'>点击</button>
</div>
</div>
</body>
1.6.4. 按键修饰符
-
- keycode : 操作的是某个 keycode 值的键
-
- .keyName : 操作的某个按键名的键(少部分)
<body>
<!--
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.自定义键名 = 键码,可以去定制按键别名
-->
<!-- 准备好一个容器-->
<div id="root">
<h2>欢迎来到{{name}}学习</h2>
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>
</body>
1.7. 计算属性与监视
1.7.1. 效果
<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="fristName"/><br />
名:<input type="text" v-model="lastName"/><br />
<span>{{addname()}}</span><br />
姓2:<input type="text" v-model="fristName2"/><br/>
名2:<input type="text" v-model="lastName2"/><br />
<span>{{addname2}}</span>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
const vm= new Vue(
{
el:'#root',
data:{
name:'优讯',
fristName:'zhang',
lastName:'san',
fristName2:'zhang2',
lastName2:'san2'
},
methods: {
addname(){
return this.fristName+this.lastName;
}
},
computed: {
addname2: {
//get有什么作用?当有人读取fullName时,get就会被调用,且返回值就作为fullName的值
//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
return this.fristName2+this.lastName2
},
//set什么时候调用? 当fullName被修改时。
Set(value){
const x=value.split('-');
this.fristName2=x[0];
this.lastName2=x[1];
}
}
},
});
// min版的vue需要手动开启
// Vue.config.devtools = true;
</script>
1.7.2. 计算属性-computed
-
- 要显示的数据不存在,要通过计算得来。
-
- 在 computed 对象中定义计算属性。
-
- 在页面中使用{{方法名}}来显示计算的结果。
1.7.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>
-
- 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性;
-
- 当属性变化时, 回调函数自动调用, 在函数内部进行计算;
1.8. class 与 style 绑定
1.8.1. 理解
-
- 在应用界面中, 某个(些)元素的样式是变化的
-
- class/style 绑定就是专门用来实现动态样式效果的技术
1.8.2. class 绑定
<body>
<!--
绑定样式:
1. class样式
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。
2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
-->
<!-- 准备好一个容器-->
<div id="root">
<!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
<!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
<div class="basic" :class="classArr">{{name}}</div> <br/><br/>
<!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
<!-- 绑定style样式--数组写法 -->
<div class="basic" :style="styleArr">{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'程序员学习',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},
methods: {
changeMood(){
const arr = ['happy','sad','normal']
const index = Math.floor(Math.random()*3)
this.mood = arr[index]
}
},
})
</script>
-
- :class=‘xxx’
-
- 表达式是字符串: ‘classA’
-
- 表达式是对象: {classA:isA, classB: isB}
-
- 表达式是数组: [‘classA’, ‘classB’]
1.8.3. style 绑定
-
- :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
-
- 其中 activeColor/fontSize 是 data 属性
后记
👉👉💕💕美好的一天,到此结束,下次继续努力!欲知后续,请看下回分解,写作不易,感谢大家的支持!! 🌹🌹🌹