开始使用 Vuejs ：简单的 Todo App

hard88

8年前

快更新哈，等着看呢。

墨生人

8年前

前排支持，大神加油

博闻慎思

8年前

#vuejs组件库，您可以给个文章，让大家互相推荐一下

GOD_Nt 回复博闻慎思

7年前

这是一个测试

博闻慎思

8年前

自己的评论应该来个删除按钮！打错了好尴尬

JellyBool 回复博闻慎思

8年前

打错了，可以修改的。。删除按钮我暂时不会开放

2 分享

博闻慎思回复 JellyBool

8年前

那也同样支持！

GOD_Nt 回复 JellyBool

7年前

这是一个测试

GOD_Nt 回复博闻慎思

7年前

这是一个测试

tangxingqiong

8年前

好棒！感谢dalao

JellyBool 回复 tangxingqiong

8年前

并不是什么大佬咯。哈哈哈

rynoway

8年前

视频做的很棒，赞一个。

JellyBool 回复 rynoway

8年前

感谢支持。哇哈哈哈

Happylearning

8年前

非常喜欢vue，讲的也很好。

Ken99

8年前

iPad上怎么提示什么音频没加载额？请问是什么原因额

shadow610

8年前

最后做完后的代码，推荐用jsfiddle展示出来

JellyBool 回复 shadow610

8年前

这个我再看呗。也可以放 gist 上面

hxl799677446

8年前

感谢老师，希望快点更新

JellyBool 回复 hxl799677446

8年前

额。。我一直在更新，明天上新的视频。

yaoye6262

8年前

完全没接触过laravel 不知道从哪学期是先学5.3还是5.2 ！！

8年前

如果你是专职的前端的话，你可以不学习 laravel，只需要理解 vuejs 可以通过 api 获取数据就可以了。

8年前

不做前端，就单纯想接触laravel框架，不知该从哪学起！

8年前

你看看这个？https://laravist.com/learn/laravel

8年前

前面基本看过啦！还是没有看懂，估计是太笨了！自己做了了学生信息管理系统，登录功能想偷懒，直接使用Auth，就是页面认证问题解决不了。不知道怎么判断用户是否登录！

8年前

好吧，你看看开发社区那个系列？ Auth::check() 是你的要求么

8年前

是的，开发社区看过前面两节，

8年前

额。那你都没认真看完吧。。

8年前

您能给个QQ我吗？跟您咨询一些问题！

8年前

我 QQ 很少回复技术问题的咯，你可以加那个 QQ 群

8年前

现在登录功能就是make:auth 自己的信息系统首页是student/index 我要怎样修改，才能访问限制？就是用户在地址栏输入student/index如果没有登录，就跳回auth的login页面！

8年前

直接加一个 auth middleware 就可以了吧。。。。

a119347 回复 yaoye6262

8年前

建议好好看看文档

sbtaxj 回复 a119347

8年前

说的没错误的！！

GOD_Nt 回复 JellyBool

7年前

这是一个测试

GOD_Nt 回复 JellyBool

7年前

这是一个测试

JellyBool 回复 GOD_Nt

7年前

这种评论以后别发吧

sbtaxj 回复 yaoye6262

8年前

说的没错误的！！

xiaodoudou

8年前

正在学习，讲的很不错

suriski

8年前

組件庫的話，推薦mint ui ,http://elemefe.github.io/mint-ui/#/,挺不錯的。

qy7

8年前

vue 1.0 从ajax开始就没听明白，尤其是数据库那块，咋办

JellyBool 回复 qy7

8年前

如果你是纯前端的话，可以不管这个

咖啡加糖_36221

8年前

讲的超棒，大神超牛

JellyBool 回复咖啡加糖_36221

8年前

嗯哼，感谢支持。我先解决完这些服务器的问题再更视频。

VincentSeven

8年前

<form v-on:submit.prevent="addTodo(newTodo)">这里传入newTodo似乎是多余的；
试了一下改成<form v-on:submit.prevent="addTodo()">也可以
相应的addTodo函数改为：

addTodo:function () {
                this.todos.push(this.newTodo);
                this.newTodo = { id:null,title:""};
 }

liujun 回复 VincentSeven

6年前

同意。。。。。。。

largao

8年前

非常棒的视频，看了许久的文档，很多地方还是不够通畅，讲的非常的到位了。
goodday！

walk-liuyan

8年前

欢喜～口音也是赞港啊～

bloodangel

8年前

大神，vue.js能不能操作dom呢，出个这种视频啊

cnjs 回复 bloodangel

8年前

这种框架是能不操作DOM就不操作的，因为vue提供的功能大部分都是可以不用操作DOM的，

laravpan

8年前

jelly 为啥不在视频介绍下 vue 是啥

JellyBool 回复 laravpan

8年前

你看看 vuejs 1.0 的视频

sxgc

7年前

收费。。。

JellyBool 回复 sxgc

7年前

恩，是的。这就是收费的

yokee

7年前

jelly 你的ide字体都是在哪里找的

Arun

7年前

如何判断空的就无法提交？

JellyBool 回复 Arun

7年前

这个应该很简单吧。。。

北漂张小白

7年前

可以出一个视频或者一个帖子说一下LiveReload 是怎么配置的吗？

JellyBool 回复北漂张小白

7年前

下载 LiveReload 这个 App 和 chrome 的插件，直接就开始用了啊

北漂张小白回复 JellyBool

