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 thymeleaf热部署[通俗易懂]

    Springboot thymeleaf热部署[通俗易懂]缘起在实际开发中我们希望能更改代码后立刻看到效果,而无需重启应用。操作1、在配置文件中新增spring:thymeleaf:cache:false2、在pom.xml中加入DEV-tools依赖<!–让项目支持热更新–><dependency><groupId>org.springframework.boot&l…

    2022年5月21日
    78
  • 【180609】经典SQL语句大全(CHM)

    【180609】经典SQL语句大全(CHM)收集我们在平时使用SQL时的一些语法语句汇集,比如创建、备份、删除数据库的SQL脚本,这些当然是比较简了,还有复杂点的像备份、创建索引、复合SQL语句、创建视图、高级运算查询、EXCEPT运算符、INTERSECT运算符、使用外连接、SQL分组、复制或拷贝表、在线视图查询、存储过程调用、清理SQL、找重复记录等,另附有一些SQL经典技巧,比如精简SQL语句、压缩数据库、检查备份集、日志清除、数…

    2022年5月19日
    36
  • 实现不同网段mail服务器之间的邮件转发

    实现不同网段mail服务器之间的邮件转发

    2021年8月20日
    132
  • 集锦——浏览器每次访问自动更新网页,不用手工设置,附Google/firefox/Ie

    在做开发web开发的时候,经常要使用到浏览器来着进行调试,那么有时候自己修改了内容,可是在浏览器上还是没有显示出来,费了好久才发现是浏览器缓存的问题。还要强制刷新缓存 就是 Ctrl + F5。所以在开发时候,最好将自己的调试浏览器设置为访问自动刷新网页,不要使用页面的缓存。下面就是常用开发浏览器的设置:1. Chrome 浏览器打开到开发者模式:将Disable cache

    2022年2月24日
    265
  • 贪吃蛇代码实现_贪吃蛇游戏代码

    贪吃蛇代码实现_贪吃蛇游戏代码c语言实现简易贪吃蛇小游戏哦

    2022年9月5日
    3
  • 日志格式规范「建议收藏」

    日志格式规范「建议收藏」1简介在程序中写日志是一件非常重要,但是很容易被开发人员忽视的地方。写好程序的日志可以帮助我们大大减轻后期维护压力。在实际的工作中,开发人员往往迫于巨大时间压力,而写日志又是一个非常繁琐的事情,往往没有引起足够的重视。开发人员应在一开始就养成良好的日志撰写习惯,并且应在实际的开发工作中为写日志预留足够的时间。1.1日志的作用一般程序日志出自下面几个方面的需求:1.记…

    2022年5月1日
    59

发表回复

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

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