史上最详细VUE2.0全套demo讲解 基础篇

Vue.js   2017-04-01 15:03:59 发布
您的评价:
     
5.0
收藏     1收藏
文件夹
标签
(多个标签用逗号分隔)

一开始在vue1.0的时候我就开始关注掘金的vue专栏,但是一直给我一种感受,真正能静下心来给读者写好每一个细讲,每一个讲解点,我觉得是最重要的,虽然我没有什么能力给大家带来像iview,mint ui等一系列大牛的基础vue带来的ui框架,但是我相信通过我自己一点一点的积累,自己如何去入门一个mvvm框架的时候,慢慢用上所有最常用的api这都是一个积累的过种,这也是我在掘金的第一篇,我只想写一个大家所有所期望的东西

列一个清单吧,其实入门就是基础,如何入门我下面总结一下我展示结的流程,用心去给大家写一个就像我标题写的史上最详细VUE2.0最详细全套讲解(基础篇),听了小编的建议分多次写,把每一细讲透彻讲清楚讲明白, 如果反响好的话,我会更加动力快速打造出更多基础篇``组件篇``进阶篇``插件篇``如何为自己公司打造组件,也希望大牛能给我一点错误的指点,小白们能和我一起共同学习进步, 我同时也希望大家能看了之后能给我点一个大大的赞!

  1. 基础api的讲解,也是根据官方文档讲解,比方说把一些mutation method ,变异方法讲的更白话文一点,让大家更容易的明白
  2. 结合工作同时大家会接触的业务场景给出不同的demo,这些demo也是我自己精心在实战中总结出来的
  3. es6在vue中写法的拓展
  4. 通过一步一步的学习,此文是浅入深出,给出的demo我们可以复制到自己的电脑上自己跑一遍,跟着自己的想法拓展出别的demo,丰富自己的技术栈

Vue是什么,Vue好在那里,多牛B,也就不说了,既然你进来看了,说明他就是牛B的,整个vue生态圈证明了一切,掘金的发表vue的文章也证明了一切。

我所讲的一切都建立在vue-cli 2.2 的脚手架工具里实现

vue-cli安装教程地址

这样东西我就不详细的讲解了我们主要把核心放在基础部分

但是我要对所写的目录结构说一下

其它我们先不用管,基础部分我们只要对app.vue文件进行改动就可以,然后复制我的demo代码就可以看到所有讲解的demo效果

模板语法

1.文本

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:

Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,而且一直会监听world的值,一但改变会跟着改变

应用场景 : 可以说处处都用的到

<template>
    <div>
        <p>hello {{world}}</p>
        <p v-text="'hello ' + world"></p>
        <p>{{`hello ${world}`}}</p>
        <p v-text="`hello ${world}`"></p>
        <button @click="world='ziksang'">改变wrold值</button>
     </div>
</template>

<script>

export default {
     data () {
         return {
              world : "world"
         }
     }
}

</script>

以上用了四种写法

第一种“Mustache” 语法(双大括号)写法

第二种 用v-text的指今写法

第三种和第四是对es6写法的拓展写法,称模板字符串

2. v-once

通过指令我们可以对文本值进行一次性赋值操作,只进行第一次的数据渲染,如果再次改变值,文本值也不会改变

应用场景 : 一般是用在组件树中传递时,导致组件数据一层一层传递时,变改了不需要改变的场景,用v-once可以避免在组件数中只需用一次性赋值操作

<template>
    <div>
        <p v-once>hello {{world}}</p>
        <button @click="world='ziksang'">改变wrold值</button>
     </div>
</template>

<script>

export default {
     data () {
         return {
              world : "world"
         }
     }
}

</script>

我们再次点击button时,我们会发现没有任何改变,值行了所谓的一次性赋值

3. 纯html

我们在解析的不是文件而是一个html格式的时候放在v-text中或者{{}}就会被当作一个文本解析,所以我们此时要用v-html指令进行解析,在1.0中支持{{{}}}这种格式,为了防止xss功击,去除了这个功能

常用场景 : 当我们在跟前后台对接口数据时,后台会返回一个html格式,一般是后台操作界面编译的样式文本,此时我们就要用v-html来进行解析

<template>
    <div>
        <p v-html='html'></p>
     </div>
</template>

<script>

export default {
     data () {
         return {
              html : `<span style='color : red;'>显示红色的字你就解析成功了</span>`
         }
     }
}
</script>

