vue

vue（中心思想：替换app元素）

vue脚手架

image.png

• 把vue-cli 安装到全局：npm install vue-cli -g或者yarn add vue-cli -g
  vue-cli：提供了一些vue的命令，用来初始化一个基于webpack的vue项目
• 命令一：vue init webpack-simple vue-book(自定义的项目名称)
• 命令二（一般用这个）：vue init webpack vue-book(自定义的项目名称)
  • 问题：重新安装less、less-loader 、axios、boostrap
  • 如果用第三方插件需要use一下 譬如：

//查找路径vue ---> package.json ---> main.js
import Vue from 'vue'

//第三方模块
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);

是一个MVVM框架，m-model  v-view  vm-view-model
model：数据模型  view：视图  view-model：数据和视图之间数据的传递

MVVM

1. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。
2. MVC的定义：MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。‘MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。由于mvc出现的时间比较早，前端并不那么成熟，很多业务逻辑也是在后端实现，所以前端并没有真正意义上的MVC模式。而我们今天再次提起MVC，是因为大前端的来到，出现了MVVM模式的框架，我们需要了解一下MVVM这种设计模式是如何一步步演变过来的。2. 为什么会有MVVM框架？在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。综上两方面原因，才有了MVVM模式一类框架的出现。比如vue,通过数据的双向绑定，极大了提高了开发效率。3. MVVM框架:VUE的介绍Vue就是基于MVVM模式实现的一套框架，在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图viewModel:指的是vue实例化对象为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思？1.如果你已经有一个现成的服务端应用，你可以将vue 作为该应用的一部分嵌入其中，带来更加丰富的交互体验;2.如果你希望将更多业务逻辑放到前端来实现，那么VUE的核心库及其生态系统也可以满足你的各式需求（core+vuex+vue-route）。和其它前端框架一样，VUE允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。3.如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分割成为各自的组件和文件，vue有一个命令行工具，使快速初始化一个真实的工程变得非常简单（vue init webpack my-project）。我们可以使用VUE的单文件组件，它包含了各自的HTML、JAVASCRIPT以及带作用域的CSS或SCSS。以上这三个例子，是一步步递进的，也就是说对VUE的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。VUE最独特的特性：响应式系统VUE是响应式的（reactive），也就是说当我们的数据变更时，VUE会帮你更新所有网页中用到它的地方。关于这个响应式原理，官方已经讲得很清楚，不懂的同学，可以去官网 查看。我们讲一下主流框架实现双向绑定（响应式）的做法：1. 脏值检查：angularangular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下： DOM事件，譬如用户输入文本，点击按钮等。( ng-click ) XHR响应事件 ( location ) Timer事件( interval ) 执行 apply()在 Angular 中组件是以树的形式组织起来的，相应地，检测器也是一棵树的形状。当一个异步事件发生时，脏检查会从根组件开始，自上而下对树上的所有子组件进行检查，这种检查方式的性能存在很大问题。2.观察者-订阅者（数据劫持）：vueObserver 数据监听器，把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时，则会调用getter方法，当data中的属性被改变时，则会调用setter方法。Compile指令解析器，它的作用对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅。Watcher 订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。Dep 消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。
   当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。因为VUE使用Object.defineProperty方法来做数据绑定，而这个方法又无法通过兼容性处理，所以Vue 不支持 IE8 以及更低版本浏览器。另外，查看vue原代码，发现在vue初始化实例时， 有一个proxy代理方法，它的作用就是遍历data中的属性，把它代理到vm的实例上，这也就是我们可以这样调用属性：vm.aaa等于vm.data.aaa。好了，关于mvvm设计模式及vue的双向绑定原理就讲到这。说实话，写这篇文章很费脑子，我们也参考了很多人的文章，可以说是总结的一个大杂烩。最近这两年Vue太火了，不懂VUE都不好意思说自己是干前端的，程序思维现在正着力把之前写的项目改造成vue的方式，目前已遇到了一堆坑，之后我们会把vue实战过程中的坑给大家总结一下，方便大家更好的学习。欢迎您继续关注程序思维。
   MVC：model view controller ：数据单项通信，只能通过数据影响视图；
   MVVM：model（后端返回的数据）和view是不能直接进行通信的；需要通过view-model 来进行数据的传递；model-->view：绑定数据；model-->view：DOM的监听事件【发布订阅模式】

