Vue2.0官方文档英文版
Vue2.0官方文档中文版
Vue2.0API英文版
Vue2.0API中文版
VUE系列教程目录
Vue.js学习系列
Vue Router中文官网
Vue 2.0 起步(1) 脚手架工具 vue-cli + Webstorm 2016 + webpack
WebStorm添加vue插件高亮显示*.vue文件
Vue.use(Router)
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：例如index.js中
import Router from 'vue-router'
Vue.use(Router)
...
使用全局的 script 标签，则无须如此（手动安装），例如index.html中
...
var router = new VueRouter({
routes:[
{ path: '/foo', component: {template:'<div>foo</div>'} }
,{ path: '/bar', component: {template:'<div>bar</div>'} }
]
})
...
Es6中export default 和 export 区别
单文件组件与全局组件的区别
全局组件
- 定义
Vue.component('my-component-name', { /* ... */ })
- 使用
new Vue({ el: '#container '})
单文件组件
- 在*.vue中定义
<template>
<div id='app'>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
- 在index.html中使用，或者通过vue-router来使用
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
Mint UI中的样式：PostCSS深入学习: 结合BEM和SUIT方法使用PostCSS
vue_cli构建的项目如何去除脏边距
在App.vue中的样式添加以下代码：
<style>
...
* {
margin: 0;
padding: 0;
}
</style>
CSS优先级
Vue中如何自定义提供给外部修改数据的组件
例如自定义ToolBar标题栏，组件的标题是需要使用该组件的地方去自定义的：
第一种方法：使用prop类型传值
- 定义组件ToolBar.vue
<template>
<div :style="{background : bg_color}">
<img src="../../static/img/toolbar_nav.png"/>
<span>{{page_title}}</span>
<i></i>
</div>
</template>
<script>
export default{
props: {
page_title: String,
bg_color: [Number, String]
}
}
</script>
- 使用组件
<template>
<div>
<ToolBar page_title="业务开展区域查询" bgColor="#f1f1f1"></ToolBar>
</div>
</template>
使用slot插槽，深入理解vue中的slot与slot-scope
- 定义组件ToolBar.vue
<template>
<div :style="{background : bg_color}">
<img src="../../static/img/toolbar_nav.png"/>
<span>
<!--使用slot插槽-->
<slot></slot>
</span>
<i></i>
</div>
</template>
...
- 使用组件
<template>
<div>
<ToolBar bgColor="#f1f1f1">业务开展区域查询</ToolBar>
</div>
</template>
根据状态动态切换CSS样式
通过class对象绑定切换样式
<template>
<div>
<div class="page_rest">
<button type="button" :class="{btnEnable : isInputNonEmpty}">{{button_name}}</button>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isInputNonEmpty: false,
credit_no: ''
}
},
watch: {
credit_no: function (val, oldVal) {
if (val != null && val != undefined && val.length > 0) {
this.isInputNonEmpty = true
} else {
this.isInputNonEmpty = false
}
}
}
}
</script>
<style scoped>
.btnEnable {
color: #ffffff;
background-image: linear-gradient(90deg, #ff8c40 0%, #ff6400 100%)
}
</style>
css实现遮罩效果以及帧布局使用
自定义组件绑定事件不起作用
// @click='handleClick’ 不起作用
@click.native='handleClick’
在组件上绑定事件，你不加 .native修饰符 告诉它是这是原生点击事件，它会以为这是你定义的自定义事件。
Vue常用事件
[Vue中如何在父组件中获取自定义的CheckBox的选中状态]
<template>
<div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" v-model="checked"/><label
for="checkbox-2-1"></label>
</div>
</template>
<script>
export default{
data(){
return {
checked: false
}
},
watch: {
checked: function (val, oldVal) {
this.$emit('onCheckChange', val)
}
}
}
</script>
- 在使用CheckBox的父组件中绑定onCheckChange事件
<template>
<div>
<CheckBox type="checkbox" class="checkBox" @onCheckChange="onCheckChange"></CheckBox>
<input type="text" class="phone" v-if="check" placeholder="请输入您的电话号码">
</div>
</template>
<script>
import CheckBox from '../Checkbox.vue'
export default{
components: {CheckBox},
data(){
return {
check: false
}
},
methods: {
onCheckChange: function (val) {
this.check = val
}
}
}
</script>
Vue2.0组件之间的通信
html 去掉input 获取焦点时的边框
Vue2.0 如何传递 数值或boolean
Vue中怎么才能使用data中的数据做为变量的值?
必须使用计算属性
input标签限制输入长度
oninput="if(value.length>11)value=value.slice(0,11)"
网友评论