# 基本结构
new Vue({
data:{//用于绑定数据
a:1,
b:[]
},
methods:{//用于绑定的方法
doSomething:function(){
this.a++;
}
},
watch:{//用于监听数据变化
'a':function(new,old){
console.log(new,old)
}
},
computed:{//用于计算数据
myValueWithoutNumber() {
return this.myValue.replace(/\d/g,'')
}
},
})
# 源生指令
v-text指定节点文本
---
v-html指定html格式并解析
---
v-show隐藏,利用display
v-if隐藏,直接销毁节点
v-else前面必须有v-if v-else-if
---
v-for="item in arr" {{item}}变量
v-for="(item,index) in arr" {{index}}角标
v-for="(val,key,index) in obj" 值,键,角标 遍历对象
加上:key="item" 提高效率
---
v-on事件绑定
---
v-bind属性绑定
---
v-model数据绑定,一般用于input
checkbox绑定多个:value可修改数组
修饰符:.number .trim .lazy
---
v-once只绑定一次
---
v-pre不解析
# 绑定事件
//只触发一次使用v-once
<button v-on:click="doThis"></button>
<button @click="doThis"></button>
methods:{
doThis:function(){
}
}
# 数据渲染
<p>{{a}}</p>
<p v-text="a"></p><!--格式处理-->
<p v-html="a"></p><!--格式保存-->
new Vue({
data:{
a:1,
b:[]
}
})
//强制渲染函数
app.$forceUpdate()
# 控制隐藏
<p v-if="isShow"></p><!--直接删除标签-->
<p v-show="isShow"></p><!--通过display属性渲染-->
new Vue({
data:{
isShow:true;
}
})
# 渲染循环
<ul>
<li v-for='item in items'>
<p v-text='item.label'></p>
</li>
</ul>
data:{
item:[
{
label:'apple'
},
{
lable:'banana'
}
]
},
# 数据绑定
<img v-bind:src="imageSrc">
<img :src="imageSrc"><!--简写形式-->
<div :class="{red:isRed}"></div><!--当isRed为true时,将类名设置为red-->
<div :class="[classA,classB]"></div>
<div :class="[classA,{classB:isB,classC:isC}]"></div>
<a :href="link"></a>
data(){
return{
link:https://www.baidu.com
}
}
<!--各种类型表单演示-->
<select v-model="mySelection">
<option v-for="item in selectOption" :value="item.value">{{item.name}}</option>
</select>
{{mySelection}}
<input v-model="myRadio" type="radio" value="apple"/>
<input v-model="myRadio" type="radio" value="banana"/>
{{myRadio}}
<input v-model.lazy="myValue" type="text" /><!--trim,number-->
{{myValue}}
<input type="checkbox" v-model="myCheckBox" v-for="item in boxex" :value="item"/>
{{myCheckBox}}
data() {
return {
selection:'',
selectOption:[
{
name:'apple',
value:0
},
{
name:'banana',
value:1
}
],
boxex:['apple','banana'],
myRadio:'',
myValue:'',
myCheckBox:[]
};
},
{{false ? 'a':'b'}}//b
v-html="<span>123</span>"//123
绑定style会给根据浏览器自动加前缀
app.$set(app.obj,'a',1)
app.$delelte(app.obj,'a',1)
引入组件
import comA from './components/a'<!--导入-->
export default{
components:{comA}<!--注册-->
}
# 组件间通信
<!--父组件:-->
<com-a @my-event="onComaMyEvent"></com-a><!--声明my-event事件,并绑定onComaMyEvent方法-->
<script>
import comA from "./components/a"
export default {//导入并注册
components:{comA},
methods:{
onComaMyEvent(param) {
console.log('on my comA'+param)
}
}
}
</script>
<!--子组件:-->
<button @click="emitMyEvent"></button>
methods:{
emitMyEvent() {
this.$emit('my-event',this.hello)<!--通过$emit方法传值-->
}
}
# 计算属性
//自带缓存
<!--便与实现复杂功能-->
<input type="text" v-model="myValue"/>
{{myValueWithoutNumber}}
computed:{
myValueWithoutNumber() {
return this.myValue.replace(/\d/g,'')
}
},
<!--或(通过调用方法实现实时更新)-->
<input type="text" v-model="myValue"/>
{{getMyValueWithoutNumber}}
methods:{
getMyValueWithoutNumber() {
return this.myValue.replace(/\d/g,'')
}
},
通过$(this.val)获取
# 监听器
<input type="text" v-model="myValue"/>
watch:{
myValue:function (val,old) {
console.log(val,old)
}
},
handle (){},immediate:true//会让方法初始化时执行一次
deep:true//false时,没有引用时改变对象的属性不会触发,或者监听obj.a
# 父子组件通信
子————>父(通过触发emit事件)
父————>子(通过属性传递)
<!--1. 父组件:-->
<input type="text" v-model="myValue"/>
<!--动态绑定myValue属性,传递给子组件,并在触发my-event事件时调用getMyEvent方法-->
<com-a :my-value="myValue" @my-event="getMyEvent"></com-a>
methods:{
getMyEvent(hello) {<!--接收子组件传递的参数-->
console.log('i got my event'+hello)
}
}
<!-- 2. 子组件-->
{{myValue}}<!--接收父组件属性myValue-->
<button @click="emitMyEvent"></button>
props:{
'my-value':[Number,String]<!--注册父属性my-value,并指定参数的数据类型-->
},
data() {
return {
hello: 'i am a component a '
}
},
methods:{
emitMyEvent() {
<!--$emit方法用于将子组件的数据传递给父组件中的my-event事件,将hello数据传递给父组件-->
this.$emit('my-event',this.hello)
}
}
# 插槽功能
<!--父组件:-->
<com-a>
<!--将模板插到对应的子组件标签里-->
<p slot="header">header</p>
<p slot="footer">footer</p>
</com-a>
<!--子组件:-->
<!--slot标签接收模板-->
<slot name="header"></slot>
<slot>XXX</slot>
<slot name="footer"></slot>
//作用域插槽
<slot aaa="123" bbb="456"></slot>
//在被引用元素中获取到插槽属性
<span slot-scope="props">{{props.aaa + props.bbb}}</slot>
//组件沟通
privide(){}和inject(){}
Object.defineprojerty的get方法
# 动态组件
<!--通过改变currentView实现动态加载组件-->
<keep-alive><!--keep-alive将之前的组件缓存起来,提高组件切换速度-->
<p :is="currentView"></p>
</keep-alive>
# 动画
<!--若标签名相同会出bug,通过属性key="XXX"区分-->
<button @click="show = !show">Toggle</button>
<div class="ab">
<transition name="fade" mode="out-in"><!--通过transition标签实现-->
<p v-show="show">i am show</p>
</transition>
</div>
<!--淡入淡出-->
<style>
.fade-enter-active,.fade-leave-active{
transition: opacity .5s ease-out;
}
.fade-enter,.fade-leave-active{
opacity: 0;
}
</style>
# 路由
<!-- main.js -->
import VRouter from 'vue-router'<!-- 导入路由组件 -->
import Apple from './components/apple'<!-- 导入两个组件 -->
import Banana from './components/banana'
Vue.use(VRouter)<!-- 注册 -->
let router = new VRouter({
mode:'history',//去掉url中的#号
//base: '/base/'// 基路径为/base/
// linkActiveClass: 'active link', //被激活的路径会添加class
// linkExactActiveClass: 'exact link',//被完全激活的路径添加class
scrollBehavior (to, from, savedPosition){
//返回时页面处于用户之前所停留的位置
if (savedPosition) {
return savedPosition
} else {
return { x:0, y:0 }
}
},
fallback: true //当浏览器不支持跳转时开启多页模式
routes: [
{
<!-- :后面为参数传给指定组件 -->
path: '/apple/:color/detail/:type',
props: true,//直接把参数传到子组件中的props中
component:Apple,
name:'applePage',<!-- 自定义命名 -->
meta: {
title: 'this is app',
description: '123'
},
children:[<!-- 子路由 -->
{
path:'red',<!-- tp://localhost:8080/apple/red -->
component:RedApple
}
]
},{
path: '/banana',
component:Banana
}
]
});
new Vue({
el: '#app',
router,<!-- 将上面配置的router实例化 -->
render:function (h) {
return h(App);
}
})
<!-- 在Apple组件中,用内置对象$route.params接收参数Json对象 -->
<!-- App.vue -->
<router-view></router-view><!-- 内置组件 -->
//router-link 本身是一个a标签
<router-link :to="{path:'/apple',params:{color:'yellow'}}">to apple</router-link><!-- 或把path:'/apple'替换为name:'applePage' -->
<router-link to="/banana">to banana</router-link>
<router-link :to="{path:'/apple/red'}">to apple red</router-link>
<!-- 命名路由 -->
routes: [
{
path: '/apple',
component:{
ViewA:Apple,
ViewB:RedApple
}
},
{
path: '/banana',
component:Banana
}
]
<!-- App.vue中 -->
<router-view name="viewA"></router-view>
<router-view name="viewB"></router-view>
<!-- 重定向 -->
routes: [
{<!-- 将根目录重定向到/apple -->
path:'/',
redirect:'/apple'
},
]
通过this.$route获取到全部路径信息
//webpack.config.client.js 配置刷新路径
historyApiFallback: {
index: 'index.html'
}
# 状态管理
组件-->actions-->Mutations-->State
<!-- main.js中引入Vuex -->
import Vuex from 'vuex'
Vue.use(Vuex)<!-- 注册 -->
let store = new Vuex.Store({
state:{<!-- 保存状态 -->
totalPrice:0
},
getters:{<!-- 将状态封装 -->
getTotal(state) {
return state.totalPrice
}
},
mutations:{<!-- 减少两个方法 -->
increment(state,price) {
state.totalPrice += price
},
decrement(state,price) {
state.totalPrice -= price
}
}
})
new Vue({
el: '#app',
store<!-- 实例化,在子组件中通过this.$store.state.commit调用 -->
})
<!-- App.vue -->
<template>
<div>
{{totalPrice}}
<apple></apple>
<banana></banana>
</div>
</template>
<script>
import Apple from './components/apple'
import Banana from './components/banana'
export default {
components:{
Apple,Banana
},
computed:{
totalPrice() {/* 通过封装的getters获取状态中的总价 */
return this.$store.getters.getTotal
}
},
}
</script>
<!-- Apple组件中 -->
methods: {
addOne() {<!-- 通过commit方法,来触发mutations中的方法,并传入调用的方法名和参数 -->
this.$store.commit('increment', this.price)
},
minuOne() {
this.$store.commit('decrement', this.price)
}
}
<!-- 通过action触发mutations -->
<!-- main.js -->
mutations:{
increment(state,price) {
state.totalPrice += price
},
decrement(state,price) {
state.totalPrice -= price
}
},
actions:{<!-- 只能调用mutations里面的方法 -->
increase(context,price) {
context.commit('increment',price)
}
}
<!-- 在Apple组件中这样调用-->
addOne() {
<!-- dispatch 专门用来触发action -->
this.$store.dispatch('increase', this.price)
},
总结: 1. 异步修改store数据的情况下,使用action
2.同步的情况下使用mutation
# vue-resource(ajax)
import VueResource from 'vue-resource'
Vue.use(VueResource)//注册插件
//在页面初始化时
created:function(){
this.$http.get('getList').then(//POST:post('getList',{userId:123})
function(data) {
console.log(data)
},function(err) {
console.log(err)
}
)
},
# 生命周期
beforeCreate(){},//初始化一定会执行,
create(){},//初始化完毕执行
beforeMount(){},//挂载到页面才会执行,由最外层节点调用,其他方法
mounted(){},//挂载完毕执行
beforeUpdate(){},//每次有数据更新才会执行
updated(){},//更新完毕执行
activated(){},
deactivated(){},
beforeDestroy(){},//Vue实例被销毁时执行
destroyed(){},//销毁后执行
errorCaptured(){}//向上冒泡,收集错误信息
# 定义组件
Vue.component('CompOne',component)//定义全局组件,驼峰命名,类似于Java类
components:{ CompOne: component},
<comp-one></comp-one>//自动转为-形式
非new Vue形式的组件,定义data属性:
data () {
return {
text: 123
}
}
props: {//从父组件传进来的属性
active: Boolean
}
<comp-one :active="true"></comp-one>
在子组件调用this.$parent.text改变父组件的数据
# 组件间数据双向绑定
import Vue from 'vue'
const component = {
model: {
prop: 'value1',
event: 'change'
},
props: ['value1'],
template: `
<div>
<input type="text" @input="handleInput" :value="value1">
</div>
`,
methods: {
handleInput (e) {
this.$emit('change', e.target.value)
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
data () {
return {
value: '123'
}
},
template: `
<div>
<comp-one v-model="value"></comp-one>
</div>
`
})
如果你想把一个对象的所有属性作为 prop
进行传递，可以使用不带任何参数的 v-bind (即用
v-bind 而不是 v-bind:prop-name)。例如，已知一个todo 对象：
todo: {
text: 'Learn Vue',
isComplete: false
}
然后：
<todo-item v-bind="todo"></todo-item>
将等价于：
<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"
></todo-item>
# 自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName, optionalPayload) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
# Table属性
在el-table中声明slot-scope="scope",单行中使用scope.row获取某行的属性
//把数组里符合条件的数据筛选出来
this.tableData = this.tableData.filter(o=>o.goods.goodsId!=goods.goodsId);
//固定表头
只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
//固定一列
固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。
//多级表头
只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。
//展开行
通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。
# render function
5474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