• 数据是响应式的，当数据发生变化，会自动影响视图，当视图数据发生变化，会影响数据---> 数据的双向绑定

• vue中常见的指令
  v-model：一般用于表单元素，体现双向绑定，单选框用于一组和name作用一样，具有互斥的作用，多选框（1个）false或者true，多个多选框v-model放的是数据，也需要有value值；在使用下拉框时，如果select有multiple；那么v-model绑定的值最好是一个数组类型
  如果v-model绑定的值不是一个数组类型的，那么浏览器解析吧其换成布尔类型；同时选中，同时不被选中；所以需要给每个input加上value属性值进行区分
  v-text：把数据绑定DOM元素中，具有响应式；并且会把之前的进行覆盖
  v-html：可以识别标签
  v-for：要循环谁，把v-for放在谁身上；
  v-once：事件、一次
  v-if、 v-else：：当属性值是true，则显示当前的元素；为false，那么显示v-else的元素，控制的是DOM元素的存在，不是控制display：none
  v-else-if：
  v-once：页面指挥绑定一次，视图和数据不在有任何的关联，放在小胡子里面
  v-cloak：元素加在数据比较多，vue解析事件比较长；为了防止{{}}出现，给该元素加上v-cloak属性，直到vue中吧DOM数据插入到真实DOM中时，当前元素显示；在css中加样式[v-cloak]{display：none}；直接用v-text也可以
  v-show：控制元素的显示隐藏；通过控制css的display属性；频繁操作dom元素
  v-bind：用于绑定动态的属性，最后简写成一个：就可以取到动态的属性
  v-：自定义属性；v-开头的属性值是变量；不是字符串
  v-on：
  {{msg}} < /div>
• 如果在绑定时，fn不带()，那么函数会默认接收一个事件对象e；mouseEvent，
• 如果绑定时，带有()，那么不会默认接收事件对象，
• 既需要事件对象，又需要参数,需要在绑定参数加一个($event)，后面的参数才是真正的实参
  input 单选input type=‘redio’；v-model=‘b’；value=‘内容’ onchange：当input的value发生改变时，就会触发这个change事件；在input由于值发生变化，单只触发的事件一般都用change事件 onclick：点击的时候，立即执行这个行为绑定的方法
  @blur="cancel" v-focus

小胡子语法：{{}}不仅仅可以取值，还可以放运算表达式
在小胡子语法中遇到null，遇到undefined是没显示任何内容的

• 事件修饰符；@click.prevent="fn"
  .prevent：阻止事件的默认行为
  .stop：阻止事件的冒泡行为
  .capture：事件行为在捕获
  .once：只执行一次
  .self：只有自己触发自己时，自己的事件行为才会执行

• 键盘事件的修饰符：@keydown.enter="fn". .数字或者.字母也可以
  .enter：回车键
  .esc：退出
  .delete：退格
  .space：空格
  .tab：tab键
  .left/.right./.up/.down 上下左右

• data中数据最终会放在vue的实例上
• vue 会遍历data中的所有的属性，通过Object.defineProperty把所有的属性转换成get和set方法

    
    
    
    
    
    




    {{a.school}}

 let vm = new Vue({
        el:'#app',
        data:{
            arr:[1,2,3,4,5,6]
        }
    });
    //1、通过索引不可以修改data中数组的某一项
    //2、通过改变数组的length，也不能实现响应式
    //3、通过原型上的方法，可以对数组实现修改；
    //4、数组的方法中，原有数组发生改变：pop、push、shift、unshift、splice、sort、reverse，另一个方法可以给vm.arr重新赋值

    
    



    

        
        
        
        
        
        
        
        
        
        
        
        

            

                
{{b}}
            
        
    

data的属性和methods中的属性不能重名
data的属性和fillter中的属性能重名
methods的属性和fillter中的属性能重名
computed中的属性不能和data或者methods中的属性名重名
watch都可以重名

let vm = new Vue({
el:'#app',绑定
data:{},数据
methods:{},方法
created(){},一开始就执行，
computed:{},传一个对象，对象中有get和set方法；传一个方法，默认走get，计算属性
watch:{},监听数据
template:'',
filters:{},过滤器，方法中有两个参，第一个参数是前面这个元素，第二个参数是传进来的
directives:{},自定义方法，自动执行，函数的名字和自定义的名字必须一致；自定义方法第一个参数是此元素，第二个参数是个对象，对象中value值是我们需要的
})

