![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
EchoByCode
这个作者很懒,什么都没留下…
展开
-
Vue-UI框架-03-命令行引入Element-UI
1、1 引入:npm install element-plus --save1、2 main.js 配置import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'import router from './router'createApp(App).use(router).use(Ele原创 2021-12-25 13:46:01 · 156 阅读 · 0 评论 -
Vue-脚手架-02-图形化界面创建项目
1、进入 cmd 界面 输入命令: vue ui选择项目名称和文件位置创建项目-预设选择功能选择 Vue版本 以及es标准是否保存为模板然后就进入了创建:创建好了如下:启动项目启动好了,页面如下:...原创 2021-12-25 11:54:13 · 505 阅读 · 0 评论 -
Vue-脚手架-01-命令行安装脚手架以及创建项目
1、命令行创建1、1 安装npm(傻瓜式“下一步”就可以了)node下载官网: https://nodejs.org/en/download/ 1、2 进入cmdnpm install -g @vue/cli安装完成后,查看vue脚手架版本: vue -V创建一个项目: vue create projectName vue create vue_proj_01选择手动配置:这是配置完成后的一张配置图:创建项目完成后:进入项目的文件夹:运行该项目: np原创 2021-12-25 11:34:50 · 278 阅读 · 0 评论 -
Vue-进阶-09-命名路由的使用
1、1 命名路由:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2021-12-25 10:16:47 · 84 阅读 · 0 评论 -
Vue-进阶-08-动态路由的使用
1、1 动态路由:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2021-12-25 10:14:19 · 333 阅读 · 0 评论 -
Vue-进阶-07-路由重定向和嵌套路由的使用
1、1 路由重定向<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2021-12-25 10:08:36 · 217 阅读 · 0 评论 -
Vue-进阶-06-路由的使用
1、1 模拟路由的基本使用<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /&g原创 2021-12-25 10:05:14 · 69 阅读 · 0 评论 -
Vue-进阶-05-组件插槽的使用
1、1 组件插槽:父组件向子组件传递内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值原创 2021-12-24 21:33:29 · 77 阅读 · 0 评论 -
Vue-进阶-04-兄弟组件之间值的传递
1、1 兄弟组件之间值的传递<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>父组件</div> <div> <button原创 2021-12-24 21:11:07 · 72 阅读 · 0 评论 -
Vue-进阶-03-子向父组件之间值的传递
1、1 子向父组件之间值的传递<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}<原创 2021-12-24 21:02:09 · 57 阅读 · 0 评论 -
Vue-进阶-02-父向子组件之间值的传递
1、1 父组件向子组件传值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{pmsg}}</div> <!-- 给子组件传入一个静态的值 --&g原创 2021-12-24 20:46:56 · 72 阅读 · 0 评论 -
Vue-进阶-01-组件的用法
1、1 组件的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <!-- 组件使用是以HTML标签的形式使用 --> <!-- 在普通的标签模板中,必须使用短横线的方式原创 2021-12-24 20:23:24 · 66 阅读 · 0 评论 -
Vue-入门-10-过滤器的用法
1、1 过滤器的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <input type="text" v-model='msg'> <div>{{msg | u原创 2021-12-23 11:36:37 · 70 阅读 · 0 评论 -
Vue-入门-09-侦听器的用法
1、1 侦听器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div> <span>用户名:</span> <span>原创 2021-12-23 11:18:11 · 110 阅读 · 0 评论 -
Vue-入门-08-计算属性的用法
1、1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{msg}}</div> <div>{{reverseString}}</div原创 2021-12-23 11:09:59 · 60 阅读 · 0 评论 -
Vue-入门-07-自定义指令
1、1 全局自定义指令<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <input type="text" v-focus> <input type="text">原创 2021-12-23 11:00:38 · 181 阅读 · 0 评论 -
Vue-入门-06-表单基本操作
1、1 表单基本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) {原创 2021-12-23 10:40:15 · 83 阅读 · 0 评论 -
Vue-入门-05-循环结构
1、1 循环结构-遍历对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <!-- k 代表 key v 代表 value i 代表 index原创 2021-12-22 23:57:32 · 121 阅读 · 0 评论 -
Vue-入门-04-分支结构
1、1 分支结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <input type="text" v-model='score'> <div v-if='score&原创 2021-12-22 23:33:08 · 117 阅读 · 0 评论 -
Vue-入门-03-样式绑定
1、1 样式绑定:通过对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .active { border: 10px solid black; width: 100px; height: 100原创 2021-12-22 23:26:00 · 69 阅读 · 0 评论 -
Vue-入门-02-常用命令
1、1 v-on<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{num}}</div> <div>原创 2021-12-22 23:01:29 · 61 阅读 · 0 评论 -
Vue-入门-01-常用命令
1、1 插值表达式的使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <div>{{msg}}</div> <div>原创 2021-12-22 22:28:03 · 80 阅读 · 0 评论