Vue2+3基础

第一个Vue程序

如何导入?

使用script进行Vue全局设置：

指定Vue实例挂载的位置

， Vue和js一样，都需要在script里写

第一步创建vue实例

1.为什么要new vue（），直接调用Vue不行吗？

　　不行，因为如果直接调用Vue（）会报如下错误：

2.关于vue构造函数：options

　　options翻译为多个选项

Vue框架要求这个options参数必须是一个纯粹的js对象：{ }

在{ }对象中才能大量编写Key：value键值对

一个Key：value就是一个配置项，通过options参数给Vue实例指定多个配置项

3.关于template配置项：

template翻译为模板，用来指定模板语句，模板语句是一个字符串形式的：‘ ’

什么是模板语句？

　　Vue框架自己制定了一些具有特殊含义的特殊符号，有自己的语法规则，模板语句可以是一个纯粹的HTML代码，也可以是HTML+Vue，

　　template后边的模板语句会被Vue框架的编译器进行编译，转化为浏览器认识的HTML代码。

const myVue = new Vue({
    template:'<h1>Hello! Vue!!</h1>'
})
myVue.$mount('#app')

z在浏览器当中可以看到，没有div，只有模板语句，他是直接将id为app 的div替换成HTML语句的！

2.模板语句的数据来源

1.谁可以给模板语句提供数据支持呢？data选项

2.data选项的数据类型是什么？Object |Function（对象或者函数），也就是说，可以是数组。

3.data配置项专业叫法：Vue实例的数据对象（data实际上是整个Vue实例提供数据来源的）

4.如果data是对象，对象必须是纯粹的对象（含有0个或多个Key：value键值对）

5.data数据如何动态插入到模板语句中？

{{ }}，这是Vue自己搞的一套语法，称为模板语法中的插值语法（胡子语法）