computed

computed ：计算的属性会缓存
checkAll：这个属性的属性值是由下面两个input的v-model计算的来的；当下面有一个是false，checkAll就是false，两个都是true，结果是true；
在computed中的，属性都有一个get和一个sat方法；当获取checkAll时，会执行get方法，那么checkAll是get方法的返回值
computed中的属性都会被vue实例所代理，最终放在实例的属性中

computed中的属性不能和data或者methods中的属性名重名
computed属性还可以是一个函数，那么函数执行会默认调用get方法，那么sum函数执行的返回值就是sum这个属性的属性值
computed不支持异步的方法，watch可以支持异步的方法

computed的数据不需要再data有，但是watch数据必须存在于data中
如果一个属性依赖于其他属性计算而来，那么这个属性最好用computed；因为computed计算的属性会缓存

• computed:
  1、支持缓存，只有依赖数据发生改变，才会重新进行计算

2、不支持异步
3、如果一个属性是由其他属性计算而来的，这个属性依赖于其他属性，是多对一；一般用computed；
4、如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；

• watch
  1、不支持缓存，数据变，直接会触发响应的操作
  2、watch支持异步
  3、当一个属性发生变化是，需要执行对应的操作；一对多

 computed:{
            // computed ：计算的属性会缓存
            //checkAll：这个属性的属性值是由下面两个input的v-model计算的来的；当下面有一个是false，checkAll就是false，两个都是true，结果是true；
            //在computed中的，属性都有一个get和一个sat方法；当获取checkAll时，会执行get方法，那么checkAll是get方法的返回值
            //computed中的属性都会被vue实例所代理，最终放在实例的属性中
            //computed中的属性不能和data或者methods中的属性名重名
            checkAll:{
                get(){
                    return this.products.every(item => item.isSelected)
                    //checkAll 会依赖item的isSelected属性执行get方法；由于item发生改变，所以会再次触发get方法；先执行set再执行get，如果return 固定值，不会再执行get方法
                    //computed属性会被缓存，触发当依赖的属性(别人的某个属性可以影响自己的属性)发生改变时，会调用get方法，在页面中需要获取这个值（dom元素必须存在）
                },
               set(val) {
                    this.products.forEach(item => item.isSelected = val)
                    //会把当前的值value传给set的参数；true/false
                }
            }
        },

//总价格：{{sum | toFixed(2)}}
sum(){
                //计算出所有选中商品的总价
                return this.products.reduce((prev,next)=>{
                    //如果当前的商品是false，不需要进行求和计算；但是需要把以前进行求和结果传给下一次的计算求和
                    if(!next.isSelected) {return prev}
                    return prev + next.productPrice * next.productCount
                },0);
            }

watch

  watch:{
            a(newVal,oldVal){
                // 监听a属性，当a属性发生变化，会这行这个函数；
                // watch会把最新的值和上一次的值传给这个函数；第一个接收新的数值，第二个接收上一次的值；
                //console.log(newVal);
                //console.log(oldVal);
                setTimeout(()=>{
                    this.msg = "";
                    if(newVal.length>5){
                        this.msg = "太长了"
                    }
                    if(newVal.length<3){
                        this.msg = "太短了";
                    }
                },2000);

                // 在工作中，能用computed，就不要用watch;
            }
        }

    })
    // 1. MVVM模式
    // 2.vue双向数据绑定原理
    // 3.vue的声明周期
    // 4.vue 中computed和watch有什么区别；
    // 5.用过VUEX吗；

transition-group

    
    
    



    
    
    

        
        
        
{{val}}
    

• v-bind的class
  class中传一个对象，譬如class='a'，v-bind：class{x：true，y：false}，
• 1、如果class名字相同，不会互相影响；如果样式相同，后面的会把前面的覆盖
  class中传一个对象，譬如class='a'，v-bind：class{x：100，y：false}，
• 2、如果动态的class这个对象中，class的对象的属性名的属性值如果不是布尔值，默认转成布尔；如果是true，当前class生效；如果false，那么class不生效
  class中传一个对象，譬如class='a'，v-bind：class{a：class1，y：false}['a']
• 3、可以通过对象获取属性名对应的属性值
  class中传一个数组，譬如class='a'，v-bind：class[class1，class2]、v-bind：class[class1，class2][0]
  
  
