慕无忌255168
可以看看networks里面有没有加载对应的js与css
木星不木
详情页的开发
——即是取store中的list数据,展示出来。
想学习父子之间路由的传值
——
父传子,直接使用props
子传父,使用emit事件传递
跨组件,使用vuex
qq_Android客户端勇哥_0
如果自己是React阵营,学习less,因为ant desgin是less的默认预编译语言。
如果是Vue阵营,建议学习scss。
这两者差不多,学会一个,另一个可以通过在线工具进行转换
慕工程6167678
沐寒528
<template>
<div class="wrapper">
<div class="title">{{obj.title}}</div>
<div class="content">
{{obj.content}}
</div>
<div class="back" @click="back()">返回</div>
</div>
</template>
<script>
export default {
name: "Info",
props: ['obj'],
data () {
return {
}
},
methods: {
back () {
this.$emit('backEvent')
}
}
}
</script>
<style scoped>
$main-color: #42b983;
.wrapper{
padding: 10px;
}
.title{
padding-bottom: 5px;
border-bottom: 1px solid #dcdcdc;
}
.content{
padding: 10px 10px 40px 10px;
line-height: 22px;
}
.back{
display: block;
width: 100%;
height: 40px;
line-height: 40px;
border-radius: 6px;
background: $main-color;
margin: 0 auto;
color: #fff;
text-align: center;
}
</style>
那个夏天
你是不是store在是在store文件夹的index.js
慕少3186396
Github搜索vue-lessons-demo
qq_慕丝6268986
还要检查一下node的执行权限,使用管理员进行运行
慕容8451924
解决了
qq_慕函数0172193
}
_冬阳
<template>
<div>
<form v-if="!Login">
<div>
<h3> 欢迎登录</h3>
登录名:
<input v-model="loginName"/>
密码:
<input v-model="password"/>
</div>
<div>
<button @click="myLogin()">登录</button>
<button @click="reg()">注册</button>
</div>
</form>
<form v-else>
<div>
<h3>请输入以下信息</h3>
登录名: <input v-model="loginName">
密码: <input v-model="password">
确认密码: <input v-model="affirm">
<div>
<button @click="addUser()">确定</button>
<button @click="cancel()">取消</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'login',
data() {
return {
Login: false,
loginName: '',
password: '',
affirm: ''
}
},
methods: {
myLogin: function () {
if (localStorage.getItem("loginName") === this.loginName && localStorage.getItem("password") === this.password) {
this.$router.push('/home/list')
} else {
alert("密码用户名错误!!")
}
},
reg: function () {
this.Login = true
},
cancel: function () {
this.Login = false
},
addUser: function () {
if (this.password === this.affirm && this.password != '' && this.affirm != '') {
localStorage.setItem("loginName", this.loginName),
localStorage.setItem("password", this.password),
this.loginName = '',
this.password = '',
this.login = false
} else {
alert("两次密码输入不一致!!")
}
}
}
}
</script>
<style scoped>
</style>给一份完整的代码
慕沐5176070
可以debugger调试一下?看看vue插件里面的信息
下次提问,可以提供包括且不限于:
1. webpack版本,vue版本,node版本,npm版本。
2. webpack配置;
3. package.json
4. 本课程中的哪个实例操作出如上的错误,操作的流程是什么?!
5. 代码截图,console错误截图,终端错误截图。
分享自己解决问题的经过,加强对问题的解决能力。
这样才能更好的帮助到大家哦
慕尼黑8203826
你确定你的reg方法执行了吗?
有没有debug过?
这里可以这么样赋值啊!
qq_忘尘_7
bootstrap有三种方式集成:
直接cdn引用bootstrap的样式与js
使用vue bootstrap:https://bootstrap-vue.js.org/
自己来封装自定义组件 ~~~?
姜衿

name 后加逗号结束
离歌笑_0002
同学你好,是否尝试过升级@vue/cli为最新的版本?如果不影响开发,并且热更新也是正常的话,可以忽略。
下次提问,可以提供包括且不限于:
1. webpack版本,vue版本,node版本,npm版本。
2. webpack配置;
3. package.json
4. 本课程中的哪个实例操作出如上的错误,操作的流程是什么?!
5. 代码截图,console错误截图,终端错误截图。
分享自己解决问题的经过,加强对问题的解决能力。
这样才能更好的帮助到大家哦
weixin_慕码人5038349
我看你数据已经正常的add到list了,那么可以在list页面看看store里面list有没有数据,如果有,可以有两种方案:
Mounted生命周期函数里面,给lists赋值,this.lists = this.$store.state.lists
第二种,可以在add()方法的最后,使用编程式导航去到list页面,this.$router.push('/home/list')
幕布斯5273701
因为第二种,不是空的啊,里面有一个元素是一个空字符串,数组长度为1,非0。
那么,对于第二种情况,vue会进行v-for=(item,index) in lists中的渲染,因为vue觉得你的数组长度非0。
对于我们的项目中,会去取item,即list中的元素,比如Item.title,item.content,当然会报错了。一个空String,哪里有这些属性呢?
对不对
qq_慕仔3008176
v-if需要配合状态量来管理,参见我们的课程相关的章节。
时间是使用的moment.js这个库,方法是moment().format()方法。
这个是vue-router,使用编程式导航,可以参考:编程式导航
慕嘲风
在 Add.vue 中也需要引入 store
慕粉3163391
同学,我居然没有get到你要问的问题!!没有use.js啊!?是user.js吧?!
你要问的问题是什么?vue ui能跑起来localhost:8080,而npm run serve项目跑不起来?!
如果vue ui能跑起来,说明项目是ok的,需要检查本地环境:
是否是管理员权限运行的npm install .
是否是管理员权限运行的npm run serve
是否使用了淘宝源/官方源,完整的安装了node_modules没有任何报错。
最后,停止其他的ui或者shell之后,重新管理员权限运行npm run serve
微谰
看看是不是浏览器缓存的问题?!
清楚缓存,重新来npm run serve,有惊喜哦
weixin_慕仙9112810
是的,太棒了。
这里还可以使用路由的绝对路径:
to='/add'
类似这样的
墨涤
同学,您的代码拼写出错了。router-link,而非roter-link,错误的提示给的很清楚。
建议使用IDE的vue插件,这样呢会有一些代码的提示。
我们以vscode为例:
请安装 vue vue-beautify vetur这三个插件。
我的小怪兽在等我
检查如下:
当切换到路由的时候,你在Element那个Chrome的调试选项卡里面看看,有没有路由的class变化;
检查 自己的路由路径写的是不是对的。
慕无忌King
哦,你可以在mounted () {
// 在这里加一句
window.vue = this
}
然后呢,你在console里面,输入window.vue,看看是不是有一个$router的属性。
然后,再看看data里面的其他变量,是不是没有$?
接下来,就是见证奇迹的时候了。
绝尘kinoko
试试,button 加一个type="button"
Icbto
参考:https://github.com/vuejs/vue-cli/issues/2873
可能是由于你的package.json中的依赖版本的问题,使用最新的cli版本,并使用npm或者yarn重新安装依赖。
qq_宠溺_03913139
然后,还可以使用CSS中的:hover属性来实现鼠标移入改变背景属性,参考:CSS :hover 选择器
淡水狗
vue、vue-router的项目中,当点击登录的时候,会触发表单的默认提交行为,因此必须在button的click中添加阻止默认行为。
例如
@click.prevent="reg"