Vue简单使用及整合elementui

news2024/9/23 3:20:08

创建vue工程

在vue工程目录下npm install vue
在这里插入图片描述
下载离线vue
https://v2.vuejs.org/v2/guide/installation.html
在这里插入图片描述
引入工程中

<!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>

在这里插入图片描述
测试
在这里插入图片描述

双向绑定

<!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>

测试页面
在这里插入图片描述
修改vm对象，绑定的值跟着变化
在这里插入图片描述

事件处理

<!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工具

谷歌商店下载
在这里插入图片描述
在打开html时候可以看到有个vue选项看到vue中的对象
在这里插入图片描述

Vue模块化开发

全局安装npm install webpack -g
在这里插入图片描述
全局安装npm install webpack -g @vue/cli-init
在这里插入图片描述
安装 sudo npm install -g @vue/cli
在这里插入图片描述
创建文件夹，使用vue init webpack vue-demo
在这里插入图片描述
选择默认的
在这里插入图片描述
进入demo工程启动，npm run dev
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

1.新增组件

在这里插入图片描述

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

<script>

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

<style scoped></style>

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

在这里插入图片描述

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

在这里插入图片描述

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
在这里插入图片描述
在工程中也可以看到
在这里插入图片描述

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显示正常

在这里插入图片描述

4.添加Vue的快捷模版

在这里插入图片描述
在这里插入图片描述
粘贴保存

