VUE2.0全套demo讲解 基础1（模板语法）

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

列一个清单吧，其实入门就是基础，如何入门我下面总结一下我展示结的流程，用心去给大家写一个就像我标题写的掘金史上最详细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，这里大家一定要注意