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 属性
后记
👉👉💕💕美好的一天，到此结束，下次继续努力！欲知后续，请看下回分解，写作不易，感谢大家的支持！！ 🌹🌹🌹
