史上最详细VUE2.0全套demo讲解 基础1（模板语法）

时间  2019-11-05
标签 史上 详细 vue2.0 vue 全套 demo 讲解 基础 模板 语法 繁體版
原文   原文链接

做者 : 混元霹雳手 ziksangjavascript

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

列一个清单吧，其实入门就是基础，如何入门我下面总结一下我展现结的流程，用心去给你们写一个就像我标题写的掘金史上最详细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安装教程地址vue

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

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

其它咱们先不用管，基础部分咱们只要对app.vue文件进行改动就能够，而后复制个人demo代码就能够看到全部讲解的demo效果es6

模板语法chrome

1.文本

数据绑定最多见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
Mustache 标签将会被替代为对应数据对象上 world 属性的值 ,并且一直会监听world的值，一但改变会跟着改变vue-cli

应用场景 ： 能够说到处都用的到 数据库

<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过滤

以上过滤器原理也跟你们说了，咱们进一步深化一下，若是两都结合使用

应用场景

当后台传给不少连接的地址的时候，每一个连接要带上不一样的参数，好比https//www.baidu.com?user=ziksang&age=20,针对于这种场景我给你们实战一下

<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 列表渲染）

渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学， 微信 zzx1994428 QQ494755899

支持我继续创做和感到有收获的话，请向我打赏点吧

若是转载请标注出自@混元霹雳手ziksang

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程