vue2学习详细

Vue.prototype.$xxproperty

Vue.prototype.$appName = ‘My App’
这样你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

new Vue({
beforeCreate: function () {
console.log(this.$appName)
}
})
控制台会打印出 My App。就这么简单！

“为什么 appName 要以 $ 开头？这很重要吗？它会怎样？”

$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

vue环境变量配置——process.env

在用vue框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。

平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。

下面开始：

配置环境的实现原理
实现原理就是采用node.js顶层对象中的process.env（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境

具体实例
1.安装依赖
npm install process

2.创建.env.dev 和.env.prod两个文件
注意文件要创建在根目录下面

.env.dev文件内容如下：

NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
/* 请求接口地址 */
VUE_APP_INTERFACE_URL="https://xxx"
/* proxy代理地址 */
VUE_APP_PROXYURL='http://xxx'

.env.prod文件内容如下：

NODE_ENV='production'
VUE_APP_TITLE='prod'
/* 请求接口地址 */
VUE_APP_INTERFACE="https://xxx"
```
3.设置项目启动时默认的环境
只需要在项目启动命令后面修改需要的环境就行了，例如npm run dev，把--mode dev改为--mode prod就变成了开发环境

package.json部分内容如下：

"scripts":{
	"dev":"vue-cli-service serve --mode dev",
	"prod":"vue-cli-service serve --mode prod"
}
4.查看环境是否配置成功
在main.js文件中打印当前环境，输出就成功了
console.log(process.env.NODE_ENV)

# $refs
vue $refs的基本用法
```html
<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>
复制代码
<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>
```
复制代码
一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

# vue使用心得
首先，vue.js是一个数据驱动视图的一个js框架，操作数据，然后实时反应到dom元素上的一个动态视图框架，它也是一个渐进式开发框架，比如，我用vue-cli搭建了一个本地开发环境，用nodejs跑了起来，当把vue引进来之后，要做项目还是远远不够的，就用到了vue全家桶
```txt
	      UI框架 ： element-ui
	      http请求工具：axios（个人推荐用这个）
	      cookie工具：vue-cookie
	      构建工具：vue-cli
	      路由插件：vue-router
	      状态管理工具：vuex
	      滚动条插件：vuescroll
	      兼容IE的插件：babel-polyfill（当然vue只兼容到IE9+）
