新手嘛,先学习下 Vue2.0 新手入门 — 从环境搭建到发布

时间:2022-07-13 18:54:32

Vue2.0 新手入门 — 从环境搭建到发布

转自:http://www.runoob.com/w3cnote/vue2-start-coding.html

具体文章详细就不搬了,步骤可过去看,我这就写下使用总结

1. Vue2.0 推荐开发环境中一些安装就不说了

Node.js  、npm  、webpack  、vue-cli  , 自己看着安装

到最后能启动本地通过 vue-cli 建的项目,  npm run dev  ,默认的 http://localhost:8080/ 能看到页面显示

----------------------------

2. ide 工具, 我用的是 Webstorm ,找下 vue语法高亮显示

我的是 打开 Settings->Plugins 搜索安装 , 默认没有,browser

新手嘛,先学习下   Vue2.0 新手入门 — 从环境搭建到发布

新手嘛,先学习下   Vue2.0 新手入门 — 从环境搭建到发布

安装后,重启下 ide 软件,重新打开

这下看 vue 文件顺眼多了

----------

3.  文章中说的2个坑试下

第1个说 写2个并列div , 功能和展示正常

新手嘛,先学习下   Vue2.0 新手入门 — 从环境搭建到发布

第2个 data 的格式,还是照着

新手嘛,先学习下   Vue2.0 新手入门 — 从环境搭建到发布

默认的格式,正确的来

------------------

果然是新手,vue-resource 数据的, 尤其是异步加载数据显示的,还没整成功

网上找了个其他的,Vue2学习笔记:数据交互vue-resource http://www.cnblogs.com/zycbloger/p/6428014.html , 这个是点击后的数据alert ,

和交互还有点距离.

这个是点击按钮再进行的互动

-----------------

看到了其他的例子,能拿到数据了,中间也遇到几个问题:

1. 页面上老报 articles 未定义,   处理方式,在data的return里 加上 articles

2. 让页面加载直接拿数据, 放在 create中 就行

参考了这篇文章:  http://blog.csdn.net/MRblackLu/article/details/56286077 , 最终可以了,部分代码如下

新手嘛,先学习下   Vue2.0 新手入门 — 从环境搭建到发布

能看到数据的调用和效果了

新手嘛,先学习下   Vue2.0 新手入门 — 从环境搭建到发布