vue + element 创建

vue + element 创建vue + element 创建

大家好,又见面了,我是你们的朋友全栈君。

vue + element 创建教程

1.环境准备

  1. node安装

    1. node版本:v10.15.3
    2. node下载地址:https://nodejs.org/zh-cn/
  2. vue-cli安装

    1. 全局安装vue-cli
    npm install --global vue-cli
    
    

2.创建 vue + element 项目

在这里插入图片描述

  1. 创建 vue 项目并初始化

    vue init webpack my-project
    
    
  2. 回车默认操作

  3. 安装项目

    npm install
    
    
  4. 运行项目

    npm run dev
    
    
  5. 引入element

    1. 安装element
 ```
 npm i element-ui -S

 ```
   
   2. main.js 中写入一下内容  
  import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
el: '#app',
render: h => h(App)
})

生命周期:

beforecreate : 一般使用场景是在加 loading事件 的时候
created :处于loading结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载)
beforemount:处于组件创建完成,但未开始执行操作
mounted :处于发起后端请求,获取数据,配合路由钩子执行操作(DOM渲染完成,组件挂载完成 )
beforeupdate、updated:处于数据更新的前后
beforeDestroy:当前组件还在的时候,想删除组件
destroyed :当前组件已被销毁,清空相关内容
created 与 mounted 的区别

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

mounted 与 methods 的区别

mounted 是生命周期方法之一,会在对应生命周期时执行。

methods 是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行,只执行逻辑,返回值可有可无。

computed 与 watched 的区别

computed 是计算属性,也可以理解为一个方法。其中计算的结果如果不发生改变就不会触发,且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。

watched 属性是手动定义的所需监听的值,不同的数据可以在其中多次定义监听值,这时会消耗一定性能,他并不能像computed那样自动改变。
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/106442.html原文链接:https://javaforall.net

(0)
上一篇 2022年4月23日 上午9:40
下一篇 2022年4月23日 上午9:40


相关推荐

  • VScode下MarkDown【自动生成目录】 和 【画流程图】(最全教程)

    VScode下MarkDown【自动生成目录】 和 【画流程图】(最全教程)关于插件 MarkdownPrev MPE 的使用技巧目录 关于插件 MarkdownPrev MPE 的使用技巧 0 Preview 预览 1 关于 TOC2 绘制流程图 2 0 简介 2 1flow2 2mermaid2 2 0 配置绘图主题颜色 2 2 1Flowchart 流程图 2 2 2Seque

    2026年3月18日
    2
  • Java Integer最大值最小值输出

    Java Integer最大值最小值输出System.out.println(Integer.MAX_VALUE);System.out.println(Integer.MAX_VALUE+1);System.out.println(Integer.MIN_VALUE);System.out.println(Integer.MIN_VALUE-1);输出结果如下:2147483647-214748364

    2025年10月7日
    4
  • C语言const的用法

    C语言const的用法1 const 的用法 const 是 constant 的缩写 意思是 恒定不变的 它是定义只读变量的关键字 用 const 定义只读变量的方法很简单 就在定义变量时前面加 const 即可 如 constdoublep 3 用 const 定义的变量的值是不允许改变的 不允许给它重新赋值 即使是赋相同的值也不可以 所以说它定义的是只读变量 这也就意味着必须在定义的时候就给它赋

    2026年3月19日
    2
  • setproperty java_Java中System.setProperty()的用法

    setproperty java_Java中System.setProperty()的用法该方法的作用是:设置指定键指示的系统属性在实际项目中发现,如果一个服务器下放置了多个web项目的话,在一个项目中通过调用System.setProperty设置了某个值,再另一个项目中也能获取到该值,所以如果想在一个项目中设置全局变量时尽量避免使用这个方法,应该调用相应的appContext。/**设置指定键对值的系统属性*setProperty(Stringprop,Stringva…

    2022年7月12日
    18
  • egret 音乐播放

    egret 音乐播放播放背景音乐 exportlet curBgMusic egret Sound null exportlet curBgMusicUr string null exportlet curBgMusicCh egret SoundChannel null exportfuncti url

    2025年10月8日
    8
  • Java邮件发送详解

    Java邮件发送详解电子邮件要在网络上实现邮件功能,必须要有专门的邮件服务器。这些邮件服务器类似于现实生活中的邮局,它主要负责接收用户投递过来的邮件,并把邮件投递到邮件接收者的电子邮箱中。SMTP服务器地址:一般是smtp.xxx.com,比如163邮箱是smtp.163.com,qq邮箱是smtp.qq.com。电子邮箱(E-Mail地址)的获得需要在邮件服务器上进行申请。比如我们要使用QQ邮箱,就需要开…

    2022年5月15日
    36

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号