今天来晚辣,给公司作了一个小项目,一个瀑布流+动态视频控制的DEMO,有须要的能够联系我,公司的项目就不对外展现了(一个后端程序员真的要干前端了哈哈哈)。html
书接上文,昨天正式的开始了Vue的代码的学习,简单的经过一些假的数据来展现了下我的博客的首页列表,不知道你们是否还记得昨天讲的什么,若是不太清楚呢,能够再回顾下《从壹开始先后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)》,咱们主要说到了,Vue的核心语法是什么,MVVM体如今哪些方面,如何简单安装Vue环境(经过直接引用Vue.js文件的形式),以及经常使用的十大指令的前五个,而且经过讲解,我们作了一个小DEMO,就是一个我的的博客系统的首页(这里是盗取网友的一个样式,由于我看着着实比较喜欢哈哈)。其实主要记住一点,用Vue这类MVVM框架开发,必定要摆脱以前的DOM操做的习惯,改为操做数据来控制View,若是你Vue这一块会的话,那学习微信小程序开发就是分分钟的事儿,嗯~~~前端
关于后边的实战环节,我尚未肯定要用什么样式的博客,若是你们看到有好的,能够留言下,我们以它为基础能够扩展,若是不行的话,我就本身写一个简单的吧,固然仍是那句话,我只是一个抛砖引玉的做用,也给看到这篇文章的小伙伴们一丢丢的动力,这个时候要说下QQ群里的小伙伴,都已经开始用Vue,配合着前边的教程和本身的.Net Core项目进行开发页面了,我感受也是很开心的!至少能够在平时的时间,一块儿学点儿东西也是不错的。虽然不能手把手吧,可是一些建议仍是尽可能给提问题的小伙伴的。哈哈,{{ 强硬收回话题 }},今天咱们接着上一篇的内容,继续往下走,主要是:把 基本指令 介绍完,说下计算属性和侦听器,Class 与 Style 绑定,主要是这三部分,在博客页面上设计 添加文章,删除文章,筛选文章等功能。vue
看名字就能够知道,这个是 一次 的意思,也就是说在第一次渲染之后,后期的不管数据的如何修改都不会影响该节点,只渲染元素和组件一次。随后的从新渲染,元素/组件及其全部的子节点将被视为静态内容并跳过。这能够用于优化更新性能。git
注意:可是,我想说的是,这个指令通常状况不要使用,除非是含有大量的静态数据,不想每次加载的时候占用时间,若是过多的使用该指令会出现不少意想不到的问题,由于数据的不刷新,不适合刚入门的小伙伴使用。程序员
在昨天的博客首页的联系中,咱们其实已经用到了这个指令,你们应该没有注意到,就是文章列表陪着 href 属性的时候。github
v-bind
指令的做用和用法,它用于动态绑定DOM元素的属性,比较常见的好比:<a>标签的href属性,<img>标签的src属性。express
<ul class="post-list non-style-list"> <li v-for='item in list' class="post-list-item"> <!--这里用到了 v-bind 指令--> <a v-bind:href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a> <!--还能够这样写 这里的linkUrl 是一个变量--> <a :href="linkUrl">{{item.name}}</a> <span class="post-list-date">({{item.date}})</span> </li> </ul>
还能够:动态地绑定一个或多个特性,或一个组件 prop 到表达式(这里要记得,是动态的绑定,就是指在特性中存在变量)。小程序
<!-- 绑定一个有属性的对象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 经过 prop 修饰符绑定 DOM 属性 --> <div v-bind:text-content.prop="text"></div>
绑定事件监听器。事件类型由参数指定。表达式能够是一个方法的名字或一个内联语句,若是没有修饰符也能够省略。后端
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也能够监听子组件触发的自定义事件。至关于绑定事件的监听器,绑定的事件触发了,能够指定事件的处理函数。微信小程序
咱们能够简单说个栗子,在咱们的博客首页的头像上,增长一个点击事件(就是以前的click事件),
// 注意这个alert是我本身写的方法,读者能够自行看文末个人在GitHub上的demo
<div v-on:click="alert('我是老张的哲学的头像')"> </div>
//注意 v-on: 能够用@代替,好比
//<div @click="alert('我是老张的哲学的头像')"> </div>
在咱们的页面里,咱们能够用来触发:添加、筛选功能
a、新建一个 input 标签,添加一个 回车 事件
<input @keydown.enter="addArticle" type="text" class="edit" placeholder="按回车添加文章">
b、在 vue 实例的 methods 中,统一添加咱们的 addArticle 方法。
//咱们的方法都统一写到这里 methods: { //添加事件 addArticle: function () { //将文章存入list数组,注意 this指向! //将数据反转 this.list = this.list.reverse(); this.list.push(this.task); this.list = this.list.reverse(); //存入list[]后,重置task this.task = { name: '',//内容为空 id: 1000, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 } } },
c、这个时候,差最后一步,就是获取 input 的指(这个时候可千万不要再像之前那样,根据id来获取结果了)
还记得我们前几章将基本语法和Vue的核心功能的时候,说到了其中的一个很大的特性就是数据驱动 —— 双向数据绑定,不只咱们能够给 Data 赋值,还能够经过在 DOM 操做的时候,将指获取到 Data,没错就是下边的这个指令,v-model。
此外,还有其余的一些用到的指令
这是一个我认为很重要,也是常用到的指令,主要是表单操做,它能够很容易的实现表单控件和数据的双向绑定,相对之前的手动更新DOM,这个上边也说到了。
在以前的 input 输入框中,添加 v-model 指令
<input @keydown.enter="addArticle" type="text" class="edit" v-model="task.name" placeholder="按回车添加文章">
这个时候,咱们的博客添加的功能就行了(固然如今是最低端最low的,只是为了讲解 v-model 指令用,博客添加到时候会用 express 后台管理)。
好啦,经常使用的 vue 指令已经讲解完成,还有其余的一些不经常使用的几个你们能够用到的时候了解下。
在模板内使用表达式很便利,可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。例如:
<div id="example"> {{ message.split('').reverse().join('') }} </div>
在这个地方,模板再也不是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量 message
的翻转字符串。当你想要在模板中屡次引用此处的翻转字符串时,就会更加难以处理,而后若是大量的使用这样的表达式,会使得整个页面不只很差看,还很繁重。
因此,对于任何复杂逻辑,你都应当使用计算属性。
就好比上边的栗子,咱们就能够写成这样:
<div id="example"> //一、这里是咱们在 computed中定义的值,而不是在data中 <p>message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // 注意 !`this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })
这样看起来就清晰明了,减轻页面的负重。这里你可能会好奇,这就像一个data的中间件同样,不用作任何的其余操做,均可以实现这个逻辑,就好像data的影子同样,没错!计算属性就是一个getter器。
你能够像绑定普通属性同样在模板中绑定计算属性。Vue 知道 vm.reversedMessage
依赖于 vm.message
,所以当 vm.message
发生改变时,全部依赖 vm.reversedMessage
的绑定也会更新。并且最妙的是咱们已经以声明的方式建立了这种依赖关系:计算属性的 getter 函数是没有反作用 (side effect) 的,这使它更易于测试和理解。
咱们首先添加一个计算属性来过滤咱们的文章list数据
//经过计算属性过滤数据 computed: { listSearch: function () { //为何要存这个this呢,由于filter过滤器会改变this的指向 let that = this; return this.list.filter(function (item) { //简单的 判断文章name是否包含 input中的值,由于双向绑定,因此也就是 task.name return item.name.indexOf(that.$data.task.name) >= 0; }); } }
接下来,咱们就须要把咱们的计算属性 listSearch 替换掉view中的 list,从而达到过滤:
<li v-for='item in listSearch' class="post-list-item"> <span class="post-list-date">({{item.date}})</span> </li>
最后咱们能够看看效果:
注意:计算属性默认只有 getter ,不过在须要时你也能够提供一个 setter :
computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }
如今再运行 vm.fullName = '老张 哲学'
时,setter 会被调用,vm.firstName
和 vm.lastName
也会相应地被更新。
虽然计算属性在大多数状况下更合适,但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch
选项提供了一个更通用的方法,来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时,这个方式是最有用的(这个要强调,是异步操做,或者开销较大的操做)。
在这里,咱们监听下咱们的 input 输入的数据变化,也就是 task.name 的值
通常的写法是这样的:(这是监听单一属性)
new Vue({ data: { author: "老张的哲学", task: { name: '',//内容为空 id: 100, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 }, }, watch: { author: function (newval, oldVal) { console.log("author 变化辣,") } } })
注意:vm.author 和 vm._data.author 是同样的。
可是在咱们的栗子中,是监听一个对象的中某个属性,也就是 task.name,
因此咱们就会这么写:
watch: { task.name() { //这里面能够执行一旦监听的值发生变化你想作的操做 } },
可是,这样写是不符合规则的,必须是一个变量,所以会报错:
首先先说下深度监听:
若是咱们要监听 task 对象属性变化的话——好比:应用场景是,若是咱们是异步获取数据的,这个时候就能够监听是否获取到了值。能够在通常方法上,直接加上 deep:true
vm=new Vue({ data: { author: "老张的哲学", task: { name: '',//内容为空 id: 100, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 }, }, watch: { author: function (newval, oldVal) { console.log(`author 变化辣,从 ${oldVal} 变成了 ${newval} `) }, task:{ handler:(Value) =>{ console.log(`task被修改了${Value.name}`); }, deep:true //表示监视对象的属性变化 } } })
注意:vm.task.name 和 vm._data.task.name 是同样的。
因此咱们就须要仍是用到 计算属性来定义,还记得计算属性是干什么的么,它就像一个数据的中间件,把原始数据再封装一下,
那正好,咱们能够把 task.name 给封装下,最终会是这样的:
vm=new Vue({ data: { author: "老张的哲学", task: { name: '',//内容为空 id: 100, date: " Just Now ", finished: false,//未完成 deleted: false//未删除 }, }, watch: { author: function (newval, oldVal) { console.log("author 变化辣,") }, nameCpt: function (newval, oldVal) { console.log("task.name 变化辣,") }, }, //经过计算属性来操做咱们须要用到的任何数据 computed: { nameCpt() { return this.task.name } } })
vm.$watch('author',function(newValue,oldValue){ console.log('author被修改了,'newValue,oldValue) })
注意:虽然Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更:侦听属性。可是
监听是特别浪费资源的,当咱们有一些数据须要随着其它数据变更而变更时,咱们很容易滥用 watch,
所以一般更好的作法是使用计算属性而不是命令式的 watch
回调。
今天时间晚了些,动态Class 与 Style 绑定没有说到,那咱们就下次再说吧!今天呢,咱们主要说了经常使用的指令,主要的是 v-model、v-bind、v-on三个指令,而后还说了计算属性和侦听器,我在开发的过程当中,计算属性是使用较多的,可是某些时候,watch 侦听器会发挥不同的做用!好啦,下次我们继续说说 动态Class 与 Style 绑定 和 很重要的 生命周期讲解 吧。