VUE学习笔记（一）

VUE基础

两个核心

• 模板引擎（响应式数据）

• 组件化

渐进式框架，自底向上增量开发的设计理念

 

Declarative Rendering: 声明式渲染，说人话：模板引擎，通过某种方式把数据变成html页面

Componet System: 组件系统，对可复用性组件化模板的封装

Client-Side Routing :路由系统，根据不同的url渲染不同的html

Large Scale State Management: 状态管理，维护应用中的数据

Build System : 构建系统：对于不用的库等。。。

引入vue.js

<script src="./js/vue.js"> </script>
new Vue();

组件：对具有特定的、独立的或者可复用模板的封装

Vue2中组件类别

----根组件

----在一个Vue 的应用中，有且仅有一个根组件，类似于html标签

---- new Vue => 一个应用

----可复用组件

----一个应用根组件中就是由N个可不用的组件组合而成的

第一个Vue应用

//组件在创建的时候，可以接收一个配置参数，Vue内部就会根据这个配置参数（对象）类处理组件内部的一些逻辑（数据拦截，绑定，模板渲染）
let app=new Vue({
    //用来存储该组件需要使用到的数据
    data:{
        title:'欢迎大家'
    }，
    // template
    template：`
        <div id="app">
            <h1>hello world<,h1>
            <p>{{title}}</p>
        </div>`,
    //模板渲染完成以后的DOM的挂载点 ,类似于 appendChild
    el:'#app'
});

模板引擎

//app就是一个组件实例对象，该对象提供组件的许多属性和方法
// _开头：组件内部私有属性和方法（不要去调用）
// $开头：组件对外提供的公有属性和方法
// 其他：我们用户（定义组件创建组件的程序员们自定义的）
let app=new Vue({
    //用来存储该组件需要使用到的数据
    data:{
        n:1
    }，
    // template
    template：`
        <div id="app">
            <h1>hello<,h1>
            <p>{{n}}</p>
        </div>`,
    //模板渲染完成以后的DOM的挂载点 ,类似于 appendChild
    el:'#app'
});

视图渲染的一个细节

//如果选项中没有template,但是有el选项，那么Vue会把el元素的outHtml作为template
<div id="app">
            <h1>hello<,h1>
            <p>{{n}}</p>
</div>
let app=new Vue({
     el:'#app',
    //用来存储该组件需要使用到的数据
    data:{
        n:1
    }
   
});

//如果没有el,那么这个时候就没有挂载点
let app=new Vue({
    //用来存储该组件需要使用到的数据
    data:{
        n:1
    },
      template：`
        <div id="app">
            <h1>hello<,h1>
            <p>{{n}}</p>
        </div>`,
    //模板渲染完成以后的DOM的挂载点 ,类似于 appendChild
    el:'#app'
   
});
console.log(app);
如果没有el,可以通过$mount('#app')来手动挂载

虚拟DOM

html字符串模板=>vNode

vNode ：虚拟结点

Node: 真实结点，也是一个js对象

​ 数据交换

​ 后端有数据

​ 前端也会要用后端提供的数据

​ 1、后端的数据类型（数据结构定义）和前端（js）数据类型并不一致

​ 2、数据在传输过程中会转成二进制（没有什么数据类型）

​ 语言之间（平台之间、网络）需要通过不同的手段方式去交换数据到当前这门语言对 应的数据结构，我们可以为这种交换数据定义一个通用格式(json)

dom
文档对象模型

​ html是一门语言

​ javascript也是一门语言

js为了能够操作html这种结构，需要对html进行解析，解析成js方便操作的数据，把html解析成js中的对象，用 js中的对象去描述html中的没一个节点

node对象就和页面中对应的标签有一定的关联关系，当我们操作对象的时候，对象的变化会同步更新到页面结构 （浏览器）

真实的DOM node

每次render之后都会调用patch方法 ，比较虚拟dom和真实dom之间的差异

 

指令

v-for

基于源数据多次渲染元素或模块。

示例

<div v-for="item in items">
  {{ item.text }}
</div>

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-bind

动态绑定attribute

示例

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

v-model

双向绑定。

示例

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

自定义指令

一个指令定义对象可以提供如下钩子函数

bind：只调用一次，指令第一次绑定到元素时调用

inserted：被绑定元素插入父节点时调用

update：所在组件的VNode更新时调用。

全局注册示例

## 自定义指令

一个指令定义对象可以提供如下钩子函数

bind：只调用一次，指令第一次绑定到元素时调用

inserted：被绑定元素插入父节点时调用

update：所在组件的VNode更新时调用。

全局注册示例

局部注册示例

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

methods

Vue示例中的方法。可以直接通过VM示例访问这些方法。方中的this自动绑定为Vue实例。

示例

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()

computed计算属性

 

派生数据，根据已经存在的数据生成一组新的数据。一个属性的变化依赖于其他属性的变化时可以用计算属性，计算属性只能用于同步方式，不支持异步。

示例

computed: {
                allChecked:{
                    get(){
                        return this.cartItems.every(cartItem=>cartItem.checked);
                    },
                    set(newValue){
                        //方法一
                        // this.cartItems.forEach(cartItem=>{
                        //     cartItem.checked=newValue;
                        // })
                        //方法二
                        this.cartItems=this.cartItems.map(cartItem=>({
                            ...cartItem,
                            checked:newValue
                        }));
                    }
                },
                totalCount:function(){
                    return this.cartItems.filter(n=>n.checked===true).length;
                },
                totalMoney:function(){
                    let totalMoney=new Number(0);
                    let selectedItems=this.cartItems.filter(n=>n.checked===true);
                    selectedItems.forEach(item=>{
                        totalMoney+=(item.price/100*item.quantity).toFixed(2)*1;
                    });
                    return totalMoney;
                }

            }

watch侦听器

 watch: {
        visible:function(newValue,oldValue){
            if(newValue==true){
                this.open();
            }
        }
    }

data

Vue实例的数据对象。Vue将会递归将data的property转换为getter/setter,从而让data的property能够响应数据变化。

在可复用组件中，data必须声明为一个返回初始数据对象的函数，因为组件可能被用来创造多个实例，避免所有实例共享一个数据对象

props

props用于接收来自父组件的数据。props可以是数组或者对象。对象允许进行类型检测、自定义验证，默认值。

示例：

 Vue.component('kkb-child',{
        //   props: ['a','b'],
          props: {
            val:Number
          },
          data(){
              return {
                  n:1
              }
          }

模板与渲染

html编译为render函数的过程

优先级：

render()>template

ast

抽象语法树=>生成各种代码：js,html,java,php

 

可复用组件

全局注册

全局可复用组件的定义，通过Vue.compent()

示例：

let Child=Vue.component('kkb-child',{
        //data必须是一个函数，因为可复用组件会有很多份，如果直接设置成对象，
        //则会共享
        data(){
            return {
                n:1
            }
        },
        template:`<div>Child</div>`
    })

调用

  <div id="app">
       <!-- =>createElement('h1') -->
       <h1>可复用组件</h1> 
       <hr>
       <!-- =>new componentOptions.Ctor().render(); -->
       <kkb-child></kkb-child> 
       <kkb-child></kkb-child>
   </div>

局部注册

只能在当前注册的组件内使用（不能在其他：父级，子级）

组件生命周期

基本生命周期有以下几个阶段

• 创建阶段

  beforeCreate()：在实例初始化之后，数据观测(data observer)和事件配置之前被调用

  created()：在实例创建完城后被立即调用，解析模板之前，在这个阶段可以做一些与数据有关，与挂载无关的事情。

• 挂载阶段

  beforeMount()：在挂载开始之前被调用

  mounted()：完成了模板解析以及挂载。可以通过DOM操作来对组件内部元素进行处理了

• 更新阶段

  beforeUpdate()：数据更新前调用，但是还没有对视图进行重新渲染

  updated()：由于数据的变化导致的视图重新渲染，可以通过DOM操作来获取视图最新状态

• 卸载阶段

  beforeDestroy()：实例销毁之前，一般用来处理一些不必要的冗余数据，例如，定时器

  destroyed()：Vue实例销毁后调用