欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简简单单的Vue2(简单语法,生命周期,组件)

程序员文章站 2022-04-13 15:57:26
既然选择了远方,便只顾风雨兼程! __HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 简单入手 组件 在上面文章,我们简单的讲了前端框架的工程化,也就是MVVM,还有特别聊了下VUE的双向绑定机制,那这篇文章我们就来讲讲Vue的语法与特点,路由与插件,方便大家可以直接上手 ......

既然选择了远方,便只顾风雨兼程! __hans许

系列:

 

 

在上面文章,我们简单的讲了前端框架的工程化,也就是mvvm,还有特别聊了下vue的双向绑定机制,那这篇文章我们就来讲讲vue的语法与特点,路由与插件,方便大家可以直接上手。

介于是基础的嘛,可能来看的,没接触过前端,那可以先去看看我的前端系列,当然顾忌到大家可能是从jquery的时代过来的,我的例子就直接没有使用前端目录那样子了,每个例子一个一html,直接引用vue.js,链接走起:像jquery一样引用的vue例子(可以直接在目录之前加上 "" 就可以直接看到效果了)

简单入手

首先要使用某个js,肯定是要引用的js,

  1. 直接开发,可一直直接<script src="https://unpkg.com/vue"></script>
  2. 前端流行开发,npm i vue&&import vue from "vue";
  3. 这样就可以开始使用了。
  • 来个例子

    <div id="app">
        {{ message }}
    </div>
    
    var app = new vue({
      el: '#app',
      data: {
        message: 'hello vue!'
      }
    })
    

    这样在浏览器就可以看到hello vue!的字样了

  • 生命周期

咦,怎么不讲语法等等呢,怎么直接跳到生命周期呢?我只能说语法这种大多类似,也很多,大家看下就会了,讲生命周期,是觉得他比较重要。

例子:https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/4生命周期.html
大家可以f12可以看下效果,如果有装vue-devtools,可以试着改下值,然后再看下输出:

 

简简单单的Vue2(简单语法,生命周期,组件)
enter description here

 

每个东西其实都是有生命的,一次生命,一次周期

 

简简单单的Vue2(简单语法,生命周期,组件)
enter description here

 

生命周期是由你想创建一个实例开始的,生命周期很简单,都是在你做某件事前,会先执行一件(系列)事,然后再执行真正的操作。最后会再执行一件(系列)的事,最后会走上消亡。获取做事情之前还会被先劫持一会,做一些特殊操作,如判断,最后还是会回到正轨上来。

所以vue的生命周期也很简单,它由一系列的函数函数构成,它会在他们的周期,也就适当的时候被调用。

new vue({
        el: '#app',
        data: { message: "hello word!" },
        beforecreate: function () {
            console.info(`在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。` + new date().tolocalestring())
            console.log(this)
        },
        created: function () {
            console.info(`在实例创建完成后被立即调用。在这一步,实例已完成以下的配置: 数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。` + new date().tolocalestring())
            console.log(this)
        },
        beforemount: function () {
            console.info(`在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。` + new date().tolocalestring())
            console.log(this)
        },
        ...
        })

下面是生命周期钩子函数的表格:

 

简简单单的Vue2(简单语法,生命周期,组件)
enter description here

 

组件

或许你玩过其他框架,或许你玩过微信小程序,或许你玩过支付宝小程序,再或者你玩过钉钉小程序,好吧,你都玩过-_-,他们都是有组件化的概念的。那vue也有。
vue组件,就是可以复用的vue实例。
组件的data必须是函数

例子:https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/5组件化应用构建.html

  • 创建组件

    // 定义一个名为 button-counter 的新组件
        vue.component('button-counter', {
          data: function () {
            return {
              count: 0
            }
          },
          template: '<button v-on:click="count++">you clicked me {{ count }} times.</button>'
        })
    
    <div id="components-demo">
         <button-counter></button-counter>
    </div>
    
    new vue({ el: '#components-demo' })
    

    这样就创建了一个组件,并且使用了。组件有分全局注册与局部注册。顾名思义就是,全局都可以用,局部只有在器实例底下可以使用。

    1. 全局
      vue.component('component-a', { /* ... */ })
      vue.component('component-b', { /* ... */ })
      vue.component('component-c', { /* ... */ })
      
      new vue({ el: '#app' })
      
    2. 局部
      new vue({
             el: '#app',
            components: {
              'component-a': componenta,
              'component-b': componentb
            }
          })
      

那大家都知道,有组件的概念,肯定就是子父组件的传值,vue是靠prop给子组件传值,而子组件是靠event给父组件传值的

  • prop

值得注意html 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 dom 中的模板时,camelcase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

例子:https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/7子父组件的数据传递.html

  1. 简单例子

    vue.component('blog-post', {
      props: ['poptitle'],
      template: '<h3>{{ title }}</h3>'
    })
    
    <blog-post pop-title="my journey with vue"></blog-post>
    <blog-post pop-title="blogging with vue"></blog-post>
    <blog-post pop-title="why vue is so fun"></blog-post>
    
  2. 类型与验证
    可以看到下面,很明显type为类型,default为默认值,validator为验证。

        vue.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 匹配任何类型)
        propa: number,
        // 多个可能的类型
        propb: [string, number],
        // 必填的字符串
        propc: {
          type: string,
          required: true
        },
        // 带有默认值的数字
        propd: {
          type: number,
          default: 100
        },
        // 带有默认值的对象
        prope: {
          type: object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propf: {
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexof(value) !== -1
          }
        }
      }
    })
    
  3. 单向数据
    所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

  • 自定义事件

在了解自定义事件,需要先了解这个函数,这个函数由vue实例调用,是触发一个事件。然后我们可以使用v-on来监听

例子:https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/8组件的事件传递数据.html

<button v-on:click="$emit('enlarge-text')">
  enlarge text
</button>
<blog-post
  ...
  v-on:enlarge-text="postfontsize += 0.1"
></blog-post>
  • 插槽

slot我觉得大家也应该不陌生,也就插槽,插槽可以定在在组件模板的任意位置,在使用组件的时候,需要插在组件内部的内容,也就插槽,就是让开发自己定义的,值得一提,插槽是有名字的,名字不能重复,没有名字的为默认插槽,一个组件且只有一个默认的

  1. 组件内部

    <a
      v-bind:href="url"
      class="nav-link"
    >
      <slot></slot>
    </a>
    
    
  2. 形成内容

        <navigation-link url="/profile">
      <!-- 添加一个 font awesome 图标 -->
      <span class="fa fa-user"></span>
      your profile
    </navigation-link>
    
  3. 具名插槽

    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
    

那这边文章就将这些吧 ,这些较为基础,也最有用。都离不开他们的。