JS框架:Vue 的实用主义全解

2020-02-12

Vue的实用主义全解

options里有什么

  • Vue(options)中,options包含类属性

    1. 数据:data, props, propsData, computed, methods, watch
    2. dom:el, template, render, renderError
    3. 生命周期钩子:beforeCreate, created, beforeMount, mounted, beforeUpdate, Updated, actived, deactived, beforeDestroy, destroyed, errorCaptured
    4. 资源:directives, filters, components
    5. 组合:parent, mixins, extends, provide, inject
    6. 其他:暂时不看。

基础属性

  1. el - 挂载点

    • 用法:new Vue({ el:'#app' })
      等价于:new Vue().$mount('#app')
  2. data - 内部数据

    • 用法:data:{...} / data(){ return{...} }
      支持函数和对象形式,推荐函数写法
  3. methods - 方法

    • 事件处理或普通函数
  4. components - 组件

    • 用法:

      import Cpn form './Cpn.vue'
      ...
      new Vue({
          components:{
              Abc: Cpn
          }
          template:`
              <abc/>
          `
          ...
      })

    • 组件的其他引入方法:

      1. 页面内创建组件:

        //第一个参数为组件名,第二个参数是vue实例中的options
          Vue.component("Abc",{
            template: "<div>n</div>"
             ...
        })

      2. 前两种的结合

        new Vue({
             components:{
               Abc:{
                     template:``,
                     methods:{}
                    ...
               }
            }
        })

      3. 命名规则: 组件一般都以大写字母开头。
  5. 生命钩子:

    • created(){...}实例出现在内存中时调用
    • mounted(){...}//实例出现在页面中时调用
    • updated(){...}//实例数据更新时调用
    • destroyed(){...}//实例被销毁时调用
  6. props:
  • 定义:自定义组件的属性
  • 使用方法:

    //Demo组件内:
    export default{
        props:['counter']   //也可以传回调函数
    }
        //main.js内:
    template:`
        <Demo counter="1"/>
    `

  • 注意:如果想给自定义组件的属性赋值变量,需要前边加冒号“:”。例如:

    //main.js内
    ...
    data:{ n: 5 }
    template:`<Demo :counter:"n"=""/>`

进阶属性

  1. computed - 计算属性

    • 语法:

      1. data:{ firstName:'Oliver', lastName:'Young' }
           computed:{ //相当于只有get方法
             Name(){ 
                 return this.firstName+this.lastName 
             }
           }

      2. computed:{
               Name:{
                 get(){ return this.firstName+this.lastName }
                 set(value){ this.firstName=value }
               }
           }

    • 优点:

      简化代码,避免重复,方便修改
      自带缓存功能:如果依赖的属性没有变化,则不会重新计算

    • 何时使用:如果一个数据依赖于其他数据,使用computed
  2. watch - 侦听

    • 用途:数据变化时,调用一个函数
    • 语法:

      1.

      watch:{ o1: function(newVal,oldVal){}, //newVal和oldVal是Vue传给你用的 o2(){}, //es6语法 o3:[f1,f2] //依次执行f1,f2 o4:{ handler(){//处理函数}, deep: true/false, //见下方解释 immediate: true/false //第一次是否执行 }, o5: 'callbackName', //回调函数,写在methods里 "obj.a": function(){} //侦听obj的属性 }

      2.  `vm.$watch('obj',fun,{deep:true})`

    • 什么叫“变化”?

      1. 简单类型:值变了,就是变了。
      2. 复杂类型(对象):地址变了,才算变了。如:原本是obj:{num:1},重新赋值为obj:{num}:1,分配了新的内存,所以变了。
      3. 当deep=true时,obj.a变了也意味着obj变了。
  3. computed V.S watch

    1. computed:计算属性; watch:侦听。
    2. computed

      • 调用时不需要加括号()
      • 会自动缓存。在依赖不变的情况下不会重新计算。
    3. watch:

      • 如果监听的属性变化时,执行一个回调
      • Vue框架会传给回调两个参数,依次是newValue,oldValue
      • immediate:第一次渲染时,是否监听

        • deep:监听一个对象时,是否监听对象里属性的变化
  4. template

    • 三种写法

      1. 写在HTML里(vue完整版)

        //index.html
        <div id="app" @click="add">{{n}}</div>
         //main.js
        const vm = new Vue({
             el:'#app',
             data(){ return{
                 n:0
             }},
             methods:{
                 add(){ this.n+=1 }
             }
        })

      2. 写在options里(vue完整版)

        //index.html
        <div id="app></div>
         //main.js
        const vm = new Vue({
             el:'#app',
             template:`
                 <div>
                    {{n}}
                    <button @click=" add"="">+1
                </div>
          `,
             data(){ return{ n:0 } },
             methods:{
                 add(){ this.n+=1 }
             }
        })

      3. 配合.vue文件(vue运行时版)

        //Demo.vue
        <template>
          <div>
              {{n}}
              <button @click="add">+1</button>
          </div>
        </template>
        <script>
          export default {
              data(){ return{ n:0 } },
              methods:{
                  add(){...}
              }
          }
        </script>
        <style>
          //这里写css
        </style>
        
          //index.html
        <div id="app"/>
        
          //main.js
        import Demo from './Demo'
        new Vue({
          render: h => h(Demo)
        }).$mount('#app')

    • template 模板语法

      1. 表达式 — {{ }}

        • {{ content }}: content可以是data中的数据,表达式,函数调用
      2. 绑定属性 — v-bind:

        • 当标签的属性需要使用data域中的数据时,有两种写法。例子如下:

          data:{ className:'red' }
           ...
          <div :class="className">
            //或 <div v-bind:class="className">

  • 样式绑定 — :style

  • CSS 属性名可以用驼峰式 或短横线分隔(记得用引号括起来)来命名
  • 绑定事件 — v-on:

  • 条件判断 — v-if

  • 循环 — v-for

  • 显示/隐藏 — v-show

  • 修饰符

  • directives - 指令

  • mixins - 混入

  • extends - 继承

  • provide/inject - 提供/注入


  • 未完待续.

    </hr>
    原文链接:segmentfault.com
    阅读全文

    上一篇:前端|LeetCode155_最小栈
    下一篇:swiper.js loop 小坑
    相关教程
    关注微信

    扫码加入 JavaScript 社区

    相关文章

    首次访问,需要验证
    微信扫码,关注即可
    (仅需验证一次)

    欢迎加入 JavaScript 社区

    号内回复关键字:

    回到顶部