此时在界面我们就能看到显示红色的字你就解析成功了这几个字样,就是被成功解析了

4. 属性

在vue中属性这个东西很关健,在组件与组件中数据传递时会很有用,但是对于属性的解析我们不能用{{}}“Mustache” 语法(双大括号)写法,我们同时还是要用指令去解析,那就是v-bind: * ,同时我们可以简写用v-bind语法糖 :即可

如果我们先不考虑组件传递,我们就是考虑简单的给元素加属性

应用场景 在组件中传递时需要用,其它元素上的绑定属性都需要这个功能

<template>
    <div>
        <a :href='href'>href</a>
        <p :id='id'>id</p>
        <img :src="src" alt="图片">
        <button :disabled = 'disabled'>按钮</button>
     </div>
</template>

<script>

export default {
     data () {
         return {
              id : 2,
              href : 'http://www.baidu.com',
              src : 'https://cn.vuejs.org/images/logo.png',
              disabled : true
         }
     }
}
</script>

我们在属性中支持number string boolean类型,以上显示能在界面中看出都能正常进行和原本属性所预期的,不用:来绑定的属性可以直接属性赋值,如果一定要通过data数据选项中返回的值一定要加 :

5.使用javascript表达式

应用场景 :

在业务场景中一些方法判断或者简单的过滤,那我们可以用javascript表达式,能让代码更简洁,更清晰,比方说用一个三元表达式。等等

<template>
     <div>
        <div id="method1">
            <p>{{ count < 0 ? '+' : '-'}} {{count + 1}}</p>
            <button @click='count ++'>增加</button>
            <button @click='count --'>减少</button>
        </div>
        <div id="method2">
            <input type="text" v-model='message'>
            <h1>{{ message.split('').reverse().join('') }}</h1>
        </div>
     </div>
</template>

<script>

export default {
     data () {
         return {
              count : 0,
              message : ""
         }
     }
}

</script>

在id:method1 里,我们做了一个对count进行+1,对count进行三元表达式来进行判断做出不同的显示

在id:method2 里,我进行了v-model指令和h1里message进行了双向绑定,随着message的改变h1里的值随着表达式的的改变而改变

注意示项,在官方提出来的这几种是不可行的

这是语句,不是表达式 
{{ var a = 1 }}
流控制也不会生效,请使用三元表达式 
{{ if (ok) { return message } }}

6.修饰赋

修饰符( Modifiers )是以半角句号, 指明的特殊后缀, 用于指出一个指令应该以特殊方式绑定。

应用场景 :

对于一些特殊的指令操作时需要,比方说对组件加事件,组织元素的默认行为,组织冒泡。等等一系列,官方文档有详细解说每一个修饰赋的具体用途

再次提示主逻辑代码都是写在.App.vue中,所有其它的组件代码都是写在componentes里

首我们先对components文件夹中创建一个myButton组件

<template>
    <button>按钮</button>
</template>

<script>
export default {

}
</script>

再在app.vue中写入

<template>
     <div>
         <my-button @click.native="buttonClick"></my-button>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     components : {
         myButton
     },
     methods : {
         buttonClick () {
             alert("原生点击")
         }
     }
}

</script>

我们可以尝试一下如果我们去掉.native的话你会发现组件根本出alert(原生点击)的弹框,这是为什么呢,正常的情况在一个单个组件内部自己使用v-on的事件,ok都不会有问题,如果在一个组件上定义一个指令事件,必须要用.native,这里大家一定要注意

####推荐很实用的demo

我们用jquery的时候经常会遇到这种场景,当我们一个layer层弹出来的时候,内部是一个超过整个屏幕长度的滚动,当我们滑动layer的时候会导致里面的滚动也会一起滚动起来,这个是一件很操蛋的事,在网上也有着很多相关解决的办法,vue可以通过修饰符来解决这个问题

index.html文件中加一个视口度适配,更好的来查看效果

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

app.vue文件中

<template>
     <div>
         <ul>
             <li v-for="item in list">
                 <h1>{{item}}</h1>
             </li>
         </ul>
         <div @touchmove.prevent class="layer"></div>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     data () {
         return {
             list : [1,2,3,4,5,6,7,8,9,10]
         }
     }
}

</script>

<style>
body,html {width:100%;height:100%}
h1{margin-top:10rem;}
.layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
</style>

