vue问题记录

vue生命钩子

2、计算属性的 setter和getter

3、vue的实例$set方法 、重新引用地址、变异方法push等，三种方法重新刷新页面

4、ref ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册

5、子组件 data里返回必须是方法

6、父子组件通信 父到子 ：count = “3” 带：数字，否则是字符串 , 子：props:[参数] ; 子到父 emit ; 单向数据流。子组件，接受校验 validator。非父子传值： vuex， BUS中间

7、父组件要要用原生的事件 @clikc.native

8、插槽 slot slot-scope 作用域插槽

9、动态组件 component :is v-once

10、vue css动画 js动画库 velocity.js transition
transition-group

11、touchstart.prevent 阻止手指移动屏幕的默认事件

//text-indent 首行缩进

//使用webpack自定义别名这个功能,的webpack.base.conf.js文件 ,

resolve: {
    extensions: ['.js', '.vue', '.json'],
     alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'static':path.resolve(__dirname, '../static'),//增加这一行代码
        }
    },

style 引入 需要@import ‘~’

//vue 中只有static文件夹 外部可以访问

//better-scroll 插件滚动条

vuex 数据仓库

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations
})
index.js

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {}
  }
}
mutations.js

let defaultCity = '上海'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default {
  city: defaultCity
}
state.js

//对象映射到计算属性
mapstate …computed

//数据保存到内存中
keep-alive 包裹 router-view
如果需要修改内存的数据 ，会多一生命周期 activated 页面展示就会有 对应的 有一个deactivated
使用exclude 排除某个页面 不被缓存。。
vue组件中 name名字可以用来， 1、 exclude 排除缓存，2、递归组件

 <template>
  <div id="app">
    <keep-alive exclude="Detail">
      <router-view/>
    </keep-alive>
  </div>
</template>

//router-link tag=“需要转换的标签名称”

<ul>
      <router-link
        tag="li"
        class="item border-bottom"
        v-for="item of list"
        :key="item.id"
        :to="'/detail/' + item.id"
      >
        <img class="item-img" :src="item.imgUrl" />
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>

//动态路由以及scrollBehavior（页面跳转时候XY轴恢复默认位置）

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/city',
    name: 'City',
    component: City
  }, {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

//渐变 css linear-gradient

//css opacity 透明渐变

//递归组件，就是在子组件自身调用自己，vue中使用名称调用组件自身

<template>
  <div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="index"
    >
      <div class="item-title border-bottom">
        <span class="item-title-icon"></span>
        {{item.title}}
      </div>
      <div v-if="item.children" class="item-chilren">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: Array
  }
}
</script>

// axios params 存储发送请求的数据

getDetailInfo () {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(this.handleGetDataSucc)
    },