1. Toy模板网首页
  2. > Toy博客

Vue简单使用及整合elementui

9月前 作者：Persistence___ 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue简单使用及整合elementui。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

创建vue工程

在vue工程目录下npm install vue
Vue简单使用及整合elementui,vue.js,elementui,前端
下载离线vue
https://v2.vuejs.org/v2/guide/installation.html
Vue简单使用及整合elementui,vue.js,elementui,前端
引入工程中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <div id="app">
        <h1>
            {{name}}，好帅
        </h1>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三"
            }
        });
    </script>
</body>
</html>

Vue简单使用及整合elementui,vue.js,elementui,前端
测试
Vue简单使用及整合elementui,vue.js,elementui,前端

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>
            {{name}}，好帅,有{{num}}个人为他点赞
        </h1>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"张三",
                num: 1
            }
        });
    </script>
</body>
</html>

测试页面
Vue简单使用及整合elementui,vue.js,elementui,前端
修改vm对象，绑定的值跟着变化
Vue简单使用及整合elementui,vue.js,elementui,前端

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>

        <h1>
            {{name}}，好帅,有{{num}}个人为他点赞
        </h1>
    </div>
    <script>
        let vm = new Vue({
            el:"#app", //绑定元素   
            data:{  //封装数据
                name:"张三",
                num: 1
            },
            methods:{ //封装方法
                cancle(){
                    this.num -- ;
                }
            }
        });
    </script>
</body>
</html>

安装服务端vue2语法提示

Vue简单使用及整合elementui,vue.js,elementui,前端

安装浏览器vue工具

谷歌商店下载
Vue简单使用及整合elementui,vue.js,elementui,前端
在打开html时候可以看到有个vue选项看到vue中的对象
Vue简单使用及整合elementui,vue.js,elementui,前端

Vue模块化开发

全局安装npm install webpack -g
Vue简单使用及整合elementui,vue.js,elementui,前端
全局安装npm install webpack -g @vue/cli-init
Vue简单使用及整合elementui,vue.js,elementui,前端
安装 sudo npm install -g @vue/cli
Vue简单使用及整合elementui,vue.js,elementui,前端
创建文件夹，使用vue init webpack vue-demo
Vue简单使用及整合elementui,vue.js,elementui,前端
选择默认的
Vue简单使用及整合elementui,vue.js,elementui,前端
进入demo工程启动，npm run dev
Vue简单使用及整合elementui,vue.js,elementui,前端
Vue简单使用及整合elementui,vue.js,elementui,前端
Vue简单使用及整合elementui,vue.js,elementui,前端

自己编写自己的vue的模块化页面

1.新增组件

Vue简单使用及整合elementui,vue.js,elementui,前端

<template>
  <div>
    <h1>你好，hello，{{ name }}</h1>
  </div>
</template>

<script>

export default {
  name: 'Hello',
  data () {
    return {
      name: "张三"
    }
  }
}
</script>

<style scoped></style>

2.在index.js中引入新的组件并且添加新的路由配置

Vue简单使用及整合elementui,vue.js,elementui,前端

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

3.测试/hello

Vue简单使用及整合elementui,vue.js,elementui,前端

4.添加项目route本地跳转

在App.vue中添加 <router-link跳转

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/hello">去hello</router-link>
    <router-link to="/">去首页</router-link>
    <!-- 路由视图 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.测试

安装element ui

npm i element-ui
Vue简单使用及整合elementui,vue.js,elementui,前端
在工程中也可以看到
Vue简单使用及整合elementui,vue.js,elementui,前端

1.在main.js中引入elementUI模块

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2.在Hello.vue组件中添加element 元素

<template>
  <div>
    <h1>你好，hello，{{ name }}</h1>
    <el-radio v-model="radio" label="1" border>备选项1</el-radio>
    <el-radio v-model="radio" label="2" border>备选项2</el-radio>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      name: '张三',
      radio: '2'
    }
  }
}
</script>
<style scoped>

3.测试结果，radio显示正常

Vue简单使用及整合elementui,vue.js,elementui,前端

4.添加Vue的快捷模版

Vue简单使用及整合elementui,vue.js,elementui,前端
Vue简单使用及整合elementui,vue.js,elementui,前端
粘贴保存

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "//@import url($3); 引入公共css类",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "http-get请求": {
	"prefix": "httpget",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'get',",
		"params: this.\\$http.adornParams({})",
		"}).then(({ data }) => {",
		"})"
	],
	"description": "httpGET请求"
    },
    "http-post请求": {
	"prefix": "httppost",
	"body": [
		"this.\\$http({",
		"url: this.\\$http.adornUrl(''),",
		"method: 'post',",
		"data: this.\\$http.adornData(data, false)",
		"}).then(({ data }) => { });" 
	],
	"description": "httpPOST请求"
    }
}

5.创建组件

