zoukankan      html  css  js  c++  java
  • --外功篇-《邂逅Vue》-学习笔记(持续更新)--

    学习笔记

    生命周期

    beforeCreate

    created

    beforeMount

    mounted

    beforeUpdate

    updated

    beforeDestroy

    destroyed

    一些指令

    v-once

    表示该标签只渲染一次,其数据不会随着数据的改变而改变

    v-html

    表示当前标签以html方式进行解析

    v-text

    以文本形式进行加载

    v-pre

    将内容原封不动的显示出来

    v-cloak

    将元素内容在解析结束之后再显示出来

    v-bind 动态绑定属性

    绑定标签的props(属性),则该属性的值依据Vue对象中的值而改变。同样的,在父子组件通信的过程中,同样通过属性的绑定进行传值。

    v-bind 动态绑定class

    在v-bind绑定class时,可以形如v-bind:class="{类名:boolean, 类名:三元表达式}"对象语法
    也可以形如v-bind:class="['类名', '类名']"数组语法

    v-bind 动态绑定style

    在v-bind绑定class时,可以形如v-bind:style="{css属性名:属性值}"对象语法。(css属性名使用驼峰命名法或者短横线形式)
    也可以形如v-bind:style="[{css属性名:属性值}, {css属性名:属性值}]"数组语法

    v-for (搭配v-bind实现点击列表改变样式的需求)

    v-for="(item, index) in array"遍历数组
    v-for="(item, key, index) in obj"遍历对象
    官方推荐使用:key进行对遍历元素的绑定(不要绑定index):
    在绑定之后,如果list进行的变更,则vue会进行对比绑定的元素是否发生变更。能够提升效率。
    (diff算法)

    v-on 事件监听

    在事件监听时,如果没有参数,可以不添加括号。
    如果有参数,但不添加括号,则会传入event事件对象。
    当我们需要event对象也需要其他参数时:
    在调用方法是手动获取event方法:$event
    v-on会触发事件冒泡可以使用v-on:click.stop对事件冒泡进行阻止
    v-on:click.prevent可进行阻止默认事件
    v-on:keyup.keyCode|keyAlias监听键盘按键点击
    .once只触发一次的事件

    v-if v-else-if v-else

    v-if="boolean"v-if往往添加bool值。
    Vue在处理dom节点时会事先创建一个虚拟dom,存放进内存中。
    在虚拟dom中,会检查是否已存在dom,经过判断会直接置换dom节点的属性,并不会重新添加dom。

    v-show 是否需要显示

    v-if为false,是直接将该dom节点删去
    v-show为false时,则是将dom节点的display属性设置为none
    因此切换频率非常高的时候选择v-show避免重复渲染

    v-model 双向绑定,绑定表单控件

    因为v-model默认绑定表单value属性,所以只能在表单控件中使用


    计算属性 computed

    计算属性的setter和getter

    computedMethods: {
              set: function() {
                
              },
              get: function() {
                return this.movies[0] + ' ' + this.movies[1];
              }
            }
    

    计算属性一般没有set方法,是一个只读属性。

    计算属性的缓存:

    计算属性与methods的区别在于,computed的数据存在缓存,因此,其以来的只没有发生变化,其不会再次运行。

    数据的响应式

    哪些数组的方法是响应式的?

    1. push 在数组后面添加元素
    2. pop 移除数组最后一个元素
    3. unshift 在数组最前面添加元素(可以添加多个)
    4. shift 删除数组中第一个元素
    5. splice 删除元素、插入元素、替换元素。传3个参数(start, num, str):start,开始位置;num,删除个数;str,替换元素值
    6. sort 排序
    7. reverse 反转
      PS直接改变数组值,vue不会对页面进行渲染刷新
      若要直接进行修改,可使用splice方法
      或者 使用 Vue.set(list, 0, 'newData')

    过滤器filter

    也是方法的一种
    index|过滤器


    组件化

    创建构造器对象

    const cpn = Vue.extend({
      template:'<div>Hello World!</div>'
    })
    

    注册组件

    Vue.component('app-cpn', cpn)
    

    使用组件

    <app-cpn></app-cpn>
    

    组件语法糖注册方式

    //全局组件
    Vue.component('cpn', {
      template: '<div>hello</div>',
      components: {
    
      }
    })
    
    //局部组件
    const father = Vue.extend({
      template: '<div><child></child></div>',
      components: {
        child: {
          template: '<div>hello world!</div>'
        } 
      }
    })
    

    全局组件

    全局组件能在多个Vue实例下使用(代码如上创建即可)

    局部组件

    const app = new Vue({
      el: "#app",
      data: {},
      components: {
        appCpn: cpn 
      }
    })
    //局部组件需要使用短横线形式的话,可采用驼峰命名法
    

    父组件和子组件

    const child = Vue.extend({
      template: '<div>hello world!</div>'
    })
    const father = Vue.extend({
      template: '<div><child></child></div>',
      components: {
        child: child 
      }
    })
    Vue.component('father', father);
    

    组件抽离写法

    //script 标签写法
    <script id="cpn" type="text/x-template">
      <div>hello i am cpn</div>
    </script>
    //...
    Vue.component('cpn', {
      template: '#cpn'
    })
    //----------------
    //template标签写法
    <template id="cpn">
      <div>hello i am template component</div>
    </template>
    //...
    Vue.component('cpn', {
      template: '#cpn'
    })
    

    组件的data

    组件是一个单独功能的模块的封装,这个模块有属于自己的HTML模板,也有属于自己的数据data。
    因此,组件的data必须返回一个函数形式,进行一个函数作用域的封装,保证其作用域内变量的封闭性。
    所以在重复使用组件时,会重新申请多个作用域,对于相同的方法的问题,是因为方法作用于不同作用域的data,所以操作的对象并不相同。

    Vue.component('cpn',{
      template: '#cpn',
      data: function() {
        return {
          message: 'hello i am a compnent data'
        }
      }
    })
    

    组件间的通讯

    通过props向子组件传递数据

    在子组件中,声明props属性,并设置属性变量名
    例如:

     const childCpn = {
        template: '#childCpn',
        props: ['cmovies', 'cmessage'],
        dtat: function(){
          return {
            cmessage: message,
          }
        }
      }
    

    cmovies cmessage充当组件child-cpn的属性,通过v-bind将其属性与父组件中的属性值进行绑定,完成数据由父组件向子组件的传递。
    例如:

    <div id="app">
        <child-cpn v-bind:cmovies="movies" :cmessage="message"></child-cpn>
      </div>
      <template id="childCpn">
        <div>
          <p>{{cmessage}}</p>
          <div>{{cmovies}}</div>
        </div>
      </template>
    

    props的写法

    1.常见的数组类型

    2.对象类型(可以进行类型限制)
    2.1 类型限制写法

    props: {
      cmovies: Array,
      cmessage: String
    }
    

    2.2提供一些默认值

    props: {
      type: [String, Number],   //传值类型,可传多个类型
      default: 'hello world',   //设置默认值,如果类型设置为对象,则应用函数返回一个对象
      require: true,   //标记为必传属性
    }
    

    props驼峰标识

    在标签中不支持驼峰写法,应改写为短横线法。
    例如:

    <cpn v-bind:c-movies="movies">{{cMovies}}</cpn>
    

    c-movies由驼峰命名改为短横线法

    通过事件向父组件发送消息

    1. 在子组件中添加事件方法,并创建组件的监听属性
      例如:

      <template id="child">
        <div>
          <button @click="childClick(item.name)">{{item.name}}</button>
        </div>
      </template>
      
       const childcpn = {
         template: '#child',
         data: function() {
           return {
             item: {
               id: 1,
               name: 'YaHaha'
             }
           }
         },
         methods: {
           childClick(name) {
             this.$emit('listener-props', name); //监听属性名,用于在使用子组件时,使用v-on对该属性进行绑定
           }
         }
       }
      
    2. 在使用子组件时对该事件进行监听即可
      例如(继上述子组件之后):

       <div id="father">
         <child-cpn @listener-props="fatherFunc"></child-cpn>
       </div>
      
       const fathercpn = {
         template: '#father',
         data: function() {
           return {
             data: 'this is father component'
           }
         },
         methods: {
           fatherFunc(name) {
             console.log(name); //接收来自子组件的item.name
           }
         },
         components: {
           childCpn: childcpn
         }
       }
      

    slot插槽

    slot插槽的使用

        <cpn><span>应用组件时添加内容时,会自动填充并覆盖掉插槽位置</span></cpn>
        <!--  -->
        <template id="cpn">
            <div>
                <slot><span>插槽可以使用默认值</span></slot>
            </div>
        </template>
    

    插槽的定义需要在定义子组件时进行
    在使用时,只需向子组件中添加标签元素,即可对插槽默认值进行替换。
    若是多条填充内容只有一个插槽,则会将全部内容填充进唯一一个插槽中。
    若是一条填充内容多个插槽,则会将全部插槽替换掉。因此需要具名插槽。

    具名插槽

    通过对插槽署名
    例如:

        <cpn><span slot='default1'>应用组件时添加内容时,会自动填充并覆盖掉插槽位置</span></cpn>
        <!--  -->
        <template id="cpn">
            <div>
                <slot name='default1'><span>插槽可以使用默认值</span></slot>
                <slot name='default2'><span>插槽可以使用默认值</span></slot>
            </div>
        </template>
    

    通过对填充标签设置属性slot='slot的name属性名'实现对特定插槽的替换

    前端模块化

    webpack

    Vue CLI

    render函数。三个参数,(标签名,属性值,内容)

    相比于vue1的将template转成抽象语法树ast再进行渲染不同,

    vue2中直接将组建进行render处理成虚拟dom。

    前端路由

    底层

    vue中默认是hash模式

    history.pushState()

    history.replaceState() 无法返回

    使用

    import VueRouter from 'vue-router';
    import Vue from 'vue';
    Vue.use(VueRouter);
    const routes = [
        {
            path: '',
            redirect: '/home',
            component: Home
        }
    ]
    
    const router = new VueRouter({
        routes,
        mode: 'history',
        linkActiveClass: 'active'
    })
    
    export default router;
    
    <router-link to='/home' active-class='.active' replace>首页</router-link>
    <!--默认渲染成a标签,可通过tag进行修改-->
    
    <router-view></router-view>
    

    class属性 : router-link-active

    <!--不使用router-link-->
    <button @click="homeclick">
    	home    
    </button>
    
    
    <!--通过代码修改路径-->
    <script>
    homeclick() {
    	this.$router.push('/home')
    }
    </script>
    
    
    离大侠再近一步!
  • 相关阅读:
    poj 2584 T-Shirt Gumbo (二分匹配)
    hdu 1757 A Simple Math Problem (乘法矩阵)
    矩阵之矩阵乘法(转载)
    poj 2239 Selecting Courses (二分匹配)
    hdu 3661 Assignments (贪心)
    hdu 1348 Wall (凸包)
    poj 2060 Taxi Cab Scheme (二分匹配)
    hdu 2202 最大三角形 (凸包)
    hdu 1577 WisKey的眼神 (数学几何)
    poj 1719 Shooting Contest (二分匹配)
  • 原文地址:https://www.cnblogs.com/Samo-Li/p/14290855.html
Copyright © 2011-2022 走看看