7年前

LiveReload这个APP是付费的？

JellyBool 回复北漂张小白

7年前

恩，对的。。。。

北漂张小白回复 JellyBool

7年前

我用的是chrom 的插件，也可以实现自动更新效果！嘿嘿

JellyBool 回复北漂张小白

7年前

阔以，用起来就好

北漂张小白回复 JellyBool

7年前

我搞错了。现在可以使用LiveReload了。

Flourishing 回复北漂张小白

6年前

我都是花了66元买的这个软件不过使用体验非常好指的拥有!

liyuequn

7年前

请问我直接引入的vue，但是实例化vue的时候控制台报错 vue is not defined
问题已经解决，没注意到实例化的Vue必须大写

yl1033669613

7年前

这是一个测试

asion

7年前

phpstorm 搜索 vue-for-idea，不存在这个插件的？

JellyBool 回复 asion

7年前

貌似作者把这个插件下架了，现在更新最新版 PhpStorm 就默认支持 Vuejs 了，顺便也可以安装 Vue.js 这个插件

asion 回复 JellyBool

7年前

好的，谢谢jellybool

evan

7年前

数组是这样的，
todos: [ { text: ‘新增todos1’ },{ text: ‘新增todos2’ }, { text: ‘新增todos3’ },]
提交删除的永远是第一个，也就是新增todo1

已经解决，索引变量多了一个$

xue1021362065

7年前

大佬讲的有点快。适合有经验的。没有经验的可能有点不能适应

xue1021362065

7年前

很幽默！！！！！！！！

rainboxup

7年前

有没有课程源码

JellyBool 回复 rainboxup

7年前

没有，后面录视频的话应该会注意这个问题

a359611223

7年前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2.0</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
</head>
<body>
    <nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Welcome Vue js 2.0</div>
                        <div class="panel-body">
                            <h1>My todos</h1>
                            <ul class="list-group">
                                <li class="list-group-item"
                                    v-for="(todo,index) in todos">
                                    {todo.title}
                                    <button class="btn btn-warning btn-xs pull-right"
                                        v-on:click="deleteTodo(index)"
                                    >Delete

                                    </button>
                                </li>
                            </ul>
                            <form v-on:submit.prevent="addTodo(newTodo)">
                                <div class="from-group">
                                    <input type="text"
                                           v-model="newTodo.title"
                                           class="form-control"
                                           placeholder="Add a new todo">
                                </div>
                                <br>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit">Add Todos</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            todos:[
                {id:1,title:'Learn Vuejs'}
            ],
            newTodo:{id:null,title:''}
        },
        methods:{
            addTodo(newTodo){
                this.todos.push(newTodo),
                this.newTodo = {id:null,title:''}
            },
            deleteTodo(index){
                this.todos.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

chendaxian 回复 a359611223

7年前

首先谢谢你整理的代码！再者循环这里少写了一个大括号

weish1995

7年前

站主可以弄一个单独课程收费或者按月收费的吗

isParker

7年前

##Vue的应用场景是怎样的呢？

这个问题有点low都不好意思问，但是还是很困扰我的。

pc网站上用么？
1. 兼容性有点让人纠结，毕竟是在pc上，直接不带IE8玩好像也有点不合适
2. pc上视图一般不都是后端生成好的，还用js再渲染一遍也不合适吧~
做webApp么？
1. 就打算用它的router做视图切换，然后一个app就一个页面么？考虑过低端战斗机的感受么~
2. 人家dcloud推荐说不要用js渲染呢，会慢的说！

来人带我出坑啊！！！

JellyBool 回复 isParker

7年前

那你不用 vuejs 就好了啊。你说的这些都不是 vuejs 的应用场景

isParker 回复 JellyBool

7年前

那…比如呢？

wjlight

7年前

请问下，你的ide 装了哪些插件呀？

JellyBool 回复 wjlight

7年前

color ide ,vuejs,laravel …主要就是这三个吧

xiangxihenli

7年前

站长，我又过来学习了。。哈哈

zhangbao1992

7年前

@JellyBool 下面这种写法，好像有两种绑定关系。

<form v-on:submit.prevent="addTodo(newTodo)">

绑定 addTodo method
绑定 newTodo 这个 data

对不？

JellyBool 回复 zhangbao1992

7年前

恩，newTodo 就是下面 data 的

M_J吃荤的小和尚

7年前

口吃啊啊啊啊啊啊

luzhongyang

7年前

这口音，啊啊啊啊啊啊，好难受啊，为什么是蓝方口音！

JellyBool 回复 luzhongyang

7年前

这个。。。。无能为力了

2 分享

zxhs913

7年前

@JellyBool 能不能讲下多入口怎么开发

zxhs913

7年前

@JellyBool 多入口怎么配置的

zxhs913

7年前

vuejs的脚手架工具，多入口怎么配置的

Nixus

7年前

需要先看1.0，然后再看2.0？

JellyBool 回复 Nixus

7年前

不用，直接看 2.0 OK

srx2016

6年前

PHPstorm里打开有vue语法的HTML，vue语法上不停的提示 http://www.w3.org/1999/xhtml? ⌥⏎这么一个框该怎么办？PHPstorm里vue.js插件装上了

wh19980818

6年前

大佬好，能学习到很多东西

ILoveCLanguage

5年前

大佬好，你这代码怎么run起来的啊，建个css和vue.js就OK了？谢谢