换行用 ` 或者+，注意：在{这里不能有字符包括空格{ }这里不能有字符包括空格}

3.template的配置项解释

1.template后边指定的是模板语句，但是模板语句只能有一个根节点，想多写加个div在div里边写

2.只要data中的数据发生变化，模板语句一定会重新编译。

3.可以不用template写模板语句，可以直接写在HTML里，这样挂载位置的元素也不会被替换。

关于￥mount（‘#app’）

在Vue中有一个el配置项

el的作用和￥mount（）作用一样，都可以实现对Vue实例对象的挂载

el : '#app' == myvue.$mount('#app')

Vue的一夫一妻制

一个Vue实例只能接管一个容器,1对1

Vue核心技术（重点）

模板语法之插值语法{{}}

{{主要研究这里可以写什么？}}
1.在data中声明的变量、函数等都可以
2.常量都可以
3.只要是合法的JS表达式都可以

4.模板表达式都被放在沙盒中，如下能使用

模板语法之指令

指令语法：

1.什么是指令语法？有什么作用？

2.Vue框架中的所有指令都是v-开头

3.插值是写在标签体当中的，指令写在HTML的标签属性上。

4.指令语法规则：

　　指令的完整语法格式：

　　　　<Html标签 v-指令名:参数=“JS表达式”></Html标签>

　　注意指令表达式中不能再添加一个{{}}

不是所有的指令都需要参数和表达式

5.v-once 指令

　　作用：使用该指令后标签只渲染一次，所有子节点及元素都视为静态内容跳过，不会更新。

6.v-if="表达式"指令

作用：表达式的执行结果是一个布尔类型true/false，T成立，F不成立

7.v-bind指令

作用：用来使得某个属性的值成为动态效果

语法格式：v-bind参数="表达式" / :参数=“表达式”

来说说话bind像的model

v-bind和v-model都可以完成数据的动态绑定

v-bind是单项的数据绑定，可以用在任何标签上

v-model是双向的数据绑定，只能用在表单类元素上：input，select，textarea，这种和用户交互的标签上。

v-bind和v-model的简写方式：

bind　　v-bind:参数="表达式"　　简写　　:参数=“表达式”

model　　v-model:value="表达式"　　简写　　v-model=“表达式”

用v-model交互，bind不交互，以下是v-model，如果是bind，即使左边改变右边也不变

MVVM架构思想

将Model和View视图分离开，当View变化后，VM核心自动去更新Model，不需要自己写DOM的js代码。开发效率提高

认识VM

vue框架也收到MVVM思想启发，创建的Vue实例一般用vm命名

通过vm实例可以访问那些属性？

带$的是公开属性，一般程序员使用

带_的是私有属性，供Vue框架底层使用

通过vm也可以访问Vue实例对象原型对象上的属性：vm.$delete

为什么Vm可以获取到msg？

因为数据代理机制

数据代理机制基于object.defineProperty()

数据代理机制就是用一个临时对象去间接访问对象，达到直接访问的效果。

数据代理不会给$和_做代理，怕出错

data可以是对象，也可以是函数，学到组件就知道了

配置项enumerable，configurable

vue事件绑定，需要在Method里写回调函数才能调用

没加占位符

加了

this

method方法没有做数据代理，就是用变量代替

事件修饰符

@wheel是鼠标滚轮滑动

@keydown键盘按下不弹起发生

@keyup键盘按下并谈起发生

网站里边输入用户名密码回车自动获取id和ps就是用keyup事件所传的event对象的键值判断是否等于回车13自动登录的。

按键修饰符

常用的有修饰符，不常用的想用只能自定义了，或者直接在后边.key，就上边是说的根据获取的键值去判断是否是想要的目标值ASII

反转字符串

使用Vue原有属性经过一系列运算得到一个新的属性，叫做计算属性。

data对象当中的属性可以叫做Vue的原有属性。

语法格式
　　　　computed : {

　　　　计算属性1：{

　　　　set(val){}

　　　　get(val){}

　　　　}

简写就是

　　computed：{

　　计算属性（）{

　　return ？

　　}

作用：代码复用，容易维护，效率高

计算属性简写格式和方法格式一样

watch监听

watch：{

}

属性简写

可以监视多个属性，用哪个监视哪个名字

immediate：true 立即执行

immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.

有一个固定的方法：handler（newValue，oldValue）{}

如何获取new和old？

可以使用v-model指令双向绑定，用哪个就绑定哪个watch里的属性

this还是当前Vue实例。

如果该函数是箭头函数this就是window对象。

深度监视：当监视的属性里有很多属性要监视时，可以使用deep：true属性，就顶如(a.*)

handler：用来获取之前数据和现在改完数据

后期想添加监视怎么办？

和直接写有什么区别？

一个是一开始作为属性写到对象中，一个是后期通过调用api实现

当只调用handler属性时，可以直接简写，handler就像number的有参构造一样

后期监视简写

箭头函数（）=>{}默认是找上级的this，但是不简写function（）本身是window就不行

在Vue里加强了class和style

class绑定之字符串形式

v-bind不仅能绑定字符串，还可以绑定对象或者数组，所以.class样式可以与bind连用，实现动静结合

可以用true还是false选择用哪个JS样式

已经变成Vue的形状了，悲

条件渲染

关于v-if、v-else、v-else-if指令，就像后端的ifelse一样，成立立即执行。

v-show

也是页面上看不见，但是在F12后台可以看见代码，而v-if=false是不会看见代码，真正的隐形

v-show是修改了CSS样式的display数值达到的隐形，还是会加载，而v-if不会加载

template标签，起到一个占位符的作用，不会出现在页面上，也不会影响页面结构

v-for遍历

格式　　

可以实现动态列表

遍历对象属性

按照属性顺序读取

遍历字符串

按照拆分的字母和下标，s 0 、j 1

遍历指定的次数

和字符串差不多

按照数组元素和数组元素下标 1 0 、2 1

虚拟Dom机制和diff算法：

虚拟Dom是先将数据虚拟储存，当修改后会更新一个新的Dom与旧的用Diff算法去对比两个之间的差别，只有差别的地方才会重新部署，没有的不改变，提高执行效率

必须将key设置成主键，不然后边默认key是数组元素下标index，会导致列表错乱，

placeholder

filter过滤器

列表排序小技巧：可以鼠标单击触发修改data里的变量值，当赋值时，vm里会重新部署一遍，进而触发当type=1时的计算属性函数可以使用过滤器来完成

两个单选按钮在同一name下才能实现单选

model.类型转换number

删除前后空格

lazy延迟加载，等鼠标光标离开后才加载

这种指令不能在from表单上，会出现xss攻击，导致cookie泄露

v-clock

为了解决vue.js加载不出来导致页面vue代码不执行，页面显示源码的情况，出现了v-clock

解决方法，在头里加一个CSS样式，里边将display设置成none

[]代表所有标签

v-once

只在开始执行一次，后边直接成为静态内容

v-pre

不在vue编译，提高编译效率

自定义指令

函数式

对象式

响应式与数据劫持

什么叫做响应式，你写的数据能在页面上直接展示出来，或者更改一个数据，和这个数据有关的都叫做响应式。

数据劫持：其实就是set方法。

Vue生命周期

四个周期，八个钩子

从创建vm.$el后才有真实Dom

data改变就继续调用两个钩子，改变一次调用一次

这里的卸载销毁实际上是解绑Vue实例所有的监视器，自定义监听器，子组件等等。Vue实例还在

虽然beforeDestroy里监视器处于激活状态，但是不能用，内存中已经卸载了

组件

组件就是用来提高代码复用率的。

三部曲：创建组件、注册组件、使用组件

第一步创建组件，使用template实现模块化，在组件中，data必须是对象，且return返回一个对象

Vue当中可以使用自闭合标签的，但前提必须在脚手架环境中使用

全局注册

组件嵌套

注册的组件如果组件名和对象名一致可以简写

app : app

嵌套哪个组件就把组件名写到哪个组件下

Vm与Vc

vm包含vc，vc全称是VueComponent，Vue组件，是专门用来写组件的

vm和vc的原型对象是一个，所以能够互相访问，像共用一个父类，为了实现代码复用

重点：

导入导出

import，export，添加export以便其他文件能够导入他们

导出方式

单文件组件模型

导入

这里的X1是标签名，也就是说在template里边定义模板的X1标签名

脚手架

使用脚手架是为了浏览器能够认识.Vue文件，脚手架能够自动将VUe文件翻译成浏览器能够认识到Css，html，js代码

Vue配置项

render

实际上是被缩写成这样的

原代码

props配置项

当想更改属性值时，组件标签可以直接在标签内更改Value。像Html一样

有三种更改方式

props里还可以定义默认值default，添加必要性，必要性意思为不能为空

当想获取的值是数字或者其他值时，可以用V-bind标签，因为这个标签的返回值一定要是常量，对象。

props里的值不能修改，可以用个临时变量替代更改，展现数据也用那个临时变量

父组件中获取子组件

有什么用？可以用来修改子组件值，达到目的

给组件标签加上一个ref，顶如一个id。可以用this.$ref.属性值的方式获取到

不光组件，普通的Dom元素也可以定义id

因为不建议做Vue里使用Dom，所以这个ref实际上就是Dom里id的替代品

mixin混入：将组件间公共部分提取出来，不会和本身不会与同名的导入组件内函数冲突，就近原则

特殊的是，在8个钩子函数内，在同名的情况下，先执行mixin内的，再执行函数本身的

全局混入

混入是总结组件相同部分，实现代码复用

install方法里边形参可以是Vue对象和数据

scoped 关键字局部样式

为了避免组件与组件之间样式名字相同造成代码替代。

在浏览器上实际在div上添加了一种编号，所以能区分开样式

自定义事件

通过代码的形状形式绑定事件

删除

回调函数的this

全局事件总线

消息的订阅与发布机制

pubsub-js

导入库

要使用箭头函数，要不没有this，因为本身没有this，使用箭头函数自动找外层的this也就是VC

记得摧毁前将函数解除

AJAX跨域问题

代理服务器跨域

代理服务器配置

简单代理

只能代理一个服务器

高级代理

pathRewrite：^/api替换成‘ ’空要不地址会带/api

Vuex

多个组件实现资源共享

vuex过程，表面上还是用的vue的data，method，进行一个简单的包装，核心内容交给vuex里的store.js去搞了，store有三个对象

action对象、mutations对象、store对象
action对象处理事件逻辑，如然后将数据传输到mutations里去更新数据也就是state对象，因为state是响应式处理，整个页面包括state里的数据就会更新。达到目的

dispath是分发

context指的是action的行为动作

业务逻辑简单可以跳过action，直接this.$store.commit

store对象和Vm里的data差不多

简单数字加一了解一下Vuex过程

//App.vue
<template>
    <div>
        <h1>数字：{{$store.state.num}}</h1>
        <button @click="plusOne">点我加1</button>
    </div>
</template>

<script>
    export default {
        name : 'App',
        data() {
            return {
                startNum : 0
            }
        },
        methods: {
            plusOne(){
                // 这里的代码在实际开发中可能会比较复杂。
                // 业务逻辑复杂，代码比较多。
                // 如果你将这些代码放到这里的话，这些业务逻辑代码无法得到复用。
                // 无法在其他组件中使用，在其他组件中使用的时候，你还需要把这些代码再写一遍。
                //this.$store.state.num++
                // 调用vuex的API。
                // dispatch是vuex的API。调用这个方法之后，store对象中的plusOne这个action回调函数会被自动调用。
                // dispatch：分发
                // 交给plusOne这个action去处理这个事儿。
                this.$store.dispatch('plusOne', this.startNum)
            }
        },
    }
</script>

//Store.js
// 引入Vue，因为下面使用Vuex插件的时候需要Vue
import Vue from 'vue'

// 引入vuex插件
import Vuex from 'vuex'

// 使用插件
Vue.use(Vuex)

// 创建三个vuex插件的核心对象：actions对象、mutations对象、state对象
const actions = {
    // N多个action
    // 每一个action都是一个callback（回调函数）
    // 在action这种回调函数中编写复杂的业务逻辑
    // 有个原则：action是专门用来处理业务逻辑，或者说发送AJAX请求的。
    //plusOne : function(){}
    // 简写
    // context参数：context是vuex的上下文(context可以看做是store对象的缩小版)
    // value参数：传过来的数据
    plusOne(context, value){ 
        // 处理业务
        value = value + 1
        // 调用其它的action这个回调函数
        //context.dispatch('otherAction', value)
        // 业务逻辑处理完成之后，继续向下一个环节走，就轮到了数据的更新。
        // 提交上下文环境（所有的事儿都做完了，该最后一步了，更新数据了，怎么办？提交）
        context.commit('PLUS_ONE', value)
    },

    // 这里可能还会有其它的action
    // ...
    /* otherAction(context, value){        
        console.log(6666)
    } */
}
const mutations = {
    // N多个mutation
    // 每一个mutation都是一个callback（回调函数）
    // 每一个mutation这个回调函数的作用就是：更新state
    // 只要state一更新，因为是响应式的，所以页面就重新渲染了。
    // state参数：状态对象
    // value参数：上一环节传过来的数据
    PLUS_ONE(state, value){
        state.num += value
    }
}

// 等同于Vue当中的data（只不过这里我们不叫做数据，叫做状态）
// 状态对象（数据对象），已经做了响应式处理的。
const state = {
    num : 0
}

// 简写形式
export default new Vuex.Store({actions,mutations,state})


/* // 创建store对象（这个store对象是vuex插件中的老大，最核心的对象，这个对象store是用来管理actions对象、mutations对象、state对象。）
const store = new Vuex.Store({
    // 它是一个负责执行某个行为的对象
    actions : actions,
    // 它是一个负责更新的对象
    mutations : mutations,
    // 它是一个状态对象
    state : state
})

// 导出store对象（暴露之后，别人想用可以使用import进行引入）
export default store */

//main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入Vuex插件中的核心对象store
import store from './vuex/store'

new Vue({
  el : '#app',
  // 一个全新的配置项，以前没有学过：store
  // 加上这个配置项之后，vm以及所有的vc对象上都会多一个属性：$store
  // 以后通过vm.$store或者vc.$store来获取store对象。
  //store : store,
  store,
  render : h => h(App),
})