Vue学习笔记

Vue.js 是什么

        Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

可以创建一个 .html 文件，然后通过如下方式引入 Vue：

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

环境搭建

NPM：

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue
#官方手机架
$ npm install -g vue-cli
#使用方式
$ vue init webpack my-project

根据需要安装插件yes or no,一直回车，脚手架就生成了。

脚手架结构剖博客模块管理析

再开始写项目之前，我们需要弄清什么地方写什么代码。

build文件夹

webpack配置文件。此处配置webpack规则。整个项目是通过webpack支持的。比如你要使用less，你需要在webapck规则里使用less。

src 文件夹

撸码的地方～基本你所有的代码都在这一块完成。

assets文件夹

存放web中引用的图片 媒体资源。

components文件夹

主要存放可复用组件，你可以在任意页面中复用这些组件。

router文件夹

index.js 路由配置文件。在此处配置各个页面的跳转引用关系。

APP.vue

这里看一看做页面的根部。我们可以在这个页面进行一些css reset 操作。

main.js

根逻辑，页面加载首先会加载这份js文件。

static文件夹

主要存放外部引用资源。比如xxx.min.js

index.html

vue是spa应用，所以只有一个入口，也就是index文件，这里我们进行一些不可更改资源（比如某某库）的引用，和html页面meta 、title之类的设定。

vue如何处理dom显示，样式切换，动态样式

watch 和 computed的 简析

vue提供了2个动态监测data的函数，一个是watch，一个是computed。

watch： 主要监测已经存在的data，处理data变化后的钩子

computed： 处理一个已存在的data，返回一个data

vuex 是一个比较好的例子，可以用来学习监测，什么时候用什么方法去处理这些变化。 

v-for 列表渲染机制

v-for 是我认为vue中一个非常非常强大的指令，所有规律性动态数据的展示，都可以用for指令来完成。
v-for是非常强大，可以追踪循环体内任意一个值的变化，针对变化来单独渲染。

         v－for 建议仔细阅读官方文档，而不是通读。在项目中，我们应该养成习惯。对于可变化的，规律性数据都采用for指令渲染。 我之所以又把for指令写了一遍，是因为我在开始写vue时，根本就没有活用for指令的简便和强大，还是古老的ul li 循环，繁杂的事件绑定委托。估计人类本性对一个东西还不太了解的时候会习惯性的用自己熟悉的方式去操作的原因。

vue中引入组件以及父子组件的数据交互

关于组件，任意vue文件你都可以看做一个组件。 在项目中我们一般使用的应该都是单文件组件，单文件组件与页面结构无异，是具有完整功能的一个模块。比如一个评论框，你就可以剥离成一个组件，在任意页面文件中引入这个组件。

 

vue过滤器

在有一些业务场景需要对数据进行一些转换，比如后端图片地址的前缀匹配，这个时候filters就派上大用场了。看个例子感受一下。

 

vue路由

路由对于spa应用的重要性不言而喻，整个应用的页面关系都是通过路由定义的。我们先来看看一个路由文件大致是什么样子

 

vue 使用history模式，我们就可以去使用history的API，需要在路由配置中启用。默认hash模式，history模式也是一般应用的常用模式。

//切换当前地址，同 history.replaceState
 this.$router.replace({name: 'list'})  
//向history推入一级，同history.push
 this.$router.push({name: 'list'})  
//添加参数
 this.$router.push({name: 'list', query: {setting: 'setting'}})

//监测路由变化
watch:{
      '$route': function () {
       //处理事件
      }
    },


》》》》可以在页面任意处打印this.$route查看路由对象

vue的路由配置相对来说，是比较简单的，阅读一遍router文档，就可以快速上手。

路由是非常重要的一块，在动手开始写你的vue项目之前，你非常有必要通读一遍路由文档。而不是碰到问题再去解决。嵌套路由，动态路由会对你的开发起到非常有用的帮助。官方路由

可监测的全局变量——vuex

项目开发中，往往我们会有一些全局变量，但是正常全局变量，vue是不能监测的，这个时候vuex就派上用场了。 vuex官方文档

npm install vuex --save

／／安装好vuex后，我们先新建一个store文件夹，存放vuex相关文件，如下图所示
>>>>> index.js

import Vue from 'vue'
import Vuex from 'vuex'
import modulesApp from './modules/app'  //引入一个app模块
Vue.use(Vuex)

let store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    app: modulesApp
  }
})

export default store

———————————————— 分割线——————————————————

>>>>>app.js    //这里是个我的示例结构，可以查阅文档选择自己喜欢的书写方式

let state = {
  height: document.documentElement.scrollHeight + 'px',
  total: 1,
  list: [],

};

let getters = {};

let mutations = {
  height: state => state.height = document.documentElement.scrollHeight + 'px',
  totalChange (state, total) {
    state.total = total
  },
  listChange (state, list) {
    state.list = list
  },


};

let actions = {};

export default {
  state,
  getters,
  mutations,
  actions
}