Vue简单使用及整合elementui

创建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.hqwc.cn/news/21969.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C# 参数传递（引用类型参数）

C# 参数传递（引用类型参数）

目录 一&#xff0c;引言 二&#xff0c;引用类型参数作为值参数传递 三&#xff0c;引用类型参数作为引用参数传递 一&#xff0c;引言 方法中参数的传递方式主要有值参数传递和引用参数传递&#xff08;ref&#xff0c;out&#xff09;&#xff0c;而参数有可以分为值类型…
阅读更多...
构造稀疏矩阵例子

构造稀疏矩阵例子

构造稀疏矩阵的目的是在处理具有大量零元素的大规模数据时&#xff0c;节省内存空间和计算资源&#xff0c;并提高计算效率。稀疏矩阵是一种特殊的矩阵&#xff0c;其中包含许多零元素和一些非零元素。 #include "pcl.h" #include "common.h" #include &qu…
阅读更多...
设计模式——责任链模式

设计模式——责任链模式

责任链模式 定义 使多个对象都有机会处理请求&#xff0c;从而避免了请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;知道有对象处理它为止。 优缺点 优点 能将请求和处理分开。请求者可以不用知道是谁处理的&a…
阅读更多...
Java设计模式之结构型-代理模式（UML类图+案例分析）

Java设计模式之结构型-代理模式（UML类图+案例分析）

目录 一、基础概念 二、UML类图 1、静态代理类图 2、动态代理类图 三、角色设计 四、案例分析 1、静态代理 2、JDK动态代理 3、Cglib动态代理 五、总结 一、基础概念 代理模式是一种结构型设计模式&#xff0c;它用一个代理对象来封装一个目标对象&#xff0c;通常…
阅读更多...
Python+docx实现python对word文档的编辑

Python+docx实现python对word文档的编辑

前言&#xff1a; 该模块可以通过python代码来对word文档进行大批量的编辑。docx它提供了一组功能丰富的函数和方法&#xff0c;用于创建、修改和读取Word文档。下面是docx模块中一些常用的函数和方法的介绍&#xff1a; 安装&#xff1a;pip install docx 一、准备一个word文档…
阅读更多...
MYSQL执行一条SELECT语句的具体流程

MYSQL执行一条SELECT语句的具体流程

昨天CSDN突然抽风 我一个ctrlz把整篇文章给撤掉了还不能复原 直接心态崩了不想写了 不过这部分果然还是很重要,还是写出来吧 流程图 这里面总共有两层结构Server层 储存引擎 Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现&#xff0c;主要包…
阅读更多...
WebSocket理解

WebSocket理解

WebSocket理解 WebSocket定义与HTTP关系相同点:不同点&#xff1a;联系总体过程 HTTP问题长轮询Ajax轮询 WebSocket特点 WebSocket 定义 本质上是TCP的协议 持久化的协议 实现了浏览器和服务器的全双工通信&#xff0c;能更好的节省服务器资源和带宽 与HTTP关系 相同点: 基于…
阅读更多...
【bug】flameshot在ubuntu上的4K屏幕，双屏幕上用不了截图

【bug】flameshot在ubuntu上的4K屏幕，双屏幕上用不了截图

问题 直接在4K屏幕上运行flameshot截图&#xff0c;直接黑屏 主屏 &#xff1a;4K 副屏&#xff1a;2k 解决 2.1长按1-2秒开机键&#xff0c;先回到桌面。 2.2 设置主屏缩放为125% 2.3 设置键盘快捷键命令为env QT_AUTO_SCREEN_SCALE_FACTOR1 flameshot gui 替代flameshot的…
阅读更多...
zeppelin的hive使用

zeppelin的hive使用

zeppelin的hive使用 配置项 default.driver org.apache.hive.jdbc.HiveDriver default.url jdbc:hive2://192.168.xxx.xxx:10000 default.user hiveHive使用&#xff1a;点击create new note Default Interpreter选择hive
阅读更多...
动态表单实现原理

动态表单实现原理

目录 动态表单是什么 动态表单的关键 前后端职责 数据库与表结构 功能实现与改进建议 动态表单是什么 静态表单是很常见&#xff0c;也是常规做法&#xff0c;其表单的结构是固定的&#xff0c;通常情况下一个表单对应数据库的一张表&#xff0c;表单中一个数据项对应数据表的一…
阅读更多...
idea创建webapp文件夹

idea创建webapp文件夹

结果的图片&#xff1a; 第一步&#xff1a; file-》project structure 第二步&#xff1a; 修改路径&#xff0c;点击右侧“Deloyment descriptors”下面的笔进行修改。 // 增加了src\main // web修改为了webapp C:\Users\www12\Desktop\huwantiku2\src\main\webapp\WEB-IN…
阅读更多...
【Java】JVM执行流程、类加载过程和垃圾回收机制

【Java】JVM执行流程、类加载过程和垃圾回收机制

JVM执行流程执行引擎本地方法接口运行时数据区方法区堆虚拟机栈(线程私有)本地方法栈(线程私有)程序计数器(线程私有) 堆溢出问题类加载类加载的过程加载连接验证准备解析 初始化 双亲委派机制 垃圾回收死亡对象的判断算法引用计数算法可达性分析算法 垃圾回收的过程标记-清除算…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023