vue2.0从入门到入坑

1.接触vue

从原生js、jq到接触vue，刚开始感觉真的非常不习惯，写html的时候，我就不习惯标签上大量的class，这下到vue，感觉更爆炸了，标签上全是指令，甚至还有逻辑，一度感到很暴躁，但是，深入接触之后，才发现vue的魅力。
为什么感觉反差很大呢？因为以前用js、jq都是直接操作DOM来进行一系列的操作，基本上写js、jq最多的就是document.getElementById()或者$()这样的选择元素了，但是vue基本上不需要你进行各种各样的DOM操作，因为vue是以数据驱动的，基本上所有的页面上的改变都是基于数据的变化，不过偶尔也需要去操作DOM，刚开始不怎么了解数据驱动，但是接触了之后，发现数据驱动真的是太美妙了啊，根本不需要进行DOM的操作，只需要对数据进行操作，页面就会发生响应，感觉就像打开了新世界的大门一样。

2.vue的安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

这是官网的命令行安装工具.
安装之后目录是这样的：

build和config都是webpack的配置文件，node_modules是项目的各种依赖包，src一般用来放项目的css、js、vue等文件。

我的文件目录是这样的：

resource用来放置psd、标注图，src下的common用来放置需要被引入的字体图标、js、scss文件，components来放置单文件组件.

下面来介绍各种文件的作用:

1. .babelrc是用来对es6语法进行转义.
2. .gitignore是不需要被git上传的文件.
3. package.json 项目的描述目录，里面包括了项目的开发依赖和运行依赖
4. .editorconfig是代码书写格式

Vue的基本语法

1 . 插值

<span>{{ msg }}</span>

msg可以是data中的值，也可以是计算属性返回的值.在插值中也可以写简单的表达式.

2 . v-bind 指令

这个指令在vue中用的非常多，所以经常简写为:，一般用来绑定属性，比如class，可以这样写:

<span :class="msg"></span>// msg为data中的值或者为计算属性

也可以这样写:

<span :class="{active: isActive}"></span>

这样class的值就由isActive决定，如果isActive为true，则class为active

甚至可以写一个表达式:

<span :class="{active: isActive===1}"></span>

3 .计算属性

计算属性一般都是像下面这样:

computed: {
    say() {
        return 'fzz' + this.msg;
    }
}

写在computed之内，并且要返回一个值，这样就可以在插值中或者v-bind指令中调用.

4 .v-on

这个指令和addEventListener类似，可以用来监听事件，一般用@来简写，比如：

<span @click="do"></span>

这样当点击span之后就会调用do方法

另外，@click后面还可以带参数，比如:

<span @click.stop="do"></span>

这样click事件就不会冒泡，其他的参数还有prevent，once等等

5.methods

methods在组件中可以用来定义一些方法：

methods: {
    hello() {
        alert('hello');
    }
}

方法一般是在事件中被调用，不过也可以在v-show,v-if等指令中调用.

6 .v-if,v-show

v-if可以根据条件来判断是否渲染这个元素，v-show则是元素已经被渲染，通过style.display来控制是否显示这个元素.

<span v-if="active"></span>
<span v-show="active"></span>

也可以在后面写表达式或者计算属性

<span v-if="1===2"></span>
<span v-if="flag"></span>

computed: {
    flag() {
        return this.msg === 'haha';
    }
}

7.filters过滤

过滤器一般用来对{{ }}中的值进行过滤，例如

<span>{{ msg | upper }}</span>
filters: {
    upper(msg) {
        return msg.toString().toUpperCase();
    }
}

upper中的msg代表被过滤的值.

8.v-for遍历

v-for可以对数据进行遍历，从而渲染元素，例如:

<ul>
    <li v-for="item in items"></li>
</ul>
data() {
    return {
        items: [1,2,3]
    }
}

也可以这样:

<ul>
    <li v-for="item in 10></li>
</ul>

这样可以渲染出10个li

还可以这样:

<template v-for="item in items">
    <h2>curry</h2>
    <p>curry is very cool!</p>
</template>
data() {
    return{
        items: [1,2,3]
    };
}

这样用template充当容器，最后渲染出的结果并不会包含template元素

以上就是vue的基本语法了