{
    "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>

在这里插入图片描述

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.测试

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/739677.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言指针进阶

C语言指针进阶

目录 0.指针初阶回顾&#xff1a; 1.字符指针 2.指针数组 3.数组指针 &#xff08;1&#xff09;数组指针的定义&#xff1a; &#xff08;2&#xff09;数组名和&数组名 &#xff08;3&#xff09;数组指针的使用 &#xff08;4&#xff09;数组指针的数组&#x…
阅读更多...
使用均值漂移来量化带宽分类数据

使用均值漂移来量化带宽分类数据

均值漂移概念 均值漂移的基本概念&#xff1a;沿着密度上升方向寻找聚簇点&#xff0c;其计算过程如下&#xff1a; 1 均值漂移算法首先找到一个中心点center&#xff08;随机选择&#xff09;&#xff0c;然后根据半径划分一个范围 把这个范围内的点输入簇x的标记个数加1 2 在…
阅读更多...
GPT和爬虫有什么区别?如何利用爬虫实现GPT功能

GPT和爬虫有什么区别?如何利用爬虫实现GPT功能

GPT&#xff08;Generative Pre-trained Transformer&#xff09;和爬虫是两个完全不同的概念和技术。GPT是一种基于Transformer模型的自然语言处理模型&#xff0c;用于生成文本&#xff0c;而爬虫是一种用于从互联网上收集数据的技术。 GPT是由OpenAI开发的一种深度学习模型&…
阅读更多...
以太网之ARP协议（八）

以太网之ARP协议（八）

一、概要 在网络通信中主要以IP为主机标识进行数据通信的&#xff0c;但实际的数据链路层传输以MAC地址为数据传输的节点地址。那设备之间又是如何通过IP地址确认对应主机的MAC地址的&#xff1f;这就是ARP协议的工作。 ARP是一种以目标IP地址为线索&#xff0c;用来定位下一个…
阅读更多...
300PLC转以太网模块plc300以太网通信模块

300PLC转以太网模块plc300以太网通信模块

摘要 工业通讯的发展已经迅速到了一个令人咋舌的地步&#xff0c;以太网通讯已经成为了工业通讯的主流。而今天&#xff0c;我们要介绍的是一款以太网通讯处理器——捷米特ETH-S7300-JM01&#xff0c;它不仅成熟、稳定&#xff0c;而且价格优惠&#xff0c;为工业以太网通讯领域…
阅读更多...
Qt对地震数据(文件格式*.Segd)实现将时域数据转频域数据

Qt对地震数据(文件格式*.Segd)实现将时域数据转频域数据

文件格式以segd为例&#xff0c;其他地震文件格式同理。 时域数据 时域数据通俗点讲就是我在某个时间段记录的一个值&#xff0c;然后经过一段时间后&#xff0c;产生的一组数据就是时域数据。 频域数据 频域数据是指信号在频率域上的表示&#xff0c;即信号的频率特性。频…
阅读更多...
PowerShell快速ssh

PowerShell快速ssh

文件 ~/.ssh/config 内容 Host masterHostName 192.168.10.154User root访问 $ ssh master 效果 进阶 配置秘钥 待续。。。
阅读更多...
Transform、GameObject、Rigidbody

Transform、GameObject、Rigidbody

文章目录 零、初衷和溯源一、Transform类二、GameObject类三、Rigidbody类 零、初衷和溯源 这三个类的API官方文档&#xff0c;有些杂乱——本可以把它们分门别类的整理好&#xff0c;结果却是凌乱的堆在一起&#xff0c;令人恼火。   之所以把它仨放一起总结&#xff0c;是因…
阅读更多...
【数据挖掘】时间序列教程【十】

【数据挖掘】时间序列教程【十】

5.4 通用卡尔曼滤波 上一节中描述的状态空间模型作为观测方程的更一般的公式 和状态方程 这里是一个p1 向量
阅读更多...
simulink stateFlow流程图

simulink stateFlow流程图

基础 修改分支优先级 使用matlab workspace变量 例题 输出数组输入数组的平方 for循环 使用脚本的数值 实现数组索引
阅读更多...
2021 RoboCom 世界机器人开发者大赛-本科组（初赛）

2021 RoboCom 世界机器人开发者大赛-本科组（初赛）

编程题得分&#xff1a;100 总分&#xff1a;100 7-1 懂的都懂 (20分) 众所周知&#xff0c;在互联网上有很多话是不好直接说出来的&#xff0c;不过一些模糊的图片仍然能让网友看懂你在说什么。然而对这种言论依然一定要出重拳&#xff0c;所以请你实现一个简单的匹配算法。 …
阅读更多...
图像分类论文阅读

图像分类论文阅读

该论文通过结合VGG-19和VIT模型，实现乳腺超声图像的分类Breast Ultrasound Images Dataset | Kaggle PyTorch VGG19复现代码 # VGG19.py import torch import torch.nn as nnclass Conv(nn.Module):def __init__(self, in_channels, out_channels, kernel_size=1, stride=1,…
阅读更多...
面向 “大模型” 的未来服务架构设计

面向 “大模型” 的未来服务架构设计

文章目录 大模型热潮大模型落地服务设计 or 重构未来的服务架构微服务化分层化 大模型应用架构架构设计图架构 Demo 实现 小结附录 大模型热潮 今年的互联网赛道中 “顶流” 非大模型莫属。 科技部新一代人工智能发展研究中心 5 月底发布的《中国人工智能大模型地图研究报告》显…
阅读更多...
极米H6 4K光学变焦版 打造全新4K观影体验

极米H6 4K光学变焦版 打造全新4K观影体验

随着时代的发展&#xff0c;拥有家用智能投影的家庭也越来越多了。当下许多家用投影仪都搭载了智能系统&#xff0c;内含大量片源。另外&#xff0c;投影仪还可以通过不同接口接入不同的设备&#xff0c;如游戏机、电脑、U盘等。只需要一台投影便可以实现在线追剧、听歌、游戏、…
阅读更多...
ZER-10-EP-L350C-224叠加式比例溢流阀放大器

ZER-10-EP-L350C-224叠加式比例溢流阀放大器

ZER-06-EP-L105C-224、ZER-06-EP-L210C-224、ZER-06-EP-L350C-224、ZER-10-EP-L105C-224、ZER-10-EP-L210C-224、ZER-10-EP-L350C-224叠加式比例溢流阀由主阀体和溢流阀、阀插件、佰业比例放大器组成&#xff0c;标准叠加安装接口&#xff0c;与换向阀等配合使用&#xff0c;便…
阅读更多...
【ELK企业级日志分析系统】安装与部署ELK详解

【ELK企业级日志分析系统】安装与部署ELK详解

ELK 企业级日志分析系统 1.ELK概述1.1 ELK简介1.2 可以添加的其它组件1.3 filebeat结合logstash带来好处1.4 为什么要使用ELK?1.5 完整日志系统基本特征 2.ELK的工作原理3.部署ELK集群3.1 安装Elasticsearch3.2 安装Elasticsearch-head插件3.3 安装ELK Logstash3.4 安装ELK Ki…
阅读更多...
HO49-二叉树的最近公共祖先

HO49-二叉树的最近公共祖先

leetcode原题链接&#xff1a;二叉树的最近公共祖先 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的…
阅读更多...
Linux中的GO更新与冲突

Linux中的GO更新与冲突

发行版&#xff1a;CentOS GO更新 在使用go get安装某模块时&#xff0c;报错&#xff1a; ../../pkg/mod/golang.org/x/sysv0.5.0/unix/syscall.go:83:16: undefined: unsafe.Slice ../../pkg/mod/golang.org/x/sysv0.5.0/unix/syscall_linux.go:2271:9: undefined: unsafe.…
阅读更多...
Verilog学习笔记5：简单的加法器

Verilog学习笔记5：简单的加法器

代码&#xff1a; //加法器 timescale 1ns/10ps module add( a, b, y ); input a; input b; output[1:0] y;assign yab;endmodule //testbench module add_tb; reg a; reg b; wire[1:0] y;add add(.a(a),.b(b),.y(y));initial begina<0;b<0;#10 a<1;b<0;#10 a&l…
阅读更多...
SpringMVC 中的视图如何渲染模型数据

SpringMVC 中的视图如何渲染模型数据

SpringMVC 中的视图如何渲染模型数据 SpringMVC 是一个基于 Spring 框架的 Web 框架&#xff0c;它提供了一种方便的方式来处理 HTTP 请求和响应。在 SpringMVC 中&#xff0c;视图是用来渲染模型数据的组件&#xff0c;它们负责将模型数据转换为 HTML、JSON、XML 等格式的响应…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023