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


相关推荐

  • Java中的Map及其使用「建议收藏」

    Java中的Map及其使用「建议收藏」MapMap集合概述和特点概述:将键映射到值的对象一个映射不能包含重复的键每个键最多只能映射到一个值Map接口和Collection接口的不同Map是双列的,Collection是单列的Map的键唯一,Collection的子体系Set是唯一的Map集合的数据结构针对键有效,跟值无关;Collection集合的数据结构是针对元素有效Map集合的功能概述a:添加功能Vput…

    2022年7月8日
  • php小程序开发完整教程_微信小程序request封装

    php小程序开发完整教程_微信小程序request封装flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。flyio官方文档flyio下载地址原生微信小程序中使用flyio请求,封装代码如下一、在src/utils下新建request.js文件,文件代码如下:/*flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多

    2022年9月8日
  • 配置设置文件怎么生成的_centos6.8网络配置

    配置设置文件怎么生成的_centos6.8网络配置前言每个测试用例都应该有config部分,可以配置用例级别。比如name、base_url、variables、verify、export等等案例演示fromhttprunnerimport

    2022年7月28日
  • C++爱心代码[通俗易懂]

    C++爱心代码[通俗易懂]C++爱心代码效果图代码#include<stdio.h>#include<Windows.h>intmain(){ floatx,y,a; for(y=1.5;y>-1.5;y-=0.1) { for(x=-1.5;x<1.5;x+=0.05) { a=x*x+y*y-1; putchar(a*a*a-x*x*y*y*y<=0.0

    2022年10月13日
  • Spring之ORM[通俗易懂]

    Spring之ORM[通俗易懂]Spring之ORM

    2022年4月22日
  • mysql查询每个用户的第一条记录_mysql怎么创建用户

    mysql查询每个用户的第一条记录_mysql怎么创建用户数据库记录:MYSQL查询不同用户最新的一条记录方法1:查询出结果后将时间排序后取第一条(只能取到一条,并且不能查询不同客户的记录)SELECTCUSTOMER_ID,CONTENT,MODIFY_TIMEFROM`service_records`ORDERBYMODIFY_TIMEDESCLIMIT1;查询结果:方法2:查询排序后groupby(先按照MODIFY_TI…

    2022年9月7日

发表回复

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

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