用vue编写后台:
简而言之:
vue两大特点:响应式编程、组件化;
vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
组件名多数情况下应该是多个单词的,根组件 App 除外。
给文件命名的应该注意首字母大小写问题
export default {
name: 'TodoItem',
// ...
}
export default {
data () {
return {
foo: 'bar'
}
}
}
(3)组件里面data使用图片路径是要用require('./../mm.png')才能正确访问图片,这样才能够被webpack正确解析
(4)
例如:
<a:href="'http://search.jd.com/Search?enc=utf-8&keyword='+keyWord+'&page='+Math.ceil(record.skuRank/60)+'.html'">跳转</a>
href前面加冒号与双向绑定有关
(5)路由钩子函数
-全局钩子:
Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
beforeEach函数有三个参数:
Ø to:router即将进入的路由对象
Ø from:当前导航即将离开的路由
Ø next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
(6)组件内,自定义的样式,要注意命名规范.引用其他页面的时,要修改class的名称.或者将统一的样式放到css文件中.
(7)将静态数据统一放到js文件,然后引入到vue组件之中,这样有利于后期维护.
(1)—— src
|—— assets // 项目资源目录
|—— styles // 样式文件
|—— reset.scss // reset css,会在 /src/main.js 中被导入
|—— variables.scss // 项目中的变量,混合(mixin)等公有样式变量
|—— ...
|—— images // 图片
|—— fonts // 字体
|—— ...
|—— components // 组件目录
|—— layout // 布局相关组件
|—— Header.vue // 头部
|—— BottomMenu.vue // 底部菜单
|—— ...
|—— common // 公有组件
|—— base // 基础组件
|—— ...
|—— pages // 页面目录
|—— user // 用户相关页面
|—— Login.vue // 登录页面
|—— Register.vue // 注册页面
|—— Info.vue // 详情页面
|—— order // 订单相关页面
|—— List.vue // 订单列表
|—— Detail.vue //订单详情
|—— ...
|—— Home.vue // 主页
|—— ...
|—— router // 路由
|—— modules // 存放各个模块的路由
|—— user.js // 用户模块
|—— order.js // 订单模块
|—— index.js // 路由主js,整合各个模块,并且还会定义一些全局钩子等其他
|—— store // 全局状态管理目录
|—— mutation-types.js // mutation types
|—— index.js // 主js,整合各个模块的
|—— actions.js // actions
|—— modules // 各个模块的states
|—— user.js
|—— order.js
|—— common // 全局工具方法
|—— data-format.js // 数据转换
|—— http.js // 网络请求
|—— ...
|—— App.vue
|—— main.js
|—— init-plugins.js // 依赖的第三方的初始化,会在main.js中引入
5、VUE组件模版编写方式
<!-- type="x-template" 是为了不让这个script进行解析 -->
(1)<!-- 用script标签名的方式 -->
<script id="component1" type="x-template">
<h3>第一个局部组件——定义方式1</h3>
</script>
(2)<!-- 用 template标签名的方式 推荐-->
<template id="component2">
<p>第二个局部组件——定义方式2</p>
</template>
(3)<!-- 内置组件-->
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}