• v-bind的style

 v-bind：style；动态绑定样式，属性值可以是一个对象，或者是一个数组；如果是对象，里面可以存储具体的样式，如果是数组，数组中的数据应该是从data中或者computed中拿到的
 v-bind：style='{width:'100px'}'
 v-bind：style=[bg1,bg2]

    
    
    
    
    
    
    



    
1
    
2

//生命周期；
    // vue的实例具有生命周期；vue实例在生成时，会经历一系列的初始化过程；数据的监听，编译模板，实例挂载DOM元素，或者数据更新DOM更新;在执行的过程中，会运行一些叫做生命周期的钩子函数；在vue实例生命周期中的特定的时间点内，执行的函数；

    // 生命周期钩子函数，不能控制其执行的顺序；
![lifecycle.jpg](https://upload-images.jianshu.io/upload_images/14091103-7e015813ac1d29e3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- this就是vm或者别的实例的名字
> - vue 中提供一个行间属性： ref;
> - this.$refs : 获取到所有的元素带有行间属性ref的属性；同名字的会覆盖除非是for循环出来的
> - this.$set :
> - this.$mount : 挂载 `vue实例中没有指定元素` 在实例外面，
> - this.$el : 挂载的元素；
> - this.$data:
> - this.$options
> - this.$nextTick,传一个回调函数，回调函数会等待DOM异步渲染完成执行，在异步之前
> - this.$emit ： 发布 ，在methods里面
               >  -   $emit存在于每一个vue的实例上；
               >  -   需要和DOM行间的的属性是保持一致；
> - this.$on: 订阅
###template （template:""）
- 1.template的属性值会把外层div给替换掉；
- 2.template 只支持一个子元素；组件模板中只能由一个根元素；如果有多个元素，需要在外面加一个元素包裹起来；
- 3.两个不同的写法；
        template:"#divs" 或者  template:" < div>< div>< /div>< /div> ",
####slot
```javascript



    
    



    

        
122
        
223
    

组件

全局组件（Vue.componen 创建+注册）

组件： 把页面中公共部分提炼出来，可以进行复用；Vue.componen是一个函数，传两个参数，第一个参数是名字，第二个参数是一个对象，对象里面有个data是个函数return一个对象，要不然报错

每个组件都是一个vue的实例；那么具有生命周期；并且也有data ,computed,methods ,watch这些属性；

• 1.组件的名字，在JS中可以带有-;还可以驼峰的命名；
• 2.在HTML中进行引用时，支持-；但是不支持驼峰；
• 3.Vue.component 是全局注册组件，在其他各个vue的实例中，可以使用；
  注意顺序

局部组件（平行组件和嵌套性组件）

局部组件使用三部曲 ：

• 1.创建组件；
• 2.注册组件
• 3.使用组件；

嵌套性组件

• 1、必须从内部往外部写，要不然找不到
• 2、最里面的组件有template，但是没有components，其他都有，并且components使用的是（内组件 + 本组件的数据）
• 3、最大的注册一下

动态组件

    home
    list
    
    
    
        
    

    

keep-alive

keep-alive标签数据走缓存不刷新

数据传递问题 （数组是单向的）

• 1.把父组件中的数组绑定子组件中的一个行间属性；并且是动态绑定的这个属性；
• 2.利用子组件中的props，去接收一下这个行间的属性；
• 3.在子组件template中进行使用；
• 4.数据被私有化，改变的话上级也变

父传子

    


 let son = {
        // 在子组件中，data  computed  watch  methods 这些属性都有；子组件就是一个vue的实例；
        data(){
            return {
                val:100//没用
            }
        },
        // props
        props:["m"],
        template:"
{{m}}
"
    };
    
    let vm = new Vue({
        el:"#app",
        data: {
            msg:"hello"
        },
        components:{
            son
        }

    });

子传父

如果需要当触发子组件上的操作改变父组件上的数据时，需要在父组件定义方法，改变自己的值；在父组件中定义的方法，需要订阅到子组件的自定义事件上；当触发子组件中的某个操作时，通过$emit 去触发这个自定义的事件；让其对应的父组件的方法执行；

    父亲： {{money}}
    

事件车

props

路由的参数

    
    
    商品1
    商品2
    商品3
    

.vue文件可以把template直接放在对象中