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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • springboot打包成jar_springboot精简打包

    springboot打包成jar_springboot精简打包Spring boot打war部署到tomcat上- 第一步 “` @MapperScan(“com.yglh.mapper”) @SpringBootApplication public class YglhApplication extends SpringBootServletInitializer { public static void main(String[] args) { SpringApplication.run(Yg..

    2022年8月8日
    3
  • JDBC连接数据库6个步骤

    JDBC连接数据库6个步骤JDBC连接数据库,创建一个以JDBC连接数据库的程序,包含7个步骤:   首先准备JDBC所需的四个参数(user,password,url,driverClass)(1)user用户名(2)password密码(3)URL定义了连接数据库时的协议、子协议、数据源标识,它们之间用冒号隔开。  书写形式:  协议:子协议:数据源标识       协议:在JDBC中总是以jdb…

    2022年7月12日
    15
  • sftp使用方法_sftp服务

    sftp使用方法_sftp服务参考: https://baike.baidu.com/item/sftp参考:https://www.jianshu.com/p/64d571913185    要谈sftp(SSHFileTransferProtocol),首先要谈ftp(FileTransferProtocol),大家都知道ftp是文件传输协议,它基于tcp协议,可以用来发送文件。刚开始学web开发的时候,接…

    2022年10月7日
    2
  • WinSCP怎么导入filezilla中的站点?

    WinSCP怎么导入filezilla中的站点?

    2021年10月8日
    44
  • Kibana介绍、安装和使用「建议收藏」

    Kibana介绍、安装和使用「建议收藏」ES之Kibana下面就Kibana对ES的查询监控作介绍,就是常提到的大数据日志处理组件ELK里的K。  什么是Kibana?现引用园友的一段对此的介绍,个人觉得比较全。  Kibana是一个针对Elasticsearch的开源分析及可视化平台,用来搜索、查看交互存储在Elasticsearch索引中的数据。使用Kibana,可以通过各种图表进行高级数据分析及展示。  Kibana让海量数据更容…

    2022年6月11日
    94
  • UE4蓝图简介[通俗易懂]

    UE4蓝图简介[通俗易懂]蓝图简介蓝图内容示例Onthispage:概述蓝图的工作原理?常用的蓝图类型蓝图还能够做什么?蓝图编辑器和图表概述Blueprints(蓝图) 是特殊类型的资源,提供一

    2022年8月6日
    3

发表回复

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

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