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那样自动改变。
在这里插入图片描述

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 全面解决Generic host process for win32 services遇到问题需要关闭

    全面解决Generic host process for win32 services遇到问题需要关闭解决WIN补丁系统开机后弹出Generichostprocessforwin32services遇到问题需要关闭!出现上面这个错误一般有三种情况。1.就是补丁。开机后会提示GenericHostProcessforWin32Services遇到问题需要关闭”“RemoteRrocedureCall(RPC)服务意外终止,然后就自动重起电脑。一般该病毒会在补丁HKEY_

    2022年10月12日
  • Quartus II 使用详解

    Quartus II 使用详解今天早上做了《计算机组成原理》课的第一次实验。在这介绍一下QuartusⅡ如何使用,希望能帮到有需要的人。1、新建工程项目。2、填写项目存储路径和工程名,不要出现中文路径。3、添加已存在文件(可选),在【Filename】下选择已经存在的工程项目,利用【Add】或【Addall】命令添加文件到新工程,点击【Next】4、选择设备系列,并在【de…

    2022年10月16日
  • es6模板字符串_if判断字符串

    es6模板字符串_if判断字符串ES6模板字符串if语句判断`<ul><li><span></span><span${info.realname?’class=”hidden”‘:”}></span><span></span></li></ul>`…

  • excel计算两个经纬度距离_经纬度与距离换算公式

    excel计算两个经纬度距离_经纬度与距离换算公式1.参考:http://jingyan.baidu.com/article/48b558e34df4d47f39c09a42.html 在E2单元格输入公式=6371004*ACOS(1-(POWER((SIN((90-B2)*PI()/180)*COS(A2*PI()/180)-SIN((90-D2)*PI()/180)*COS(C2*PI()/180)),2)+POWER((SIN(…

  • 话说软件详细设计工具[通俗易懂]

    在软件设计是需要写软件详细说明书,设计此文档的时候,肯定少不了工具.现在我们就来了解一下软件详细设计的工具.1)程序流程图         程序流程图又称为程序框图,它是最古老,应用最广泛且最有争议描述详细设计的工具.它易学,表达算法直观,缺点是不够规范,特别是使用箭头会使质量受到很大的影响.为了使它能够描述结构化的程序,限制只能用

  • idea2021.3 激活码(JetBrains全家桶)

    (idea2021.3 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html1STL5S9V8F-eyJsaWNlbnNlSW…

发表回复

您的电子邮箱地址不会被公开。

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