vue 2.0 的特性git add . git add . 数据过多，用 ... 来代替 git add .

学习网站的笔记

vue 2.0

生命周期函数

就是在vue实例在某个时间点会自动执行的函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated
- keep-alive 组件激活时调用
deactivated
- keep-alive 组件停用时调用
errorCaptured
- 当任何一个来自后代组件的错误时被捕获时调用
- (err: Error, vm: Component, info: string) => ?boolean

模版语法

v-text
v-html
{{}}

计算属性

computed
- 计算属性，内置缓存机制；
- 如果依赖的属性改变了，才会再次改变；没有则不会
- get
- set
watch
methods

样式绑定

:class

条件渲染

v-show / v-if

v-show="false"时，是存在于页面中，只是的样式 display:none
v-if="false"时，从dom 节点上被移除了

列表渲染

v-for

<div v-for= "(item, index) of list" :key="item.id">
:key
不能通过数组的下标（index），来改变数组，必须用vue提供的数组变异方法来对数据进行变化
vue提供的数组变异方法：push pop shift unshift sort reverse
对象（数组）的循环，可以通过对数据的引用来改变

Vue.set / $set

改变数组（对象），页面也同时改变的3个方法

通过对数据的引用来改变
用vue提供的数组变异方法来对数据进行改变
Vue.set / $set

组件中的细节

is 如果在子组件中遇上浏览器中渲染错误，可以用is
子组件中data是一个函数，不是一个对象，必须有return 返回数据
ref 操作dom节点

    <div id="app">
        <div ref="hello" @click= "handleClick">hello word</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                handleClick: function () {
                    console.log(this.$refs.hello.innerHTML)
                    // this.$refs.hello 是在全局中的ref中找叫hello的ref节点
                }
            }
        })
    </script>

props
.native

组件之间的非父子组件的传值

发布订阅模式/观察者模式

    <div id="app">
        <child content="Li"></child>
        <child content="Wang"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            data: function (){
                return {
                    selfContent: this.content
                }
            },
            props:{
                content: String
            },
            template: '<div @click="handleClick"> {{ selfContent }} </div>',
            methods: {
                handleClick: function () {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function () {
                var this_= this
                this.bus.$on('change', function (msg) {
                    // console.log(this_.selfContent)
                    // console.log(msg)
                    this_.selfContent = msg
                })
            }
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>

插槽

slot

    <div id="app">
        <body-content>
            <div class="header" slot="header">header</div>
            <div class="footer" slot="footer">footer</div>
        </body-content>
    </div>
    <script>
        Vue.component('body-content',{
            template: `
            <div>
                <slot name="header"></slot>
                <div class="content">content</div>
                <slot name="footer"></slot>
            </div>
            `
        })
        var vm = new Vue({
            el: '#app'
        })
    </script>

作用域插槽

    <div id="app">
        <child>
            <!-- 必须在子组件中用template -->
            <template slot-scope="sli">
                <h1> {{ sli.item }} </h1>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child', {
            data: function() {
                return {
                    list: [1, 2, 3, 4, 5]
                }
            },
            //当子组件用slot时候，会往 slot 里传递 item数据，在上面用的时候 item数据 放在 slot-scope属性中（sli）
            template: `
            <div>
                <ul>
                    <slot v-for="item of list" :item=item></slot>
                </ul>
            </div>
            `
        })
        var vm = new Vue({
            el:'#app'
        })
    </script>

动画

5-4

animate.css
velocity.js

项目实战

git
- git add .
- git commit -m"XXXXX"
- git push
多页应用
- 优点：首屏时间快， seo 效果好
- 缺点：页面切换慢
单页应用
- 页面切换快
- 首屏时间稍慢，seo差
移动端设备的用户通过手指放大缩小的操作无效，页面始终是1:1
- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
- import './assets/styles/reset.css'
- <style lang="stylus" scoped> scoped 对当前的组件有效，不影响别的组件
- css方法引入 @import '../../../assets/styles/varibles.styl' = @import '~@/assets/styles/varibles.styl'
- 创建分支并切换到子分支上
  - git pull 从线上的分支拉取到本地上
  - git checkout XXX 切换分支
- vue-awesome-swiper 组件的使用
  - npm i vue-awesome-swiper --save
```
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
```
- 在一个 scoped 组件里，给另一个组件设置它的css
```
.wrapper >>> .swiper-pagination-bullet-active{
    background #fff
}
```
- 子分支提交代码
  - git add .
  - git commit -m 'XXXX'
  - git push
  - git checkout master
  - git merge origin/index-swiper 将子分支合并到主分支中
  - git push
- 列表页的轮播图
  - icons.vue 来看代码
  - 数据过多，用 ... 来代替
```
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis
```
- axios axios.get('XXXX')
- 在开发环境中，发送ajax请求本地的模拟数据
  - webpack-dev-server提供的方法
```
    proxyTable: {
    '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
        '^/api': '/static/mock'
        }
    }
    }
```
- 页面还没获取ajax，子组件（swiperList）获取的数据是空的数组，这导致在新页面加载的时候显示的是最后一个数据（list）
  - v-if="list.length" 为false，它就不会创建，但是这种方式是不优雅的，所以可以
```
    computed: {
        showSwiper () {
        return this.list.length
        }
    }
    v-if="showSwiper"
```
  这样最好不过了
- better-scroll 组件字母表 city.vue
- vuex
  - 初次使用时，引入vuex，存放公共数据city，
```
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    export default new Vuex.Store({ // 存放公共的数据
        state: {
            city: '怀化'
    }
    mutations: {
            changeCity (state, city) { // state 公共数据
            state.city = city
            }
        }
    })
```
  - 在子组件的模版中使用它 @click="handleCityClick(innerItem.name)"
  - 在子组件中用commit 调用公共组件中的 mutation 选项触发changeCity，获取公共数据 this.$store.commit('changeCity', city)
- 优化
  - vuex 中 mapState
  - keep-alive
- 对全局事件的解绑
  - deactivated
- git
  - 当前在主分支上，我们要提交代码到detail-header，先提交到主分支上，切换到detail-header分支上，合并主分支，再次提交
  - git add .
  - git commit -m 'XX'
  - git push
  - git checkout detail-header
  - git merge master
  - git push
- 递归组件的使用
  - 在调用组件的自身，调用组件的自身
- keep-alive
  - 让detail页面不做缓存 <keep-alive exclude="Detail"><keep-alive>
- ifconfig 192.168.0.102
- city文件夹中的Alphabet.vue >> @touchstart.prevent 阻止默认行为,防止手指拖动字母列表时页面也同时拖动

vue 2.0 的特性

学习网站 的笔记

vue 2.0

生命周期函数

就是在vue实例在某个时间点会自动执行的函数

模版语法

计算属性

样式绑定

条件渲染

列表渲染

组件中的细节

组件之间的非父子组件的传值

插槽

动画

项目实战

学习网站的笔记