vue学习写的demo

由于最近vue火热，因此本身也自学了一下vue，看了下官网的api，也看了网上的教程，本身结合所学的，写了个demo，如下是我学习时遇到的问题，和demo中涉及的知识点。

1.这个demo用的是官网的配置方法，基于node,webpack,vue-cli的脚手架。具体步骤你们能够去官网教程查看，写的很详细。

2.下面是这个demo的显示效果和目录环境

 

这个demo中涉及的都是基础的知识点，但愿对于初学者能有帮助，首先咱们根据步骤一步一步看代码。

首先运行完index.html以后，就会进入到main.js

这里会从main.js进入到app.vue中

 

这个就是首页，看结构能够看出，咱们上面的两个板块，用到了vue-link组件，这个组件就至关于a连接，他会经过to后面的相对路径找到对应的页面。而后页面的内容，会显示在router-view中但首先你的vue项目要支持路由，而后看一下router文件夹下index.js中的代码

 

咱们把要跳转的两个页面路径配置在index.js中，其中第一个配置的就是默认进来路径展现是哪一个版块。板块中的数据是调用的mock假接口。这里说说，怎么在vue里面使用假接口。

首先在index.html下新建一个data.json。里面写你要模拟的json数据。

 

而后在根目录下找到build里找到dev-server.js文件加入下面代码

 

这里面appData是引入你data.json的路径。记得配置完dev-server.js以后要npm run dev一下，要不不会生效。而后咱们引入vue-resource，就能够在页面中使用假接口中的数据了。

下面咱们看下news.vue页面为例

 

这里this.$http.get(url)相似于jq的ajax同样了，直接res.data就得到接口中的数据了。

其中created就是一个生命周期钩子函数，就是vue实例生成后调用的函数，通常咱们都在created函数中处理ajax数据。

而后咱们看一下下面的todolist。

 

咱们这里的每条数据，都通过localstorage存储，这样刷新页面咱们的数据也不会丢失。首先咱们监听键盘的回车事件，而后触发addNew方法，而后在下面methods中定义addNew方法。在addNew中定义咱们所须要的参数。例如当前时间，输入框内容，是否显示选中和删除按钮。

 

而后就是checkbox选中事件

 

当咱们都选中后，上面的title会变成今日毕。

当咱们选则删除按钮时，咱们就是把当前选中元素从items这个数组中删除出去，而后 再渲染页面时，天然就没有这个dom了。

 

下面再说两个项目中遇到的错误：

报错：

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. (found in root instance)

是由于new Vue写在了component以前，要写在注册组件以后。

报错：

 Cannot use v-for on stateful component root element because it renders multiple elements.

v-for不能用于根元素（root element）。由于v-for是个循环，它返回更多的元素。致使没法渲染。