```

如果平时项目中你用到了哪些框架及插件，就可以通过npm install，下载下来，引入到项目中去就ok了
个人觉得项目目录结构可以是这个样子的

![在这里插入图片描述](https://img-blog.csdnimg.cn/838e33b13ab740a4829e0fd52a855f79.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5qiL5qiL,size_15,color_FFFFFF,t_70,g_se,x_16#pic_center)
主要是src文件夹，assets主要用于放一些项目中的图片等之类的，compoents就放一些自己定义的组件，pages就放页面，当然都是vue文件啦，router放路由配置，server放一些静态目录什么的，放一些常量什么的都可以，store，熟悉vuex的小伙伴应该都知道，没错，就是放vuex的


#### 1.关于使用UI框架

一般我都是用element-ui这个ui框架，其中有一些ui组件特别好用，比如$message，提示组件，不用自己写，直接调用，就能用于增加，修改的一些功能，比如提示新增成功，修改成功等，还有按钮组件，弹出框组件等一些基本的组件，对于我自己写的其他代码后续几乎没有冲突，且灵活度高的，我就直接用了框架内的组件，但是一些可控性不强，且不够灵活，几乎不能改动的组件我就会选择自己写，比如树形控件，这个树形控件的样式特别单一，而且不可控，而且灵活度不高，我不是很喜欢，就利用vue的递归组件自己写树形控件，感兴趣的小伙伴可以看下我下篇博客，马上就发《vue如何用递归组件写树形控件》，总结一句话，灵活度高，就用框架，灵活度不高，就自己写，自己写的可控性很强！
#### 2.关于封装组件

有时候项目中经常会碰到这种情况，好几个页面的列表页除了表头不一样，几乎样式是一模一样的，这样的你就可以封装一个列表组件了，但是只适用于样式差不多的列表，如果你觉得都封装进一个组件里面，对后续开发的一些可控性不是很强，而且每个页面的需求都不一样，处理方式和方法都不很一样，那么我劝你还是老老实实自己写列表吧，因为你封装到一个组件中，对于每个页面的处理方式都要进行判断，这样会显得这个组件很臃肿，我觉得还不如分开写，所以是否要把一个功能模块封装进组件，灵活把握就可以了
#### 3.关于一些目录和http请求
关于一些目录，比如导航目录，一般是写死的，当然也有从后台获取的，我现在这个项目就是从后台获取目录，还有请求URL，和一些http请求，你就可以新建一个server目录，然后分模块的写道js文件夹里面，return出去，然后再在其他页面中引入，这样做的好处是，模块化管理，将常量和http请求进行统一管理，比如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/d9a53382d8c2437aa86d299abc74de1a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5qiL5qiL,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
我就把http请求进行了统一管理，然后暴露出去，将来有改动我就可以直接改这里就可以了

#### 4.关于vuex
下面说一说vuex，也许有许多小伙伴对于这个都不知道干嘛用的，根据我的理解，vuex并不是那么神秘，就是一个公共状态库，是互不联系的两个组件的通信桥梁，比如我又一个列表组件1，又有一个列表组件2。这两个组件完全不一样，丝毫没有联系的那种，但是它们之间需要通信，比如都需要根据一个布尔值show来进行显示还是隐藏，这样就可以把这个show放进vuex状态库里面，当这个show改变的时候，这两个列表组件就可以根据show的变化自动的进行显示隐藏了

#### 5.关于http请求写在哪里的问题

我一开始接触vuex的时候，vuex里面有一个actions，既可以进行同步操作，又可以进行异步操作，官网上是推荐将http异步请求放在actions里面，因为当时刚学，没有判断能力，就按照官网上来写，在vue文件里面只写逻辑代码，而把所有的http异步请求全部写在了actions里面，这样问题就来了，首先mutations里面的函数必须要用它来提交，而且vue里面通过引入import { mapGetters , mapActions} from 'vuex'，来获取到函数和状态，我发现写一个http需要写好多代码，我如果直接写道methods里面，就特别简单，后来我就在想到底放哪里简单些，综合了网上的一些看法，我觉得这跟个人代码风格有关系，官网是推荐写到actions里面，可是如果一个页面里面的一些http请求只是自己用，也不跟其他页面以及组件进行通信的话，我觉得没有必要写到vuex里面，写在methods里面反而简单些，反正到最后项目的数据都能流通就可以了，我觉得一些http请求得到的数据要和其他组件或页面共用的话，我觉得必须要放在vuex里面，这是最棒的办法，如果是自己在自己的小窝里小打小闹，也不影响别人，那么我们还是写在methods里面吧，毕竟别人又不用，为什么要把它驱逐家门呢，哈哈！！


# 安装
## 直接用 <script> 引入
直接用 <script> 引入
- 开发版本
- 生产版本
```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
```

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

## 命令行工具 (CLI)
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。


## 对不同构建版本的解释
完整版：同时包含编译器和运行时的版本。

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

## 运行时 + 编译器 vs. 只包含运行时
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：
```js
// 需要编译器
new Vue({
  template: '<div>{
  { hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
```

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：


## 开发环境 vs. 生产环境模式

# 声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
```html
<div id="app">
  {
  { message }}
</div>
```
```js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
```
除了文本插值，我们还可以像这样来绑定元素 attribute：
```html
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
```
```js
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
```
v-bind将元素节点的 attribute 和 Vue 实例的property 保持一致。

# 条件与循环
## 条件
```html
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
```
```js
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
```

## 循环
```html
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {
  { todo.text }}
    </li>
  </ol>
</div>
```
```js
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
```

# 处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
```html
<div id="app-6">
  <p>{
  { message }}</p>
  <input v-model="message">
</div>
```
```js
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
```

# 组件化应用构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
```js
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)
```
现在你可以用它构建另一个组件模板：
```html
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>
```

# Vue 实例
## 创建一个 Vue 实例
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：
```txt

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics
```

## 数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
```js
// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3
```
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如：
```js
vm.b = 'hi'
```
那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：
```js
data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}
```

这里唯一的例外是使用 `Object.freeze()`，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

```js
var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => t