Vue笔记

Vue笔记

1. 生命周期

生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；

在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，

在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是

2、生命周期的钩子函数；

生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码；

生命周期的钩子函数中的this，会默认指向vue的实例;

3、钩子函数

beforeCreate created[可以获取数据及方法]

beforeMount mounted[可以获取到真实的DOM]

beforeUpdate updated[数据更新执行]

beforeDestroy destroyed[销毁vue实例，不再具有双向数据绑定的特点]当然还有三个函数

beforeCreate:function(){

console.log("创建之前");

console.log(this.$el);

console.log(this.$data);

},

created:function(){

console.log("创建完成");

console.log(this.$el);

console.log(this.$data);

},

beforeMount:function(){

console.log("挂载之前");

console.log(this.$el);

console.log(this.$data);

},

mounted:function(){

console.log("挂载完成");

console.log(this.$el);

console.log(this.$data);

},

beforeUpdate:function(){

console.log("更新之前");

console.log(this.$el);

console.log(this.$data);

},

updated:function(){

console.log("更新完成");

console.log(this.$el);

console.log(this.$data);

},

beforeDestroy:function(){

console.log("摧毁之前");

console.log(this.$el);

console.log(this.$data);

},

destroyed:function(){

console.log("摧毁完成");

console.log(this.$el);

console.log(this.$data);

}

2、生命周期

  创建过滤器有两种方式：全局创建过滤器、局部创建过滤器。

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数

过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

//创建全局过滤器

Vue.filter("过滤器名",function(val){

  过滤语句

});

//创建局部过滤器

var vm = new Vue({

  el: "#app",

  filters:{

    过滤器名:function(val){

      过滤语句

    }

  }

});

小结：

1、局部过滤器优先于全局过滤器被调用

2、一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。

第二章事件修饰符

.stop：等同于调用event.stopPropagation()。

.prevent：等同于调用event.preventDefault()。

.capture：使用capture模式添加事件监听器。

.self：只当事件是从监听元素本身触发时才触发回调。

.once：点击事件将只会触发一次。

小结：

Vue使用了基于HTML的模板语法，允许开发者通过Vue声明式地将DOM绑定至底层Vue实例的数据。

其中Vue模板语法包含插值、表达式和指令组成。

在Vue中对属性的绑定一般使用v-bind指令（可以缩写为“:”）。

在将v-bind用于class和style时，Vue进行了专门的增强功能来方便绑定类样式和样式属性，即表达式结果的类型除了字符串之外，还可以是对象或数组。

Vue中提供v-if、v-show和v-else的条件渲染指令，这些条件指令可以根据表达式的值在DOM中选择渲染元素或组件。

Vue提供了v-on指令用来监听DOM事件，通常在HTML内自己使用v-on绑定事件，而不像传统方式在js中获取DOM元素，再绑定事件处理函数。

第三章事件冒泡

  也就是说在一个盒子上你设一个事件然后在盒子里再设一个盒子并给一个事件，而当你点击里面的盒子时会触发盒子里面的事件也会触发大盒子的事件，也就是从内到外冒泡。

  在vue一般有以下的解决措施：

.stop：等同于调用event.stopPropagation()。

也就是会取消事件冒泡，在你点击后他只会执行你当前点击的事件，不会执行大盒子的事件。

.prevent：等同于调用event.preventDefault()。

阻止表单提交，注意一定要绑在form上面。

.capture：使用capture模式添加事件监听器。

捕获也就是改变原有的冒泡当你点击后，会先执行当前绑定capture的事件，前提是一定要是该事件盒子内或者本身点击该盒子。

.self：只当事件是从监听元素本身触发时才触发回调。

只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的

.once：点击事件将只会触发一次。

With

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动：侦听属性。当有一些数据需要随着其他数据变动而变动时，就可以使用侦听属性watch。

watch是一个对象，其中watch对象的属性是需要侦听的目标，一般是data中的某个数据项，而watch对象的属性值是一个函数，是被侦听的数据项发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是更新后的值。

watch的一个特点是，最初绑定的时候是不会执行的，要等到商品单价和商品数量改变时才执行监听计算

如果想要一开始让最初绑定的时候就执行，就需要watch中使用handler方法和immediate属性：

handler()方法：其值是一个回调函数。即监听到变化时应该执行的函数。

immediate属性：其值是true或false；确认是否以当前的初始值执行handler的函数

第四章组件

组件：件系统是Vue其中一个重要的概念，它提供了一种抽象，让可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。

Vue的组件的使用有3个步骤：

创建组件：通过调用Vue.extend()方法创建组件。

注册组件：调用Vue.component()方法组件组件。

使用组件：使用Vue实例的页面内自定义组件标签。

第一种

第二种：

第三种：

第四种：

 Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口，这是vue文档上的说明。具体来说，slot就是可以让你在组件内添加内容的‘空间’。举个例子：

//子组件 ： (假设名为：ebutton)<template>

  <div class= 'button'>

      <button>  </button>

  </div></template>

