VUE2.0 全套 demo 讲解（学习笔记）
基础一：
模板语法
1.文本
Mustache 标签将会被替代为对应数据对象上
hello {{world}}
{{`hello ${world}`}}
第一种
第二种 用v-text的指今写法
第三种和第四是对es6写法的拓展写法，称模板字符串
2.v-once
hello {{world}}
3.纯html
4.属性
如果我们先不考虑组件传递，我们就是考虑简单的给元素加属性
<div><a :href='href'>hrefa><p :id='id'>idp><img :src="src" alt="图片"><button :disabled = 'disabled'>按钮button>div>
template>
<div><my-button @click.native="buttonClick">my-button>div>
template>
实现原理，我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到
<div><input type="text" v-model.trim="content"><input type="text" v-model = 'content'>div>
template><script>
export default {data () {return {content : ""}}
}
script>
6. 过滤器
我说说我遇到过的应用场景，再把我应用的场景再加深一点逻辑
1.首先我们从后台拿到10个用户的手机，但是要把前7位掩码，做成*，然判断如果手机尾数是偶数的话，我们就显示已中奖，不是的话显示谢谢参与
{{tel | newtel}}
7.结合过滤器参数与v-bind过滤
{{url.url}}
第一个参就是传给fitler里getquery里的第二个参数，就是name
第二个参就是传给fitler里getquery里的第三个参数，就是age
因为第一个参数是默认的
这里我大量用了v-for来进行循环,如果有看不懂的话，等讲到第基础二或者三的时候再回头看看这里的v-for用法你就一目了然了
8.缩写
<a v-bind:href="url">a>
<a :href="url">a>
<a v-on:click="doSomething">a>
<a @click="doSomething">a>
v-for 列表渲染
通常情况下，进入一个活动要展示出所有参加活动的人员，里面有姓名，年龄，报名时间等等，就先举这三个列子，那后台肯定会返回一个
- {{item.custName}}{{item.age}}{{item.joinTime}}
1.如果在
2.在
3.
一.
二.
三.
4.为什么我们要把
5.
2.template v-for
当我们循环渲染时，我们如果有多个欠套不合理的关系下，一般情况下肯定是在最外层套一个div元素，这个我认为显的不是很清楚，我们用template来代替渲染，不但能省去很dom节点，而且也能解决欠套不合理的情况
{{item.content}}
![]()
3. v-for Object 对象渲染
就像第一个列子如果到了详情页，我们要展示一个用户详情，如果后端都给你排好序了，如何正确的方便展示出来，用最快，最便捷的方法那就是v-for 迭代对象，一般情况下展示一个用户详情，后台肯定返回一个用户对象给你
{{key}} {{value}}
两者都是一一对应的，通过第一个例子讲解，我相信这个例子很简单了
4. v-for 整数迭代
<span v-for="n in 10">{{ n }}span>
</div>
4. v-for 和 组件
比方拿掘金来说，每个用户展现的文章列表中，每个用户的文章可以做成一个统一组件，通过父组件来进行数据的传递，循环出所有人的文章，就形成了文章列表，而且可以在热门，最新，或者专栏里面复用，只需要通过数据传递，是一种相当好的模式
{{artList.name}}
{{artList.startTime}}
{{artList.content}}
{{artList.good}}
<div><my-article v-for='item in artList' :art-list='item'>my-article>div>
template>
4. 注意示项
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：
当你修改数组的长度时，例如：
5. 显示过滤/排序效果
应用场景 ：
我在这里做了一个小demo当原数组里面随机改变值的同时，副本基于原数组的创建出一个副本数组跟着过滤的不同而改变
有两个视图：
1.第一个视图，我们点击按纽改变1-10的随机数
2.第二个视图，随着随机数的改变来判断是否为偶数是偶数的则过滤出来
计算属性
在计算属性中，在我们前面基础1和基础2分享中有两个地方可以计算属性，我们认为所有属性的计算都是变向的在过滤值，通过数据的不断变化计算出不同的值和操作不同的方法
1.模板内的表达式
2.属性v-bind:里的可以进行表达式
3.指令中我们也可以进行表达式
以上三者优势在那里，简洁，省代码量，如果只是一个小操作，比方说一些简单的数值++，字符拼接，三元表达式，那使用相当好
以上三者的劣势，一但要处理的逻辑复杂，如果用到
App.vue
<div><p @click="count++">{{count+'分'}}p><input v-model='message'><p>{{message.split('').reverse().join('') }}p>div>
template>
通过一直监听文字的字符的长度来出发compunted里reduceCount这个方法，来再次进行计算，返回值给视图，让视图进行变化。这也是一个很简单的demo例子，那很好，前面我说了可以监听多个数据，只要一个数据变了，整个方法就会从新计算，反馈到视图，这个方法只是一个简单的应用，请看下个demo例子，你们就能看懂一切的一切
这个例子是我想了一个多小时才次决定的例子，那就最就萨德事件使中韩足球最热门的一个事件，做IT做DEMO就是要玩起来，政治我们先不讨论，我们用技术来感化一下我们的爱国情
demo场景分析
1.我们要声明那些数据
一.比赛时间 用time来维护
二.比赛双方的进球数 用对象来维护
三.比赛的播报情况 在90分钟内，要显示中国领先或者韩国队领先或者双方僵持，如果到了90分种我们要显示中国队赢还是韩国队赢，还是平局
第三个数据非常关键，我们用什么来维护，可以说比赛情况是多样化的，用一个数据去定死维护，不符合场景，那我先列出那通过改变这些变化，我们不但要检测双方的进球数，还要通过时间来比对，是90分钟内，还是已经结束比赛了，来显示不同的文案。所以我们要不断监听两个维护的数据，一是比赛时间，二是比赛两队进球数
比赛时间{{time}}s
直播播报{{result}}
中国队进球数：{{team.china}}
韩国队进球数：{{team.korea}}
上面的我用点击事件来进行双方进球数，把上面这个demo运行一下我们可以充分的理解computed的涵意，说到底是观察一个或者多个数据，每当其中一个数据改变的时候，这个函数就会从新计算,还有就是通过观察所有数据来维护一个状态，就是所谓的返回一个状态值，从上面这个demo我们就可以很容易的知道computed到底用在什么场景，如何去维护返回一个多状态的场景
2.methods vs computed
在methods和computed可以做同样的事，但是，computed可以进行缓存，什么意思呢，就是在上个例子我们对比赛时间和两个球队的进球数进行了检测数据，如果随着时间的改变，但是球数没动，对于computed来说只会从新计算这个球数会进入缓存，不会再次计算，而从新计算的是这个时间,而且页面的dom更新也会出发methods来从新计算属性，所以如果不想让计算属性进入缓存，请求methods,但是我推荐用computed，语议化好一点麻，什么选项里就应该改做什么事，methods里面就是应该来管事件的。个人认为,同样的操作我就不演示demo了，看看官方的用法理解一下就可以了
3.computed vs watch
computed和watch都可以做同一件事，就像跑步运动员都可以跑步，但是分100米和1000米，术业有专功麻，两个选项都是对数据进行时时监听，但是两个的适用场景就不一样了
一.computed前面说了是适用于对多数据变动进行监听，然后来维护一个状态，就是返回一个状态
二.watch是对一个数据监听，在数据变化时，会返回两个值 ，一个是value(当前值)，二个是oldvalue是变化前的值，我们可以通过这些变化也可以去维护一个状态，但是不符合场景，主要用于什么地方呢？主要用于监听一个数据来进行复杂的逻辑操作
比赛时间{{time}}s
直播播报{{result}}
中国队进球数：{{team.china}}
韩国队进球数：{{team.korea}}
以上代码和computed的产生的效果一模一样，但是很明显，就像我对
我想信图片预加载大家肯定都有接触过，当图片量大的时候，为了保证页面图片都加载出来的时候，我们才把主页面给显示出来，再进行一些
那此时你用
我们可以发现发四张图片都加载完毕的时候页面才显示出来
根据完方有一句话说的很重要的一句
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或开销较大的操作，这是很有用的。
基于这个官方的理解再总结我个人的整体理解。给出computed和watch的总结，记住这几点的总结，在做项目的时候想想这些总结，选择你的应用方法
computed :
监听多个数据或者一个数据来维护返回一个状态值 ，只要其中一个或多个数据发生了变化，则会从新计算整个函数体，从新返回状态值
watch :
只有一个一个监听据，只要这个数据发生变化，就会在返回两个参数，第一个是当前的值，第二个是变化前的值，每当变化的时候，则会触发函数体的里的逻辑行为，来进逻辑后续操作
其实我觉得计算属性也好，computed,watch这几个都不是有多难，如果浅层面上看很容易理解，如果从深层面上看，很多小伙伴会存在什么问题，就是会滥用，混用，这些计算属性，我想通过这些demo例子讲解和分析，我相信你又上一层楼了，ok终于可以完结这篇了，下一篇我想看看大家想学什么可以给我留言，如果那个多我就先讲那个
1.事件处理
2.表单控件
3.条件渲染
4.class 和 style 绑定
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！