vue.js基础

一、vue是什么

vue是一套构建用户界面的框架，想通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。

二、Vue安装

1.安装node.js

从node.js官网上下载并安装node，一直下一步，安装完成后，打开命令行工具，输入node -v 如果出现相应的版本号则说明安装成功。查看nmp的版本，最好是3.x以上。

2.安装淘宝镜像

在命令行工具中输入

npm install -g cnpm --registry=https://registry.npm.taobao.org 

安装之后输入cnpm -v，如果出现相应版本号，则成功。安装淘宝镜像的原因是可以提高安装速度，以后用npm的地方都用cnpm代替。

3.安装webpack

在命令行工具中输入

cnpm install webpack -g

同样用webpack -v来验证是否安装成功。

4.安装vue-cli脚手架构建工具

在命令行工具中输入

cnpm install vue-cli -g 

同样用vue -V验证是否安装成功，注意这里时大写的V。

三、如何使用vue-cli来构建项目

1.使用Git

在要存放工程的文件目录下右键选择Git Bash Here。

2.安装vue脚手架

输入

vue init webpack exprice

（项目名称不能为中文）

3.安装项目依赖

通过cd命令进入创建的工程目录，再输入cnpm install

4.安装vue路由模块和网络请求模块

输入

cnpm install vue-router vue-resource --save

每个目录的作用:

5.启动项目

输入

cnpm run dev

（注意由于服务器默认启动的是本地的8080端口，所以需要确保8080端口未被占用。)

四、简单的语法示例分析

<body>
<div id="app">
    <p>{{ message }}</p>  //使用{{}}实现数据绑定进行文本插值
</div>

<script>
new Vue({
  el: '#app',  //将该vue实例挂载到<div id=”app”></div>这个元素上。
  data: {
    message: 'hello'
  }
})
</script>
</body>

五、指令

指令用于在表达式的值改变时，将某些行为应用到DOM上。
v-bind：响应的更新html属性。可以缩写成：bind
v-on：事件监听。eg：<a v-on:click="doSomething"></a> 可以缩写成@，eg：<a @click="doSomething"></a>
v-if：根据表达式的值为true还是false来决定是否显示。
v-show：和v-if类似，同样是根据表达式的值来决定是否显示该元素。
v-for：循环语句，通常用来渲染一个列表。
v-model：数据的双向绑定。

***v-if和v-show的区别：

1.v-show不支持语法也不支持v-else

2.v-if的初始条件为假时，什么都不做。而v-show不管初始条件为什么，都会渲染。

3.v-if为false时，源代码不显示该元素，而v-show则会显示。

六、计算属性computed

复杂的逻辑一般都使用计算属性。

Computed与method的对比：computed是基于依赖缓存的，只要相关依赖没有变，就不会再次执行该属性，直接返回之前的值。而函数是只要发生渲染method就会执行该和函数，method是没有缓存的。

七、Vue中的重要选项

1.data：数据，存放要用的数据

注意data中的数据的写法，需要写在return里面，如下图：

2.Methods：方法，可以取到data中的数据

3.Watch：监听，一旦监听的对象发生变化就执行该方法

八、过滤器

用于改变数据的形式。
只能用在mustache插值和v-bind这两个地方。
过滤器可以串联。

九、Vue.js路由

路由就是用于设定访问路径并将路径和组件映射起来的，能通过不同url访问不同内容。传统的页面是通过使用超链接来实现页面切换跳转的，而使用路由就使其变成了路径之间的切换，即组件的切换。

路由的核心；更新视图不重新请求页面。

十、组件

1.组件的作用

组件是vue的核心之一，可以将页面的各个子模块看成一个组件，将这些模块拆分出来，这样可以使维护变得容易。

2.组件使用的规则

组件使用前需要先注册，且组件的注册需要写在挂载id之前。
组件名最好为小写，并且包含一个短杠。
一个组件下只能有一个并列的

3.全局组件

使用Vue.component进行全局注册，所有vue实例都会共享此组件。

4.局部组件

局部组件只能在引入当前的vue实例中有效，在当前vue实例中components属性加上引入进来的组件实例即可。

5.表行组件

表行组件不能直接写自定义的tag，而要使用is属性。
下图为错误示例：

下图为正确示例：

6.组件之间的通信

子组件只能在父组件的template中使用。
父组件向子组件传递数据：props
子组件向父组件传递数据：使用$on监听事件、$emit触发事件

十一、生命周期

beforeCreate：实例初始化之后，数据观测和事件配置之前被调用。

created：实例创建完成之后被调用。

beforeMount：在挂载之前被调用，在服务器端渲染期间不能被调用。

mounted：el被新创建的vm.$el替换并挂载到实例上之后调用该钩子，在服务器端渲染期间不能被调用。

updated：由于数据更改导致的虚拟DOM重新渲染之后会被调用。

activated：keep-alive组件激活时调用，在服务器端渲染期间不能被调用。

deactivated：keep-alive组件停用时被调用，在服务器端渲染期间不能被调用。

beforeDestroy：实例销毁之前被调用，在服务器端渲染期间不能被调用。

destroyed：vue实例销毁后调用，事件监听器会被移除，所有子实例而被销毁，在服务器端渲染期间不能被调用。

十二、过渡的css类名

如图所示，每个类名就在上图中不同时刻生效，v-是前缀，可以通过<transition name=”my-transition”>来重置前缀名，例如v-enter变成了my-transition-enter。

自定义过渡类名优先级会高于普通类名。