本文已参与「新人创作礼」活动， 一起开启掘金创作之路。
Vue 中的MVVM
- MVVM：Model View ViewModel。学习概念的最好的方式是维基百科。
- MVVM
- Vue 中的 MVVM：
计数器中的 MVVM
创建 Vue 实例传入的 options
- 在创建 Vue 实例的时候，传入了一个对象 options。
- options 可以包括的选项：
- 目前掌握的选项：
- el
- 类型：string | HTMLElement
- 作用：决定之后 Vue 实例会管理哪一个 DOM 。
- data
- 类型：Object | Function
- 作用：Vue 实例化对应的数据对象。
- methods
- 类型：{[key: string]: Function}
- 作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。
- el
Vue 的生命周期
Vue 语法基础
代码规范
- 缩进：（大部分大型的开源项目一般都是）缩进 2 个空格，一般编译器缩进四个空格。
- 符号旁边要加空格。
Vue 的生命周期函数
等待后期补充知识点
插值操作
Mustache
Mustache 语法中，不仅仅可以直接写变量，也可以写简单的表达式。
计算属性
什么是计算属性？
- 在模板中我们可以通过插值语法显示一些 data 中的数据，但是在某些特殊情况下，需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示:
- 比如有 firstName 和 lastName 两个变量，在多个地方显示完整的名称时，就需要写成：
{{firstName}} {{lastName}}。
- 比如有 firstName 和 lastName 两个变量，在多个地方显示完整的名称时，就需要写成：
- 我们可以将上面的代码换成计算属性：
- 计算属性是写在实例的 computed 选项中的。
- 计算属性在使用的时候是不需要加括号的。
<div id="app">
<!-- 第一种方法：通过定义方法让他们结合在一起 -->
<h2>{{getFullName()}}</h2>
<!-- 第二种方法：计算属性（计算属性在定义的时候一般不加动词，如：FullName 和 getFullName） -->
<h2>{{FullName}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'meng',
lastName: 'zhao'
},
computed: {
FullName: function(){
return this.firstName + ' ' + this.lastName
}
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
计算属性的复杂操作
<div id="app">
<h2>总价格：{{totalprice}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{ id: 110, name: 'c语言', price: 119 },
{ id: 111, name: 'linux', price: 100 },
{ id: 112, name: 'java', price: 125 },
{ id: 113, name: 'javascript', price: 149 }
]
},
computed: {
totalprice: function () {
// return this.books.reduce()
let result = 0
for (let i = 0; i < this.books.length; i++) {
result += this.books[i].price
}
return result
}
},
})
</script>
计算属性的 setter 和 getter
- 每个计算属性都包括一个 getter 和一个 setter（不常用） 。
- set() 方法一般不设置，只读属性。
<!-- 计算属性的完整写法 -->
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'kobe',
lastName: 'Bryant'
},
computed: {
fullName: {
// 如果不设置 set 函数，则这个是只读属性，不可以进行修改。
set: function (newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[1]
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
},
})
</script>
计算属性和 methods 的对比
- 计算属性是有缓存的，所以在执行的时候它只会调用一次，因此它的性能比 methods 高。
ES6 补充
ES6 详细教程请移步一篇文章带你学会整个ES6进行系统学习 ES6
let/var
-
事实上 var 的设计可以看成 JavaScript 语言设计上的错误，但是这种错误多半不能修复和移除，以为需要向后兼容。
- 十年前，Brendan Eich 就决定修复这个问题，于是他添加了一个新的关键字：let 。
- let 就是更完美的 var 。
-
块级作用域：
- JS 中使用 var 来声明的一个变量时，变量的作用域主要是和函数的定义有关。
- 针对于其他块定义来说是没有作用域的，比如 if/for 等，这在我们开发中往往会引起一些问题。
-
变量作用域：变量在什么范围内是可用的。
- 没有块级作用域引起的问题：if 的块级
var func; if(true){ var name = 'why' func = function(){ console.log(name) } // func() } name = 'kobe' func() // console.log(name)- 没有块级作用域引起的问题：for 的块级
const 的使用
-
在很多语言中都存在 const ，主要作用是将某个变量修饰为常量。
-
在 JavaScript 中也是如此，使用 const 修饰的标识符为常量，不可以再次赋值。
-
当修饰的标识符不会被再次赋值时，就可以使用 const 来保证数据的安全性。
-
注意点：
-
const a = 20 a = 30 // 错误：a不可以被修改。 -
const name // 错误：const 修饰的标识符必须赋值。 -
const obj = { name: 'why', age: 18, height: 1.88 } obj.name = 'kobe' obj.age = 20 obj.height = 1.87 // 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。
-
-
建议：在开发中优先使用 const 。只需要改变某一个标识符的时候才使用let。
对象增强写法
-
在 ES6 中，对对象字面量进行了很多增强。
-
属性初始化简写和方法的简写：
- 属性的简写：
// ES6 之前 let name = 'why' let age = 18 let obj1 = { name: name, age: age } console.log(obj1) // ES6 之后 let obj2 = { name,age } console.log(obj2)- 方法的简写:
// ES6 之前 let obj1 = { test: function(){ console.log('obj1的test函数') } } obj1.test() // ES6 之后 let obj2 = { test(){ console.log('obj2的test函数') } } obj2.test() ## 事件监听
- 在前端开发中，需要经常用于交互。
- 这时，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。
- 在 Vue 中使用 v-on 指令来监听事件。
- v-on 介绍：
- 作用：绑定事件监听器。
- 缩写：@
- 预期：Function | Inline Statement | Object
- 参数：event
v-on 参数
-
当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：
- 情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加。
- 但是注意：如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去。
- 情况二：如果需要同时传入某个参数，同时需要 event 时，可以通过 $event 传入事件。
- 情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加。
-
案例讲解：
<div id="app"> <!-- 时间调用的方法没有参数 --> <button @click="btn1Click()">按钮</button> <button @click="btn1Click">按钮1</button> <!-- 在事件定义时，方法本身是需要一个参数的,那此时未传入参数，那么此时的形参为 undefined --> <!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,那浏览器此时会生成一个 event 对象并作为一个参数传入方法中 --> <button @click="btn2Click">按钮2</button> <!-- 方法定义时，我们需要 event 对象，同时又需要其他参数 --> <!-- 在调用方式，如何手动的获取到浏览器参数的 event 对象：$event --> <button @click="btn3Click(123,$event)">按钮3</button> </div> <script src="./vuecode/vue.js"></script> <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> --> <script> const app = new Vue({ el: '#app', methods: { btn1Click(){ console.log('btn1Click'); }, btn2Click(event){ console.log('--------',event) ; }, btn3Click(abc){ console.log('+++++++',abc,event) ; } } }) </script>
v-on 修饰符
-
.stop：阻止冒泡。<div id="app" @click="divClick"> <!-- .stop 修饰符的使用。 --> <button @click.stop="btnClick">按钮</button> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { btnClick(){ console.log('btnClick'); }, divClick(){ console.log('divClick'); } } }) </script> -
.prevent：阻止默认行为。<div id="app"> <!-- form 默认会自动搜集表单中的数据进行提交 --> <form action="baidu"> <input type="submit" value="提交" @click.prevent="submitClick"> </form> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ methods: { submitClick(){ console.log('submitClick'); } } }) </script> -
.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调。<div id="app"> <input type="text" @keyup.enter="keyClick"> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { keyClick(){ console.log('keyClick'); } } }) </script> -
.native：监听组件根元素的原生事件。 -
.once：只触发一次回调。<div id="app"> <button @click.once="btnClick">按钮</button> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', methods: { btnClick(){ console.log('btnClick'); } } }) </script>
条件判断
v-if、v-else、v-else-if
-
这三个指令与 JavaScript 的条件语句 if、else、else if 类似。
-
Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件。
<div id="app"> <p v-if="score>90">优秀</p> <p v-else-if="score>80">良好</p> <p v-else-if="score>60">及格</p> <p v-else>不及格</p> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { score: 90 }, }) </script>- 在逻辑比较多的时候不建议使用这样的方法，可以在计算属性中定义一个属性来进行逻辑判断。
v-if 的原理
- v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染。
- 也就是根本没有不会有对应的标签出现在 DOM 中。
条件案例
<div id="app">
<span v-if="isUser">
<label for="username">用户账号</label>
<input type="text" id="username" placeholder="用户账号">
</span>
<span v-else="">
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="isUser = !isUser">切换类型</button>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isUser: true
},
})
</script>
条件案例中存在的问题
- 问题描述：
- 如果我们在有输入内容的情况下，切换了类型，就会发现文字依然显示之前输入的内容。
- 但是应该实现的内容是：切换到另一个 input 元素中了。
- 在另一个 input 元素中，并没有输入内容。
- 问题解答：
- 这是因为 Vue 在进行 DOM 渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
- 在上面的案例中，Vue 内部会发现原来的 input 元素不再使用，直接作为 else 中的 input 来使用了。
- 解决方案：
- 如果要解决 Vue 中重复利用的问题，可以给对应的 input 加一个 key 。
- 并且我们要保证 key 是不相同的。
高阶函数
filter()
-
过滤器，可以遍历数组，返回想要拿到的值。
-
filter 中的回调函数有一个要求：必须返回一个 Boolean 值。
-
当返回 true 时，函数内部会自动将这次回调的 n 加入到新的数组中。
-
当返回 false 时，函数内部会过滤掉这次的 n 。
-
用法：
let nums = [10,20,111,245,40,77,543,50,] let newNums = nums.filter(function(n){ return n < 100 // 把数组里面满足条件的数添加到新的数组里面 }) // 返回的新数组为[10,20,40,50]
map()
-
map() 函数会对产生的新数组做一次操作。
// 此时的 newNums 为[10,20,40,50] let new2Nums = newNums.map(function(n){ return n*2 // 遍历数组，将数组中的所有值都乘以2，并返回一个新数组。 }) // 返回的新数组为[20,40,80,100]
reduce()
-
对数组中所有的内容进行汇总。
// 此时的 new2Nums 为[20,40,80,100] let total = new2Nums.reduce(function(preValue,n){ return preValue +n },0) // preValue 的初始值为 0 。 // total 的结果为为 240 。
结合使用
// 数组内容为[10,20,111,245,40,77,543,50,]
let total = nums.filter(function(n){
return n < 100
}).map(function(n){
return n * 2
}).reduce(function(preValue,n){
return preValue +n
},0)
// 输出结果不变，依然是 240 。
// 简洁写法：
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n)) => pre + n)
