title: Vue学习笔记
date: 2020-7-1
tags: [vue2.0]
categories: 前端技术
toc: true
cover: https://gitee.com/hyj12704338...

Vue 2.0前言

Vue的官方文档可能是我见过的最好的开发文档了，所以如果是学习Vue建议还是阅读官方文档吧。在这里仅仅是基于我自己的理解对于Vue2.0知识的整理，便于梳理知识结构

1. 网站交互方式

1.1 单页应用SPA

多页面
- 点击跳转刷新，用户体验不好
- 有利于SEO搜索引擎搜索
单页面应用(Single Page Application，简称SPA)
- 开发方式好，前后端分离，开发效率高，可维护性好
  - 服务端不关心页面，只关心数据处理
  - 客户端不关心数据库操作，只通过接口和服务器交互数据
- 用户体验好，就像原生客户端软件一样使用
- 只需要加载渲染局部视图即可，不需要整页刷新
- 单页应用开发技术复杂，所以诞生了一堆开发框架
  - AngularJS
    - google开发
    - 为前端带来了MVVM开发模式
    - MVVM（Model-View-ViewModel）：数据驱动视图
  - ReactJS
    - facebook
    - 提出组件化
  - VueJS
    - Vue借鉴了前两种，取长补短
- 单页面技术已经很成熟，但是大部分不兼容低版本游览器
- 单页应用由于数据都是异步加载过来的，不利于SEO( 现在有基于Vue的服务端渲染框架nuxt ）

1.2 单页应用SPA实现原理

前后端分离+前端路由

后端Nodejs，使用Express监视对应请求

app=express()
app.get("/",function(request,response){
    //处理
    //然后把结果添加到response中
    response.json()
})

前端工作（以下例子使用原生 js 实现，但是在Vue框架中用vue-router插件更加简单)

前台请求数据，并渲染页面

前端路由不同url装载不同页面

find-music,my-music,friend多个页面,在其页面向服务端取数据进行渲染，然后放入index的容器

中显示

注意：下载jquery；sublime安装sublimeServer实现启动本地服务器（不安装就是直接打开本地文件，不支持跨域找下载的jquery.js文件）


查找音乐


我的音乐


朋友

以上的方式构建单页面应用太复杂，所以出现了Vue等框架

2.初识Vue

官网：https://cn.vuejs.org/

安装：npm install vue

Vue是什么？

优秀的前端js开发框架
可以轻松构建SPA单页面应用
通过指令扩展了HTML，通过表达式绑定数据到HTML
极大程度解放DOM操作

2.1 Vue的特点

Vue是为了克服 HTML 在构建应用上的不足而设计的。其核心特点：

MVVM
双向数据绑定
组件化
渐进式

2.2 HelloWorld

