配置文件
- 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