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

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的属性
         }
      1. 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">
      3. 样式绑定 — :style

        • data:{
             fontsize: 16,
             top: 10
          }
          <div :style="{fontSize: fontsize+'px', 'padding-top': top+'px'}">
        • CSS 属性名可以用驼峰式 或短横线分隔(记得用引号括起来)来命名
      4. 绑定事件 — v-on:

        • 用法
          <button v-on:click="add">+1</button>
          <button v-on:click="n+=1">n+1</button>

        • 简写
          <button @click="n+=1">+1</button>
      5. 条件判断 — v-if

        •  <div v-if="x>0">x大于0</div>
           <div v-else-if="x===0">x等于0</div>
           <div v-else="">x小于0</div>

          用法显而易见,很好理解

      6. 循环 — v-for

        • for(value,key) in 对象 / for (item,index) in 数组

           <ul>
             <li v-for="(item,index) in arrary" :key="index">
                {{index}}:{{item}}
             </li>
           </ul>
           <ul>
             <li v-for="(value,key) in arrary" :key="key">
                {{key}}:{{value}}
             </li>
           </ul>
        • :key="index"会有bug,最好不要用index当作key
      7. 显示/隐藏 — v-show

        • <div v-show="n%2==0"> n是偶数 </div>
        • 近似于<div :style={display: n%2==0? 'block':'none' }> n是偶数 </div>
      8. 修饰符

        • v-on:{.keyCode| .keyAlias} .prevent, .stop 等等

          • <input @keypress.13="fn" />:用户键盘输入回车时,调用fn
          • <input @keypress.enter="fn" />:输入回车,调用fn
          • <a @click.prevent="fn"></a>:阻止默认事件
          • <a @click.stop="fn"></a>:停止事件冒泡
        • v-bind: .sync 等等

        • v-model: .lazy .number .trim
        • 更多修饰符 Vue文档
  5. directives - 指令

    • 内置指令: v-on, v-for, v-if 等等
    • 自定义指令: v-xxx
    • 两种写法:

      1. 声明一个全局指令:
        Vue.directive('x',directiveOptions)
      2. 声明一个局部指令

        new Vue({
           ...
           directives:{
               "x":directiveOptions
           }
        })
    • directiveOptions里有哪些属性?

      1. bind(el,info,vnode,oldVnode) - 类似生命周期中created
      2. inserted(el,info,vnode,oldVnode) - mounted
      3. update(el,info,vnode,oldVnode) - updated
      4. componentUpdated(el,info,vnode,oldVnode) - 基本不用
      5. unbind(el,info,vnode,oldVnode) - destroyed
    • 指令的作用:

      1. 主要用于dom操作
      2. 如果某个dom操作经常使用,或者过于复杂,可以封装为指令,简化代码。
  6. mixins - 混入

    • 写法

      //demo.js内
      const demo = {
        data(){ return { 
            a:0,
            ...//其他公共属性
            }
        }
        methods:{ 
            add(a){ return a+1 } 
            ...//其他公共方法
        }
      }
      
      //组件Demo1内
      <script>
      import demo from "./demo.js"
      export default{
        mixin:[demo]
      }
      </script>
      
      //组件Demo2内
      <script>
      import demo from "./demo.js"
      export default{
        mixin:[demo]
      }
      </script>
    • 作用:

      • 减少data,methods,钩子的代码重复
      • 实质上就是复制。
    • 智能合并
  7. extends - 继承

  8. provide/inject - 提供/注入


未完待续.

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

上一篇:前端|LeetCode155_最小栈
下一篇:swiper.js loop 小坑

相关推荐

  • 🚩Vue源码——组件是如何注册的

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 在上一篇 🚩Vue源码——组件...

    2 天前
  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    7 天前
  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    4 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    5 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    4 个月前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    5 个月前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rc-bullets,项目约70%的代码基于rc-bullets,首先要感谢这个项目的作者...

    8 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的**“类“**究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​...

    6 个月前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Github,欢迎 Star,一起接水💧 作为一个在互联网公司面一次拿一次 Offer 的面霸,打败了无...

    6 个月前

官方社区

扫码加入 JavaScript 社区