<!--  -->
<template>
        <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            tableData: Array(20).fill(item)
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped></style>

Vue简单使用及整合elementui,vue.js,elementui,前端

6.添加路由/table

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
import MyTable from '@/components/MyTable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

7.修改App.vue

将el-main抽离到组件里

<template>
<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']" router="true">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="/table">用户列表</el-menu-item>
          <el-menu-item index="/hello">去hello</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
    
    <el-main>
      <router-view></router-view>
      <!-- <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table> -->
    </el-main>
  </el-container>
</el-container>
</template>

<script>
  // export default {
  //   data() {

  //   }
  // };
</script>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

8.测试

Vue简单使用及整合elementui,vue.js,elementui,前端文章来源地址https://www.toymoban.com/news/detail-559459.html

到了这里，关于Vue简单使用及整合elementui的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue3中简单使用Mock.js

    Vue3中简单使用Mock.js

    mock.js简介   官方链接：Mock.js (mockjs.com)         前端开发人员用来模拟虚拟数据，拦截ajax请求，方便模拟后端接口 安装 使用         本文主要介绍在Vue项目中使用mock.js，包括axios发送请求与请求简单封装 创建mock文件夹，新建index.js文件         模拟数据可自己手动

    2024年02月02日
    浏览(48)

  • 前端小工具Vue+ElementUI+Clipboard ：快捷复制

    我们在日常经常会遇到这种功能(特别多见于C端)： 手机上操作不变，想要粘贴个信息比较麻烦，就会出现【点一点复制】 查看敏感信息一般就直接提示【已成功复制粘贴板】 对于网页上一长串显示的文字或者输入的文字，全部选中很长又很麻烦，这时候就提供\\\"快捷复制\\\"的

    2024年02月06日
    浏览(35)
  • Vue+ElementUI前端添加展开收起搜索框按钮

    Vue+ElementUI前端添加展开收起搜索框按钮

    2024年04月24日
    浏览(43)
  • Vue + ElementUI 实现后台管理系统模板 -- 前端篇

    Vue + ElementUI 实现后台管理系统模板 -- 前端篇

    使用场景分析： Home.vue 页面中，Header 部分有个折叠按钮，点击之后，可以折叠与展开 Aside 组件，这之间就设计到数据在组件间的共享。 使用 vuex 后，数据统一管理，当数据发生变化时，其所有引用的地方均会修改。 2、安装、模块化使用 vuex 1》安装 项目构建时，已经安装

    2024年04月11日
    浏览(40)

  • 在前端开发中，何时应该使用 jQuery，何时应该使用 Vue.js

    如果您是最近才开始进入 Web 前端开发领域的开发人员，那么您可能会听说过 jQuery。jQuery 是一个小巧而功能强大的 JavaScript 库，旨在简化跨浏览器 DOM 操作、事件处理、动画效果和 AJAX 等方面的操作，可以让开发人员更轻松地开发出高质量的网站和 Web 应用程序。 何时应该使

    2024年02月02日
    浏览(49)
  • Vue.js 3.x Composition APIs 及简单使用

    Vue.js 3.x Composition APIs 及简单使用

    源码组织方式的变化 Composition API 性能提升 Vite 源码全部采用 TS 重写，组织方式也发生变化，使用 Monorepo 的方式来组织项目的结构，把独立的功能模块都提取到不同的包中。 虽然重写，但是 90% 都兼容 2.x 的API，根据社区反馈，增加了 Composition API，组合式API，旨在解决开发超

    2024年02月08日
    浏览(44)
  • 【Vue】使用print.js插件实现打印预览功能，超简单

    【Vue】使用print.js插件实现打印预览功能，超简单

    目录 一、实现效果  二、实现步骤 【1】安装插件 【2】在需要打印的页面导入 【3】在vue文件中需要打印的部分外层套一层div，给div设置id。作为打印的区域 【4】在打印按钮上添加打印事件 【5】在methods中添加点击事件 三、完整代码   print.js插件，可以打印html、pdf、json数

    2024年02月14日
    浏览(48)
  • 如何使用前端框架（React、Angular、Vue.js等）？该如何选择？

    如何使用前端框架（React、Angular、Vue.js等）？该如何选择？

    聚沙成塔·每天进步一点点 前端入门之旅：探索Web开发的奇妙世界 欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而

    2024年02月07日
    浏览(56)

  • 前端vue项目使用Decimal.js做加减乘除求余运算

    运算结果是Decimal对象，需要使用.toNumber()转为数字

    2024年04月13日
    浏览(59)

  • Vue：关于微前端的整合

    1、微前端架构旨在 解决 单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个 普通应用演变成一个巨石应用(Frontend Monolith)后 ，随之而来的 应用不可维护的问题 。这类问题在企业级 Web 应用中尤其常见。 2、微前端是一种 类似于微服务的架构

    2023年04月09日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包