//父组件：（引用子组件 ebutton）<template>

  <div class= 'app'>

     <ebutton> </ebutton>

  </div></template>

我们知道，如果直接想要在父组件中的<ebutton></ebutton> 中添加内容，是不会在页面上渲染的。那么我们如何使添加的内容能够显示呢？在子组件内添加slot 即可。

//子组件 ： (假设名为：ebutton)<template>

  <div class= 'button'>

      <button></button>

      <slot></slot>       //slot 可以放在任意位置。（这个位置就是父组件添加内容的显示位置）

  </div> </template>

子组件可以在任意位置添加slot , 这个位置就是父组件添加内容的显示位置。

编译作用域 （父组件 在子组件<slot> </slot>处插入 data）

上面我们了解了，slot 其实就是能够让我们在父组件中添加内容到子组件的‘空间’。我们可以添加父组件内任意的data值，比如这样：

//父组件：（引用子组件 ebutton）<template>

  <div class= 'app'>

     <ebutton> {{ parent }}</ebutton>

  </div></template>

new Vue({

  el:'.app',

  data:{

    parent:'父组件'

  }})

使用数据的语法完全没有变，但是，我们能否直接使用子组件内的数据呢？显然不行！！

// 子组件 ： (假设名为：ebutton)<template>

  <div class= 'button'>

      <button> </button>

       <slot></slot>

  </div></template>

new Vue({

  el:'.button',

  data:{

    child:'子组件'

  }})

// 父组件：（引用子组件 ebutton）<template>

  <div class= 'app'>

     <ebutton> {{ child }}</ebutton>

  </div></template>

直接传入子组件内的数据是不可以的。因为：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容 (子组件<slot> </slot>设置默认值)

所谓的后背内容，其实就是slot的默认值，有时我没有在父组件内添加内容，那么 slot就会显示默认值，如：

//子组件 ： (假设名为：ebutton)<template>

  <div class= 'button'>

      <button>  </button>

      <slot> 这就是默认值 </slot>

  </div></template>

具名插槽 （子组件 多个<slot ></slot> <slot></slot> 对应插入内容）

有时候，也许子组件内的slot不止一个，那么我们如何在父组件中，精确的在想要的位置，插入对应的内容呢？ 给插槽命一个名即可，即添加name属性。

//子组件 ： (假设名为：ebutton)<template>

  <div class= 'button'>

      <button>  </button>

      <slot name= 'one'> 这就是默认值1</slot>

      <slot name='two'> 这就是默认值2 </slot>

      <slot name='three'> 这就是默认值3 </slot>

  </div></template>

父组件通过v-slot : name 的方式添加内容：

//父组件：（引用子组件 ebutton）<template>

  <div class= 'app'>

     <ebutton> 

        <template v-slot:one> 这是插入到one插槽的内容 </template>

        <template v-slot:two> 这是插入到two插槽的内容 </template>

        <template v-slot:three> 这是插入到three插槽的内容 </template>

     </ebutton>

  </div></template>

当然 vue 为了方便，书写 v-slot:one 的形式时，可以简写为 #one

作用域插槽 ( 父组件 在子组件 <slot> </slot> 处使用子组件 data)

通过slot 我们可以在父组件为子组件添加内容，通过给slot命名的方式，我们可以添加不止一个位置的内容。但是我们添加的数据都是父组件内的。上面我们说过不能直接使用子组件内的数据，但是我们是否有其他的方法，让我们能够使用子组件的数据呢？ 其实我们也可以使用v-slot的方式：

//子组件 ： (假设名为：ebutton)<template>

  <div class= 'button'>

      <button>  </button>

      <slot name= 'one' :value1='child1'> 这就是默认值1</slot>    //绑定child1的数据

      <slot :value2='child2'> 这就是默认值2 </slot>  //绑定child2的数据，这里我没有命名slot

  </div>           </template>

new Vue({

  el:'.button',

  data:{

    child1:'数据1',

    child2:'数据2'

  }})

//父组件：（引用子组件 ebutton）<template>

  <div class= 'app'>

     <ebutton> 

        // 通过v-slot的语法 将插槽 one 的值赋值给slotonevalue         <template v-slot:one = 'slotonevalue'>  

           {{ slotonevalue.value1 }}

        </template>

        // 同上，由于子组件没有给slot命名，默认值就为default        <template v-slot:default = 'slottwovalue'> 

           {{ slottwovalue.value2 }}

        </template>

     </ebutton>

  </div></template>

总结来说就是：

• 首先在子组件的slot上动态绑定一个值( :key='value')
• 然后在父组件通过v-slot : name = ‘values ’的方式将这个值赋值给 values
• 最后通过{{ values.key }}的方式获取数据

子组件向父组件传值

最简单的方法：直接用this.$parent.zhifu();

在这个里面我们可以看到父辈有个方法叫zhifu，我们通过他子辈的nihaosha去调用，看是否能成功，能成功则可以调用