Vue.js 基础
简单认识 Vuejs
- Vue （读音 /vju:/ ，类似于 view）。
- Vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用 Vue 实现，那么 Vue 的核心库以及其生态系统。
- 比如 Core+Vue-router+Vuex ，也可以满足你各种各样的需求。
- Vue 有很多特点和 Web 开发中常见的高级功能。
- 解耦试图和数据。
- 可复用的组件。
- 前端路由技术。
- 状态管理。
- 虚拟 DOM 。
- 学习 Vue 的前提：
- 从零学习 Vue 开发，不需要具备其他类似于 Angular 、 React ， 甚至是 jQuery 的经验。
- 但是一定要具备一定的 HTML 、 CSS 、 JavaScript 基础。
- ES6 语法特别重要。
Vuejs 安装
Vue 安装方式有很多：
- 直接 CDN 引入：
- 可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Hellow Vuejs
<div id="app">
<h2>{{message}}</h2>
<h1>{{name}}</h1>
</div>
<div>{{message}}</div>
<script src="./vue源码/vue.js"></script>
<script>
// let(变量)/const(常量)。
// 编程范式：声明式编程。
let app = new Vue({
el: '#app', // 用于挂载要管理的元素。
data: { // 定义数据。
message: '你好啊，李银河！',
name: 'coderwhy'
},
})
// 原生 js 的做法（编程范式：命令式编程）。
// 1. 创建div元素。
// 2。 定义一个变量叫 message。
// 3. 将 message 变量放在前面的 div 元素中显示。
// 4. 修改 message 的数据：今天的天气不错！
// 5. 将修改后的数据再次替换到 div 元素。
</script>
- 创建 Vue 对象的时候，传入了一些 options:{}
- {} 中包含了 el 属性：该属性决定了这个 Vue 对象挂载到哪一个元素上，很明显，我们这是挂载到了 id 为 app 的元素上。
- {} 中包含了 data 属性：该属性中通常会存储一些数据。
- 这些数据可以是我们直接定义出来的，比如像上面这样。
- 也可以是来自网络，从服务器加载的。
Vue 实例的作用范围是什么呢？
- 挂载点选择的标签内部。
是否可以使用其他的选择器？ - 可以（建议使用 id 选择器）。
是否可以设置其他的 DOM 元素呢？ - 只支持双标签，但是也有例外，比如 html 标签和 body 标签。
数据类型
- Vue 中用到的数据定义在 data 中。
- data 中可以写
复杂类型的数据。 - 渲染复杂类型数据时，遵守 js 的
语法即可。
内容绑定，事件绑定
v-text 指令
- v-text 会设置标签内所有的内容。
- v-text 通常情况下，接收一个 string 类型。
<div class="app" v-text="message">
</div>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '.app',
data: {
message: '你好孟钊'
}
})
</script>
<!-- 拼接：<h2class="app" v-text="message+'!'"></h2> --/>
<!-- 拼接：<h2>深圳{{message+"!"}}</h2> --/>
- 设置部分内容可以使用
<h2>深圳{{message}}</h2>，这种方法叫差值表达式。
v-html 指令
-
如果我们直接通过 {{}} 来输出，会将 HTML 代码一起输出。
-
但是我们可能希望按照 HTML 的格式进行解析，并且显示对应的内容。
-
可以使用 v-html 指令：
1）该指令后面往往会跟上一个 string 类型。
2）会将 string 的 HTML 解析出来并且进行渲染。
-
<div class="app">
<span v-html="message"></span>
</div>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '.app',
data: {
message: '<h1>你好</h1>'
}
})
</script>
v-on 指令
为元素绑定事件
- 语法：
<input type="button" value="事件绑定" v-on：click="methods 中的方法"></input>。 - v-on: 可以简写成@。
- 计数器案例
<div id="app">
<h2>当前计数：{{counter}}</h2>
<!-- <button v-on:click="counter--">-</button> -->
<!-- <button v-on:click="counter++">+</button> -->
<button v-on:click="sub">-</button>
<button v-on:click="add">+</button>
</div>
<script src="./vue源码/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
counter: '0',
},
methods: {
add: function(){
if(this.counter<10){
this.counter++
}else{
alert('别加了，最大了！')
}
},
sub: function(){
if(this.counter>0){
this.counter--
}else{
alert('别减了，已经没了！')
}
}
}
})
</script>
v-on 补充
-
传递自定义参数，事件修饰符。
-
事件绑定的方法写成
函数调用的形式，可以传入自定义参数。 -
定义方法时需要定义
形参来接收传入的实参。 -
事件的后面跟上
.修饰符可以对事件进行限制。 -
.enter可以限制触发的按键为回车。
总结
- methods 属性：该属性用于在 Vue 对象中定义方法。
- @click 指令：该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是 methods 中定义的方法）。
- 语法糖：简写。
|名称|作用|
|:|:|
|click|点击事件|
|mouseenter|鼠标移入|
|dblclick|鼠标双击事件|
v-model 指令
- 获取和设置表单元素的值（
双向数据绑定）. - 绑定的数据会和表单元素
值相关。 - 绑定的元素⬅➡表单元素的值。
- v-model 原理：
- v-model 其实是一个语法糖，他的背后本质上是包含两个操作。
- v-bind 绑定一个 value 值。
- v-on 指令给当前元素绑定 input 事件。
- v-model 其实是一个语法糖，他的背后本质上是包含两个操作。
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM">
<h2>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message:'黑马程序员'
},
methods: {
getM:function(){
alert(this.message)
}
}
})
</script>
v-model: radio
-
当存在多个单选框时。
<div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="message">男 </label> <label for="famale"> <input type="radio" id="famale" value="女" v-model="message">女 </label> <h2>你的选择是：{{message}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '男' } }) </script>
v-model: checkbox
-
单选框
- v-model 即为布尔值。
- 此时 input 的 value 值并不影响 v-model 的值。
<div id="app"> <label for="agreement"> <input type="checkbox" id="agreement" v-model="agreement">我已阅读并同意以上协议 </label> <button :disabled="!agreement">注册</button> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { agreement: false } }) </script> -
多选框
- 多个复选框因为要选择多个，所以对应的 data 中属性是一个数组。
- 当选中某一个时，就会将 input 的 value 值添加到数组中。
<div id="app"> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <h2>你的爱好是：{{hobbies}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { hobbies: [] } }) </script>
v-model: select
-
和 checkbox 一样，select 也分单选和多选两种情况。
-
单选：只能选中一个值。
- v-model 绑定的是一个值。
- 当我们选中 option 中的一个时，会将它对应的 value 赋值到 mySelect 中。
<div id="app"> <select name="" id="" v-model="fruit"> <option value="李子">李子</option> <option value="火龙果">火龙果</option> <option value="葡萄">葡萄</option> <option value="哈密瓜">哈密瓜</option> </select> <h2>你选择的水果是：{{fruit}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { fruit: '火龙果' } }) </script> -
多选：可以选中多个值。
- v-model 绑定的是一个数组。
- 当选中多个值时，就会将选中的 option 对应的 value 添加到数组 mySelects 中。
<div id="app"> <select name="" id="" v-model="fruits" multiple> <option value="李子">李子</option> <option value="火龙果">火龙果</option> <option value="葡萄">葡萄</option> <option value="哈密瓜">哈密瓜</option> </select> <h2>你选择的水果是：{{fruits}}</h2> </div> <script src="./vuecode/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { fruits: [] } }) </script>
值绑定
- 用来给所要操作的元素动态绑定 value 值。
<div id="app">
<select name="" id="" :value="fruits" v-model="fruit" multiple>
<option>李子</option>
<option>火龙果</option>
<option>葡萄</option>
<option>哈密瓜</option>
</select>
<h2>你选择的水果是：{{fruit}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruit: [],
fruits: [ "李子", "火龙果", "葡萄", "哈密瓜" ]
}
})
</script>
v-model 修饰符
- lazy 修饰符
- 默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。
- 也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生。
- lazy 修饰符可以让数据在失去焦点或者回车时才会更新。
- number 修饰符
- 默认情况下，在输入框中，无论我们输入的是字母还是数字，都会被当作字符串类型进行处理。
- 但是如果我们希望处理的是数字类型，那么最好是直接将内容当作数字处理。
- number 修饰符可以让在输入框中输入的内容自动转成数字类型。
- trim 修饰符
- 如果输入的内容首尾有很多空格，通常我们希望将其去除。
- trim 修饰符可以过滤内容两边的空格。
v-show 指令
- 根据表达值的真假，切换元素的显示和隐藏。
- 原理是修改元素的 display 值，实现显示隐藏。
- 指令后面的内容，最终都会解析为
布尔值。 - 值为
true元素显示，值为false元素隐藏。
<div id="app">
<input type="button" v-on:click="changeIsShow" value="切换"></input>
<img v-show="isShow" src="./images/1.jpg" alt="">
</div>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
},
methods: {
changeIsShow: function () {
this.isShow = !this.isShow
}
}
})
</script>
v-if 指令
- 根据表达值的真假，切换元素的显示和隐藏（操纵 DOM 元素）。
- 本质是操纵 DOM 元素来切换显示状态。
- 表达式的值为
true，元素存在于 DOM 树中，为false，从 DOM 树中移除
<div id="app">
<input type="button" value="点击" @click="toggleIsShow">
<p v-if="isShow">黑马程序员</p>
</div>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
toggleIsShow: function () {
this.isShow = !this.isShow
}
}
})
</script>
v-bind 指令
v-bind 绑定class
- 设置元素的属性（比如：
src，title，class）。 - 语法：
v-bing:属性名=表达式。 - 简写：
:属性名。 - 需要动态的增删 class 建议使用对象的方式。
- 语法：
<!-- 用法一：直接通过 {} 绑定一个类。 -->
<h2 :class="{'active': isActive}">Hello World</h2>
<!-- 用法二：也可以通过判断，传入多个值。 -->
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
<!-- 用法三：和普通的类同时存在，并不冲突。 -->
<!-- 注：如果 isActive 和 isLine 都为 true ，那么会有 title/active/line 三个类 -->
<h2 class="title" :class="{'active': isActive , 'line':isLine}">Hello World</h2>
<!-- 用法四：如果过于复杂，可以放在一个 methods 或者 computed 中。 -->
<!-- 注：classes 是一个计算属性 -->
<h2 class="title" :class="classes">Hello World</h2>
<!-- 用法五：数组语法。(用的次数较少) -->
<h2 class="title" :class="['active','line']">Hello World</h2>
- 案例：
<div id="app">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgtitle+'!!!!'">
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
</div>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
imgSrc: "https://www.itheima.com/images/logo.png",
imgtitle: "黑马程序员",
isActive: false
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive
}
}
})
</script>
v-bind 绑定style
- v-bind:style：可以绑定一些 CSS 内联样式。
- 在写 CSS 属性名的时候，比如 font-size
- 采用驼峰式：
fontSize。 - 或者短横线分隔（记得用单引号括起来）
'font-size'。
- 采用驼峰式：
- 绑定 class 有两种方式：
-
对象语法：
:style="{key(属性名): 'value(属性值)'}"1）对象的 key 是 CSS 属性名称。
2）对象的 value 是具体赋的值，值可以来自于 data 中的属性。
-
数组语法：
:style="[baseStyles,overridingStyles]"1）多个值以 ， 分隔即可。
-
v-for 指令
v-for 遍历数组
- 根据数据生成列表结构。
- 数组经常和
v-for结合使用。 - 语法是：
(item,index) in 数据。 - item 和 index 可以结合其他指令一起使用。
- 数组长度的更新会同步到页面上，是响应式的。
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
<!-- v-for：循环遍历 movies 这个数组，给它展示出来 -->
</ul>
</div>
<script src="./vue源码/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越','大话西游','你的婚礼','我要我们在一起','我在时间尽头等你']
},
})
</script>
v-for 遍历对象
<div id="app">
<ul>
<li v-for="item in info">{{item}}</li>
<!-- 也可以同时获取 key 和 value ：格式：(value,key) -->
</ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info:{
name: 'mengzhao',
age: 20,
height: 1.75
}
},
})
</script>
- 运行结果：
组件的 key 属性
- 官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个 key 属性。
- key 的作用**主要是为了高效的更新虚拟 DOM ** 。
- 了解内容：
- 为什么需要这个 key 属性呢？
- 这其实和 Vue 的虚拟 DOM 的 Diff 算法有关系。
- 这里我们借用 React’ s diff algorithm 中的一张图来简单说明一下
- 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。
- 我们希望可以在 B 和 C 之间加一个 F ，Diff 算法默认执行起来是这样的。
- 即把 C 更新成 F , D 更新成 C , E 更新成 D ，最后再插入 E ，是不是很没有效率？
- 所以我们需要使用 key 来给每个节点做一个唯一标识。
- Diff 算法就可以正确的识别此节点。
- 找到正确的位置插入新的节点。
- 为什么需要这个 key 属性呢？
检测数组更新
- 因为 Vue 是响应式的，所以当数据发生变化时，Vue 会自动监测数据变化，视图会发生对应的更新。
- Vue 中包含了一组观察数组编译的方法，使用它们改变数据也会触发视图的更新。
- push()：在数组最后添加元素。
- pop()：在数组后面删除最后一个元素，并返回数组。
- shift()：在数组后面删除第一个元素，并返回数组。
- unshift()：将一个或多个元素添加到数组的开头，并返回新数组的长度。
- splice()：删除元素/修改元素/添加元素。
- sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
- reverse()：反转数组项的顺序。
作业的回顾
- 数组中包括几个电影，以列表的形式展示在页面上，点击哪个哪个变成红色。
<div id="app">
<ul>
<li v-for="(item,index) in movies" :class="{active: currentIndex === index}" @click="liclick(index)">{{item}}</li>
</ul>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['我在时间尽头等你','我要我们在一起','你的婚礼','当男人恋爱时'],
currentIndex: 0
},
methods: {
liclick(index){
this.currentIndex = index
}
}
})
</script>
v-once 指令
- v-once 指令：
- 该指令后面不需要跟任何表达式（比如之前的 v-for 后面是跟表达式的）。
- 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
v-pre 指令
- 在特定情境下才会使用 v-pre 指令。
- 如果需要展示{{message}}的时候。
<div id="app">
<h2 v-pre>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
},
})
</script>
<!-- 在页面展示效果是{{message}}，而不是你好啊 -->
v-cloak
- 在 Vue 解析之前，div 中有一个属性 v-cloak。
- 在 Vue 解析之后，div 中没有一个属性 v-cloak。
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
<script src="./vue源码/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好啊',
},
})
</script>
v-show
<div id="app">
<!-- v-if：当条件为 false 时，包含 v-if 指令的元素，根本不存在 DOM 中。 -->
<h2 v-if="isShow">{{message}}</h2>
<!-- v-show：当条件为 false 时，v-show 只是给元素添加了一个行内样式：display: none -->
<h2 v-show="isShow">{{message}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isShow: true
},
})
</script>
在开发中如何选择 v-if 和 v-show 呢？
- 当需要在显示与隐藏之间切换很频繁时，用 v-show 。
- 当只有一次切换时，通过 v-if 。
记事本案例
功能
- 新增
- 生成列表结构（
v-for 数组）。 - 获取用户输入（
v-model）。 - 回车，新增数据（
v-on .enter 添加数据）。
- 生成列表结构（
- 删除
- 点击删除指定内容（v-on splice 索引）。
- 统计
- 统计信息个数（v-text length）。
- 基于数据的开发方式。
- 清空
- 点击清除所有信息（v-on）。
- 隐藏
- 没有数据时，隐藏元素（v-show v-if 数组非空）。
<!-- 主体区域 -->
<section id="todoapp">
<!-- 输入框 -->
<header class="header">
<h1>记事本</h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}</span>
<label>{{ item }}</label>
<button class="destroy" @click="remove(index)">x</button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer">
<span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong>items left</span>
<button class="clear-completed" @click="clear" v-show="list.length!=0">Clear</button>
</footer>
</section>
<script src="./vue源码/vue.js"></script>
<script>
var app = new Vue({
el: '#todoapp',
data: {
list: ['写代码', '吃饭饭', '玩游戏'],
inputValue: ""
},
methods: {
add: function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
remove: function (index) {
this.list.splice(index, 1)
},
clear: function () {
this.list = []
}
}
})
</script>
图书购物车案例
过滤器
- 在实例的 options 里面定义过滤器。
// 使用过滤器的方法：
// {{item.price | 过滤器}}
// 定义过滤器的方法：
const app = new Vue({
el: '',
data: ' ',
// 过滤器
filters:{
函数名(需要过滤的参数){
函数体
}
}
})
案例源码
<div id="app">
<div v-if="this.books.length">
<table>
<thead>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | finalPrice}}</td>
<td>
<button @click="decresement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="incresement(index)">+</button>
</td>
<td>
<button @click="clearClick(index)">操作</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格：{{totalPrice | finalPrice}}</h2>
</div>
<h2 v-else>购物车为空！</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
books: [{
id: 1,
name: '《算法导论》',
date: '2020-12-02',
price: 128.00,
count: 1
}, {
id: 2,
name: '《C语言程序设计》',
date: '2002-2-02',
price: 88.00,
count: 1
}, {
id: 3,
name: '《Vuejs从入门到基础》',
date: '2020-3-02',
price: 48.00,
count: 1
}, {
id: 4,
name: '《Java程序设计》',
date: '2004-1-28',
price: 64.00,
count: 1
}, {
id: 5,
name: '《JavaScript权威指南》',
date: '2000-8-05',
price: 108.00,
count: 1
}],
},
computed: {
totalPrice(){
let totalprice = 0
for(let i=0;i<this.books.length;i++){
totalprice += this.books[i].price * this.books[i].count
}
return totalprice
}
},
methods: {
decresement(index) {
this.books[index].count--
},
incresement(index) {
this.books[index].count++
},
clearClick(index) {
this.books.splice(index, 1)
}
},
// 过滤器
filters: {
finalPrice(price) {
return '￥' + price.toFixed(2)
}
}
})
</script>
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 补充
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)
1190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
