Vue实战
Posted pzyin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue实战相关的知识,希望对你有一定的参考价值。
一直在做前后端分离的项目,偶尔写过freemaker、layUi,现在突然有种念头想尝试一下写写正儿八经的前端了,记录一下一个Java程序员学习Vue的心路历程。
下载
(1)安装淘宝npm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
(1)npm run build
打包
(2)npm run dev
(3)npm install
安装依赖
目录解析
目录/文件 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块 |
src |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
代码实战
定义数据对象
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: ‘#vue_det‘, data: { site: "阿加莎", url: "www.agatha.pro", alexa: "10000" }, methods: { details: function() { return this.site + " - 梦想起航!"; } } }) </script>
(1)data 用于定义属性
(2)methods 用于定义的函数,可以通过 return 来返回函数值。
(3){{ }} 用于输出对象属性和函数返回值。
以上是关于Vue实战的主要内容,如果未能解决你的问题,请参考以下文章