vue全家桶+node+mongodb商城项目小结

配置文件

• index.js
• webpack.base.conf.js

vue.js基础语法

• mustache语法：{ {msg}}
• html赋值：v-html=""
• 绑定属性：v-bind:id=""
• 使用表达式：{ { ok?'Yes:No' }}
• 文本赋值：v-text=""
• 指令：v-if=""条件判断
• 过滤器：{ { message | capitalize }}和v-bind:id="rawId | formatId"

class和style绑定

• 对象语法：v-bind:class="{'active':isActive, 'text-danger':hasError}"
• 数组语法：v-bind:class="[activeClass, errorClass]"
data:{
activeClass:'active',
errorClass:'text-danger'
}
• style绑定-对象语法：v-bind:style=""

条件渲染

• v-if
• v-else
• v-else-if
• v-show
• v-cloak

v-if如果条件不成立，元素不渲染
v-show如果条件不成立，渲染，置display:none
v-cloak 如果页面刷新的太快，导致有些页面的元素没有加载出来，v-cloak可以同步隐藏html代码

事件处理器

• v-on:click="greet" 或 @click="greet"
• v-on:click.stop 阻止事件冒泡
  v-on:click.stop.prevent 阻止默认事件
  v-on:click.self 给这个div绑定事件的对象本身绑定事件？
  v-on:click.once给这个事件绑定一次
• v-on:keyup.enter

路由

import HelloWorld from '@/components/HelloWorld' @ 表示 src 目录

配置路由的index.js中的路由模式mode
mode:'hash'哈希模式。url中带#，例如 http://localhost:8888/#/goods/4556/user/admin
mode:'history'浏览器的history模式。url中没有#，例如 http://localhost:8888/goods/4556/user/admin

嵌套路由

路由index.js

import Vue from 'vue'
import Router from