类似于模板引擎,有{{ 变量名 }}语法
不同于模板引擎的是可以通过 app1这个变量直接操作DOM元素，不必再$(#id名)来获取DOM元素了




    


    
        {{1+1}}
        {{"hello"+"world"}}
        {{message}}

2.3 双向数据绑定

什么是双向数据绑定？

当数据发生变化时，DOM元素会自动更新数据

当表单发生变化时，数据也会自动更新

v-model指令




    


    
        {{message}}

3.Vue的基本知识

在html页面，通过script方式引入的vue.js

使用vue-cli工具，构建更加复杂的Vue项目，可以在项目中使用.vue单文件进行vue代码的编写(在大型项目中使用这种方式)

3.1 Vue实例

把Vue实例，看成一个函数Vue()，这个函数的参数是一个对象Vue({})，而el,data,created,methods,computed,watch看成是对象的属性

new Vue({
    //el告诉vue管理模板的入口，div中的{{  }}的模板语法都会被渲染，el不能是body和html
    el: '#app',
    
    //绑定的成员数据，这种数据被称为响应式数据。(什么是响应式数据？数据驱动视图，当数据发生变化时，所有绑定该数据的DOM都会跟着改变)
    data: {
        msg: ''
    },
   //生命周期函数,后面会介绍。原本应该是对象的属性形式created:function(){}，但是一般简写成以下形式
   created(){
    
    },
    
   //vue实例中的方法全部写在里面，通过v-on将方法绑定在Dom元素上触发
   methods：{
       fun1(){
            //vue中可以通过this.msg获取data中变量的值
              //也可以通过this.fun2()访问到methods中的函数
        }
    },
    
    //计算属性,与绑定函数不同的是，计算属性优先从缓存加载。a是变量名，且不用再data中声明，直接用于 {{a}} 之中
    computed：{
       a:function(){
           //一定有return,return的值放到a中，通过{{ a }}使用
       }
    },
    //侦听属性，用来监听data中变量的变化
    watch:{
        msg:function(newMessage,oldMessage){
            //默认参数是：改变前的值，改变后的值
        }         
    }
})

属性data

data的值是一个对象，对象中的变量只要发生变化，则视图就会马上相应，视图中的数据就会变成新的值。

注意：

只有data中的变量才是响应式的
使用 Object.freeze()，这会阻止修改data中的对象类型的变量，也意味着响应系统无法再追踪变化。
```
var obj = {
  name:"张三",
  age:18
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data:{
      stu:obj
  }
})
```

生命周期函数(待深入分析)

var vm=new Vue({
  data: {
    a: 1
  },
    
  ////生命周期函数
    
  //属性写法
  created: function () {
    // this 指向 vm 实例
    console.log('a is: ' + this.a)
  },
    
  //简写形式
  mounted(){
    
  },

})

注意：不要再Vue实例的属性上使用箭头函数，否则会报错。因为箭头函数中this的指向和上下文有关，并不一定会指向Vue的实例化后的对象

//都会报错
created: () => console.log(this.a),
vm.$watch('a', (oldValue,newValue) =>{ })

Vue生命周期详解

beforeCreate=>创建当前页面vue实例
|
=>
|
created=>data,method,watch,computed可用
|
=>调用render函数，生成虚拟Dom
|
beforeMount=>虚拟Dom创建完成
|
=>调用patch函数，创建真实Dom
|
mounted =>真实Dom创建完成，并渲染到页面

如果数据变化，不一定会触发beforeUpdate，updated函数，只有绑定在视图上的数据变化才会触发

=>绑定视图的数据发生变动，根据真实的Dom，生成一个虚拟Dom，将虚拟Dom上对应节点的数据进行同样变动
|
beforeUpdate
|
=>调用patch函数（使用diff算法），将虚拟Dom的改动更新到真实Dom上
|
updated

响应式原理（数据变动如何触发视图更新）

diff算法

计算属性 computed

{{ }}或者是v-bind绑定的数据，中有复杂的计算时，可以写在计算属性中。

我们需要数据B，但是数据B依赖了数据A,一旦数据A发生变化,B也会发生变化----->数据B改成计算属性

计算属性感知的是函数体内部data数据的变化

计算属性，与绑定函数不同的是，计算属性优先从缓存加，当数据A未发生变化时,访问计算属性B会立即返回之前的计算结果，而不必再次执行函数。只有依赖的数据A发生改变时,它才会重新求值。

B是变量名，且不用再data中声明，可直接用于 {{ }} 之中

计算属性B的 getter:

computed: {
      B: function () {
          //函数体，一定有return,return的值放到B中，通过{{ B }}使用
        return '改变后'+this.A
          
     //简写
      B(){
          //函数体一定有return,return的值放到B中，通过{{ B }}使用
         return '改变后'+this.A
      }
}

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {//newValue是fullName变化后的新值
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

助记: getter是函数内部变量变化触发,fullName得到return的值.setter是fullName变化触发,内部执行操作

侦听器 watch

当需要在数据变化时执行异步或开销较大的操作时,通常使用watch

监听的数据是data中的值

watch监听变量对应的函数，不能使用箭头函数

注意:

如果监听的是一个对象

student: {
  name: "",
  score: {
    math: 32,
    english: 80,
  },
  selectedCourse: ["操作系统", "数据结构"],
}

需要采用下面的方法，只要student里面的任何内容变化，就会触发

watch: {
     student: {
         handler: function() {
            //监测到question变化了，进行的操作  
         },
         deep: true
     }
}

如果只是监听对象的某个键,上面的方法太浪费性能了

watch: {
  "student.name": {
    handler:function () {
      console.log("触发执行");
    }
  }
},

或者

watch: {
  "student.name":function () {
      console.log("触发执行");
  }
},

计算属性和监听器

注意：

watch是监听data中的数据，数据变化，触发function中

compute是function内部数据变化，返回给外面的值（默认的getter，也可以设置setter）

3.2 Vue指令

1.html中绑定data数据

使用{{ }}

文本
使用“Mustache”语法 (双大括号) ,会将双大括号中的值当作变量，把在data中的具体数据渲染出来
```
{{ msg }}
```
双大括号之间还可以做简单的js运算（复杂的运算，一般会放到computed中）
```
{{ num++ }}
{{ arr.split('').reverse().join('') }}
```
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
```
 {{ msg }}
```
v-text
```
{{msg}}
```
v-html 若message是html代码，不用这个属性只会直接把html代码当成字符串显示
v-pre 跳过这个元素和它的子元素的编译过程。直接显示{{ message }}

2.标签属性绑定data数据

不使用{{ }},直接写变量名即可

有一些指定绑定时需要参数，放在指令名称之后的冒号后面

url是data中的变量

...
//简写
...

3.属性绑定v-bind

基本用法

绑定属性

v-bind:控制html标签的属性值，将属性和变量绑定。

//绑定属性disabled

//简写

//绑定属性href
...
//简写
...

动态参数

[ ]中是变量attributeName，可以动态的指定绑定的属性是什么,比如:href

...

注意：

当某个属性值是布尔值时，直接disable="true"相当于，把一个字符串赋值给属性。用绑定赋值，会把字符串ture转变为布尔值
```
//true是不可点击
```
绑定的属性的值是对象
对象的属性值是true，则保留该属性；属性值是flase，则去除该属性；
```
data: {
    obj:{
        active: true, 
        text-danger: false
     }
}
```
对应的实际的效果是
绑定的属性的值是数组
```
data: {
    arr:['active','text-danger']
}
```
对应的实际的效果是

用于绑定class

对象语法：动态切换class,只能切换该属性是否存在，对象属性值为真，则该属性存在，都则不存在

对象中传入一个字段(定义的class名，要用引号引起来)
上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。
对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存
和如下 data：
```
data: {
  isActive: true,
  hasError: false
}
```
结果渲染为：
绑定的数据对象不必内联定义在模板里：
```
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
```
渲染的结果和上面一样。

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

data: {
  isActive: true,
  error: null
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法:切换class属性，可以放置三元表达式，切换两个不同属性，而对象是切换class某个属性是否存在

基础用法
渲染为：

我们可以把一个数组元素替换为变量


data:{
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：

如果你也想根据条件切换列表中的 class，可以用三元表达式：
这样写将始终添加 errorClass，但是只有在 isActive 是 truthy时才添加 activeClass。
三元表达式有些繁琐。所以在数组语法中也可以使用对象语法：

用于绑定style

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：


data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：


data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

4.事件绑定v-on

v-on:绑定处理事件=“处理函数”，v-on:简写@

绑定方法
v-on:控制html标签的方法，将方法和函数绑定。
```
 //addNum是methods中定义的方法
```
动态参数
[ ]中是变量attributeName，可以动态的指定绑定的方法,比如:click
绑定的方法可以传递参数
```
  
```
也可以用 JavaScript 直接调用方法 example.add()
有时候绑定的函数需要访问原始的 DOM 事件，可以用特殊变量 $event 把它作为参数传入方法
```
// ...
methods: {
  warn: function (message, event) {//第个参数接收到“警告”字符串，第二个参数是$event
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}
```
在事件处理程序中调用 event.preventDefault() 【阻止Dom元素默认行为】或 event.stopPropagation() 【阻止冒泡传递】是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符和按键修饰符
事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
```
...



...






...
```
注意：
- 修饰符可以串联，但是使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
- 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符

内联处理

5.表单绑定v-model

v-model 指令在表单、</code> 及 <code><select> </code>元素上创建双向数据绑定。</p> <p><code>v-model</code>本质上是<code>v-bind</code>绑定元素属性和<code>v-on</code>绑定元素事件的组合</p> <ul> <li>text 和 textarea 元素使用 <code>value</code> 属性和 <code>input</code> 事件；</li> <li>checkbox 和 radio 使用 <code>checked</code> 属性和 <code>change</code> 事件；</li> <li>select 字段将 <code>value</code> 作为 prop 并将 <code>change</code> 作为事件。</li> </ul> <p><strong>举例：</strong></p> <ul> <li><p>文本框</p><p>输入框显示的是message绑定的值</p><pre><code class="html"><input v-model="message" placeholder="edit me"></code></pre></li> <li><p>多行文本</p><pre><code class="html"><textarea v-model="message" placeholder="add multiple lines">

注意：在文本区域插值 ({{text}}) 并不会生效

复选框

单个复选框。这里面的v-modle是布尔值，复选框选中时checked变量是true，反之是flase

多个复选框。这里面的v-modle值是空数组，复选框选中时，会把对应的value值按选中的顺序push到空数组中；取消选中，会直接把数组中对应的value值删除


    
  
  Jack
    
  
  John
  
  

  Checked names: {{ checkedNames }}

new Vue({
  el: '#example',
  data: {
    checkedNames: [] //因为是多选，所以是数组
  }
})

单选按钮。这里面的v-modle值，选中时是对应的value值


    
  
  One
  

  
  Two
  

  Picked: {{ picked }}

new Vue({
  el: '#example',
  data: {
    picked: ''
  }
})

下拉选择框。选中时v-model值是对应中的值，添加value属性，则是对用option中value的值


  
  Selected: {{ selected }}

new Vue({
  el: '#example',
  data: {
    selected: ''
  }
})

用 v-for 渲染下拉选择框。v-model的值是选中option的value值


Selected: {{ selected }}

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

修饰符： .lazy .number .trim

//输入完成后失去焦点后，才渲染数据，不是只要输入变化，就一直从新渲染

//转成数字

//去掉空白字符

6.条件渲染v-if

v-if 和v-else

//可以控制 html元素和

vue学习整理

Vue 2.0前言

1. 网站交互方式

1.1 单页应用SPA

1.2 单页应用SPA实现原理

2.初识Vue

2.1 Vue的特点

2.2 HelloWorld

{{1+1}}

{{"hello"+"world"}}

{{message}}

2.3 双向数据绑定

v-model指令

{{message}}

3.Vue的基本知识

3.1 Vue实例

属性data

生命周期函数(待深入分析)

计算属性 computed

侦听器 watch

计算属性和监听器

3.2 Vue指令

1.html中绑定data数据

2.标签属性绑定data数据

3.属性绑定v-bind

基本用法

用于绑定class

用于绑定style

4.事件绑定v-on

5.表单绑定v-model

6.条件渲染v-if

Vue is awesome!

1

2

Hello!

7.列表渲染v-for

6.自定义指令

定义自定义指令

使用自定义指令

3.3 过滤器

定义过滤器

过滤器的使用

3.4 Vue组件

组件特点

定义及使用组件

组件模板的定义

每个组件实例互不影响

组件嵌套

组件通讯

插槽

组件上支持v-model

动态组件

异步组件（待补充）

3.5 特殊特性

1. ref操作dom元素

2.emit定义事件

4.过渡和动画(待补充)

列表过度

动画过渡

5.Vue发送网络请求

接口服务器

明确接口规则是什么

postman测试接口

发送请求

6.vue-cil工具

使用步骤

目录结构分析

.vue文件结构

7.vue-router

路由基础

动态路由

从数据中获取url标识

总结下

重定向

编程式导航

嵌套路由

路由守卫

补充

8.Vuex

9. 案例

7.列表渲染`v-for`