此时我们打开chrome调试工具的时候我们会发当我们滑动layer层的,里面的滚动不会再滚动了,我们再试着把.prevent给去掉,会发现滚动再次出现,这个原理就是event.preventDefault来阻止默认事件事执行的。

实现原理,我们对layer层把它的touchmove滑动事件给干掉了,就不会触发滚动区域的滑动事件,个人认为这个场景每个项目都会用的到

再做一个表单的简单示例

<template>
     <div>
        <input type="text" v-model.trim="content">
        <input type="text" v-model = 'content'>
     </div>
</template>

<script>
export default {
     data () {
         return {
             content : ""
         }
     }
}
</script>

这个我们能发现当加入.trim的修饰符的时候给到第二个input的时候都是去掉前后空白符的,这个功能也就是去掉前后空白符,这也是很常用的场景,一些表单当用户输入的时候,有些用户会打出一个前后空白符,有一次我保用户数据给数据库,操作的时候还代码还好好的,突然一个空白字符引发的一场血案,要注意细节点

6. 过滤器

Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示:

其实本质上过滤器也就是一个或多个表达式,但是有极条件控制的表达式或者长业务逻辑的表达式写在mustache不够清楚,明了

在v-bind中也就是2.10的时候才支持这个功能,这个大家要对这个版本有一定的了解,正确的使用

应用场景 :

我说说我遇到过的应用场景,再把我应用的场景再加深一点逻辑

1.首先我们从后台拿到10个用户的手机,但是要把前7位掩码,做成*,然判断如果手机尾数是偶数的话,我们就显示已中奖,不是的话显示谢谢参与

<template>
     <div>
         <p v-for='tel in telephone'>{{tel | newtel}}</p>
     </div>
</template>

<script>
export default {
     data () {
         return {
             telephone : [
                 10000000000,
                 10000000001,
                 10000000002,
                 10000000003,
                 10000000004,
                 10000000005,
                 10000000006,
                 10000000007,
                 10000000008,
                 10000000009,
                 10000000000,
             ]
         }
     },
     filters : {
         newtel (value) {
             if(!value) return ''
             value = value.toString().substr(7,4)
             value = '*'.repeat(7)+value
             let endMember = value.substr(-1,1)
             if(endMember % 2){
                 value = value+'中奖'
             }else{
                 value = value+'谢谢参与'
             }
             return value
         }
     }
}
</script>

代码会析,在filters选项里有个newtel的函数,value则是函数中固定的一个参数,代码过滤前的值,但最后在管道符里我们不用把这个固定的参数写在调用里面,如果没有,则返回"",我们再取后四位,在前7位拼接7个*,这里我用到了es6新特性,repeat这个方法,原本我想用padStart可惜是es7的新性,babel不支持,再截取尾数,如果尾数%2是偶数则再后面加一个中奖,否则谢谢参与,最后把这个value的最终值返回出去

7.结合过滤器参数与v-bind过滤

以上过滤器原理也跟大家说了,我们进一步深化一下,如果两都结合使用

应用场景

当后台传给很多链接的地址的时候,每个链接要带上不同的参数,针对于这种场景我给大家实战一下

<template>
     <div>
         <a v-for='(url,index) in urlList' :href='url.url | getquery(url.name,url.age)'>{{url.url}}</a>
     </div>
</template>

<script>
export default {
     data () {
         return {
             urlList : [
                 {url : 'http://www.baidu.com',name :'ziksang',age : 20},
                 {url : 'http://www.google.com',name :'ziksang2',age : 30}
             ]
         }
     },
     filters : {
         getquery (value,name,age) {
             if(!value) return ""
             return `${value}?name=${name}&age=${age}`
         }
     }
}
</script>

在v-bind管道符中的getquery(第一个参,第二个参)

第一个参就是传给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 列表渲染 )

 

 

来自:https://zhuanlan.zhihu.com/p/26119383

 

扩展阅读

Vue.js开发实践:实现精巧的无限加载与分页功能
用 Vuex 构建一个笔记应用
前端框架 Vue 初探
Vue.js基本语法的介绍
Vue.js 快速入门

为您推荐

下一代的 JavaScript 客户端框架:Aurelia
基于jQuery的一个简单的图片查看器
史上最全 前端开发面试问题及答案整理
hackathon-starter - A boilerplate for Node.js web applications
Spring mvc 中使用 kaptcha 验证码

更多

Vue.js
Vue.js开发