【狂神说Java】Vue最新快速上手教程通俗易懂
法国赌神皮尔克松:
p9{
"name":"狂神说java",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
扛枪打鬼子987:
idea 安装 Vue 插件没有Vue component选项
1. 点击 file 打开设置 settings，展开 Editor 找到 file and code templates
2. 找到 Vue single file component 并选中它，然后点击copy
3. 复制后底部出现了一个新的文件
4. 把 Name 改成 Vue Component，然后把代码里的 “COMPONENT_ ”删掉，最后点 ok 就完事了
【回复】我也没有 不过我new了文件叫a.vue 不过文件是空的, 然后我这时候再去new文件就出现Vue component,然后点这个创建文件 就成功了 哈哈哈误打误撞
【回复】也可以直接随便创建一个.vue结尾的文件，然后再点右键就能看到模板了
三七也叫叁柒:
p16登录模块代码
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
【回复】我来填坑了：
1.所有的中文括号【】替换为【】；
2.v-on:click="onSubmit('loginForm')",不要动，不要修改，与<el-form ref="loginForm" 两个保持一致；
3.methods中添加handleClose: function () { console.log("Handle Close，空函数"); }；
4..登陆FORM外嵌套<el-card class="box-card"></ek-card>,样式表这一句就行<style scoped>.box-card {width: 480px;margin: auto;}</style>；
5.有错再问我吧，我帮你百度
【回复】下面的发不出去了 不知道为啥
fat_rabbit:
全栈工程师就是全都干，程序员永远不能停止学习
【回复】回复 @MeyoLY :你和楼下情侣头像了
[doge]
【回复】回复 @醉心静 :停止学习，就会被辞退[偷笑]
松果pinenut:
P15，代码
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎 登录</h3>
<el-form-item label=" 账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label=" 密码" prop="password">
<el-input type="password" placeholder=" 请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit( 'loginForm' )">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handLeClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog- footer">
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
【回复】</script>
<style lang="scss" scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
【回复】<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
//表单验证，需要在el-form-item 元素中增加prop 属性
rules: {
username: [
{required: true, message: " 账号不可为空", trigger: 'blur'}
],
password: [
{required: true, message: " 密码不可为空 ", trigger: 'blur'}
]
},
//对话框显示和隐藏
dialogVisible: false
}
},
【回复】methods: {
onSubmit(formName) {
//为表单绑定验证功能
this.$refs 【formName】.validate((valid) => {
if (valid) {
//使用vue-router路由到指定页面，该方式称之为编程式导航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
Thunderstorm_:
p15npm install vue-router --save-dev运行后启动报错的使用cnpm install vue-router@3.1.3 --save-dev，那个版本太高了，用不了 ，太坑了，搞了好久
不继丶:
p11大坑 自定义事件名字不能大写。前端对大小写区分不是很严格 建议不使用驼峰命名
【回复】这里我也踩坑了，后来发现驼峰命名可以在大写字母前加连接号解决
【回复】+1找了一个小时bug硬是没找到后面才发现
笔尖De落寞:
我从16岁开始打拼，18岁买了人生第一台车，20岁开了自己的公司，22岁公司上市，市值100亿，25岁个人资产上百亿，今年28岁个人旗下有8个上市公司，现金800亿，基金，股票无数，我从来没靠任何一个人，我说什么了？这都是靠我一个人努力想象出来。
【回复】想象力挺丰富，我做梦的时候 比你差点
【回复】瞧你这点出息我做梦以已经统治地球当上地球王啦
【回复】回复 @醉心静 :毁灭地球
-樱-吹-雪-:
p9
<!--导入JS文件-->
<script src="https://cdn.jsdelivr.net/nmp/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript"></script>
dalivk:
无聊刷b站，看到狂神的vue，熬夜肝完，视频对后端开发人员友好，概念性的东西都有后端知识的类比，非常适合快速入门，后期可结合官方文档和视频里提到的vue-element-admin一块学习巩固。那些说看不懂的建议先略读一遍（不会的就跳过）node、vue的官方文档。看视频开弹幕的好处是遇到问题有热心的网友能及时给出相关的提示，坏处是有些滚动的长弹幕跑的飞快，影响观看。有意思的是同样都是看视频，有的人醍醐灌顶，有的人0基础还不思考直呼不懂。快速上手不是零基础速成大神，1.5倍速很快就能肝完的视频就是给找不到门的人带你入门，中文的官方文档都不看，一个视频就想精通，你当花时间学习的人都是傻的吗[辣眼睛]）
【回复】弹幕双刃剑了现在，有补充的知识点，但也有不少乱七八糟的[藏狐]
xu炮:
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="【'1'】">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<e1-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</e1-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
【回复】回复 @bili_55397451 :这是p17。
感谢兄弟，
<el-menu :default-openeds="【'1'】">之中的【】大家记得换成英文中括号。
还最后有一点打错了，我改正后的：
<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-menu>
</el-dropdown>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #048bd1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
【回复】<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-menu>
</el-dropdown>
</el-header>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
.el-header {
backdrop-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
}
</style>
【回复】我来填坑， style 删除 lang="scss"JS批发小郑:
P16如果npm run dev卡在Login.vue的打包，可以尝试删去lang="scss"试试
【回复】大哥解决了，这啥原理啊
【回复】回复 @动物园园长日哥 :很抱歉现在才回复，因为项目没有对scss进行支持，需要另外安装第三方包的依赖来对scss进行解析（我猜你现在应该也知道原因了hhh
放假你是我的:
如果你使用的是VScode 编辑器编辑的话 , 那么在第8篇axios中 , 你需要在VScode中先安装live-server , 不然你是无法访问到本地文件的 ! 安装live-server操作如下 : 打开终端, 输入npm install -g live-server ; 出现+ live-server@1.2.1
added 194 packages from 149 contributors in 13.215s ; 证明你已经安装成功 ; 最后输入live-server 启动服务 , 这样你就可以访问到本地文件了
【回复】live-server不是自动监听的么,和访问本地无关啊
【回复】回复 @Jian_Sun :你应该之前安装过
【回复】vscode下载live-server插件就可以了
呼啦啦哈哈123:
npm更换淘宝镜像 npm config set registry https://registry.npm.taobao.org
【回复】回复 @我好想金拱门啊 :我运行了这个还是报这个错，你已经解决了吗
【回复】感谢，搞了半个多钟没搞好想起来评论区应该有解决方法，一看还真有[笑哭]总算装好了
【回复】感谢，我就说为什么我输入vue list这个指令老提示 vue-cli · read ECONNRESET, 感谢感谢
樱桃苦茶籽:
{
"name":"狂神说java",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
【回复】回复 @画个圈圈诅咒你喔 :带不带都行
【回复】回复 @画个圈圈诅咒你喔 :啥
-梦说布衣-:
p16代码①
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog
title="温馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
【回复】你怎么没尖括号啊？？？？
【回复】回复 @立党老师的好学生 :要手机端才看得到
一个不知名的小毛贼:
p9
var vm = new Vue({
el: '#vue',
data(){
return {
info: {
name: null,
address: {
country: null,
city: null,
street: null
},
url: null
}
}
},
mounted(){
axios
.get('data.json')
.then(response => (this.info = response.data))
}
});
