Vue学习

对于一个只接触过后端程序的程序猿来说，看到前端代码，那是一个头两个大。而且最近几年前端学习的成本和难度在逐渐加大，可能连很多前端程序员都吃不消了。但是现在前端连全栈的事情都可以做了，为了不被淘汰，还是得了解了解里面的东西的，所以，来开个坑记录下学习vue.js的过程。

1.Vue.js概述

vue是一个渐进式的前端js框架，说是框架其实不太准确，因为vue本身和jquery一样，是对js的封装，如果算上vue生态里的其他工具，那么可以称得上是一个框架的体量了。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.安装与环境搭建

2.1vue多页面应用文件引用

（1）官网拷贝:

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

（2）使用npm/cnpm安装（前提是安装了node.js和cnpm）

2.2vue-cli构建SPA应用

cnpm install -g vue-cli
vue init webpack-simple projectName
vue init webpack projectName2

使用脚手架工具工件vue项目模板后，需要特别注意的点就是要安装依赖包，具体操作就是cd到项目目录下执行命令,之后如果想运行，可以看package.json文件查看如下内容：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

dev和build键值指明了运行的语句的键，所以接下来运行cnpm run dev/build即可启动项目

3.Vue配置介绍

build文件夹：build文件夹下的主要内容是打包的配置文件；config文件夹：打包的配置；src文件夹：项目源码。需要关注的主要是两个配置文件，一个是build文件夹下的webpack.base.conf.js文件和config文件夹下的index.js文件。之后主要的配置修改都在这两个文件。

4.Vue语法

4.1模板语法

Mustache双向绑定语法：{{msg}}需要在data里面定义之后即可使用
Html赋值：v-html = ""标签输出而不是文本输出
绑定属性：v-bind:id=""
表达式操作：{{true? "Yes":"No"}}
文本赋值：v-text=""
指令判断：v-if = ""
过滤器

4.2Class和Style绑定

对象语法：v-binf:class="{active:isActive, 'text-danger':hasError}"
数组语法
style语法：v-bind:style="{color:activeColor, fontSize:fontSize+'px'}"

4.3条件渲染

v-if , v-else , v-else-if, v-show , v-cloak

4.4事件处理器

5.Vue前端路由

前端路由一般使用在单页面前端界面中,因为加载界面并不是由后端返回之后，那么就要前端来指定下一个加载的界面
（1）vue-router来构建SPA，<router-link>/或者this.$router.push({path:''})，可以看做a标签。
（2）<router-view>标签用来跳转之后的渲染。
四个路由：动态路由匹配，嵌套路由，编程式路由，命名路由和命名视图

5.1动态路由

动态路由使用场景如：商城详情页面，页面相同，但是根据商品信息加载的东西不同，那么就可以以商品id为主键查找数据库生成页面

模式	匹配路径	￥route.params
/user/:username	/user/evan	{username:'evan'}
/user/:username/post/:post_id	/user/evan/post/123	{username:'evan', post_id:123}