学习笔记：Vue

# vue 1. 安装vue cli 2. 使用vue cli创建项目 3. 渲染状态 4. 状态绑定到标签属性 5. 条件渲染 6. 循环渲染 7. 用户事件 8. 方法注册，修改状态 9. v-model 绑定input、select、radio、checkbox等 10. 新建组件、使用组件、添加props 11. 组件的生命周期 12. 计算属性 13. 侦听器 14. 动态修改class、style 跟计算属性联用 15. 子元素自定义事件，用于子组件向父组件传参 16. 插槽 16. 打包 17. 使用serve测试打的包 18. 使用css 预处理器 19. vue-router 20. element-ui 全部导入，使用组件 21. vuex

yarn global add @vue/cli 将yarn的bin目录添加到path中 vue --version vue create vue-demo 渲染数据 {{}} 绑定属性 :title="title" 条件渲染

使用scss

使用vue-cli脚手架搭建前端项目时，如果没有选择scss作为css的预处理器，则可以通过下载scss的解析包来使用scss

yarn add sass-loader node-sass -D

<style lang="scss" scoped>
  .app {
    color: 'red';
  }
</style>

解析包下载好直接yarn serve运行该项目即可

NProgress进度条插件使用

yarn add nprogress // 下载包

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 自定义一下样式，主要是进度条高度和颜色
NProgress.configure({

    template: `<div class="bar" role="bar" style="height: 3px; background-color: #42b983;">
        <div class="peg"></div>
        </div>
        <div class="spinner" role="spinner">
        <div class="spinner-icon"></div>
        </div>'`
})

// 简单使用
router.beforeEach((to, from, next) => {
    NProgress.start()
    next()
})

router.afterEach(() => {
    NProgress.done()
})

{{}}

<div id="app">{{ message }}</div>

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello world!',
        isShow: true,
        list: ['learn vue', 'learn react', 'learn js'],
    }
})

vue实例对象监控状态改变，会导致页面中引用状态的元素更新

只有data属性中的初始化属性是被Vue实例监听做响应的，添加的属性是不响应的

app.$data 获取data对象 

app.$el === document.getElementById('app');

v-once v-html

<div v-once>{{ message }}</div>
<div v-html="htmlTag"></div>

once 渲染一次，状态改变视图不变

html 渲染成html标签

bind

<div :title="message">
<div :title="seen">绑定属性时，如果属性值为false, null, undefined则该属性不生成</div>
<div :title="seen + ''"></div>
<div :title="seen ? 'true' : 'false'">{{ seen ? 'true' : 'false' }}</div>

将状态绑定到元素属性中，实现状态与元素属性的联动

条件渲染 v-if

<div v-if="seen">seen is true</div>
<div v-else-if=""></div>
<div v-else>seen is false</div>
<div v-show="seen">seen is true</div>

<template v-if="ok">
  <div></div>
  <div></div>
</template>

动态切换状态导致元素是否渲染到页面中，开销较大

条件渲染 v-show

循环渲染 v-for

<div
  v-for="item in list"
  :key="item"
>
  {{ item }}
</div>

<div
  v-for="(item, index) in list"
  :key="item"
>
  {{ item }}
</div>

<div
  v-for="(item, index) of list"
  :key="item"
>
  {{ item }}
</div>

v-for 遍历对象

<div
  v-for="(value, key, index) in obj"
  :key="item"
>
  {{ value }}
</div>
// index不保证每次遍历都一致

视图事件处理

<button @click="handleClick">click</button>
<button @click.prevent="handleClick">click</button>

const app = new Vue({
    methods: {
        handleClick () {// 一般就是处理状态变化}
    }
})

数据视图双向绑定 v-model

<div>{{ message }}</div>
<input v-model="message" />

表单改变状态，状态更新进而改变视图

数据的双向绑定v-model，其实就是给元素绑定状态，再绑定change事件，在事件中改变状态从而导致元素发生改变的语法糖

组件

Vue.component('todo-item', {
    template: '<li>todo content</li>'
})

创建组件实例

<ol>
  <todo-item />
</ol>

调用组件时传递属性prop

<ol>
  <todo-item 
    :content="message"
  />
</ol>

组件接收属性

Vue.component('todo-item', {
    props: ['content'],
    template: '<li>{{ content.text }}</li>'
})

Vue实例对象的生命周期函数（钩子函数）

const app = new Vue({
    el: '#app',
    data: {
        message: '',
    },
    beforeCreate () {
        this.message
    },
    created () {},
    beforeMount () {},
    mounted () {},
    beforeUpdate () {},
    updated () {},
    beforeDestroy () {},
    destroyed () {},

计算属性

const app = new Vue({
    data: {
        message: '',
    },
    computed: {
        mess () {
            return this.message
        }
    }
})

计算属性根据状态的变化而发生改变，当状态没有发生变化而视图更新时不会重新执行该方法

侦听属性

const app = new Vue({
    data: {
        message: '',
    },
    watch: {
        message (value) {

        }
    }
})

app.$watch('message', (newValue, oldValue) => {
    console.log('newValue: ', newValue);
    console.log('odValue: ', oldValue);
})

当状态message发生变化时就执行，通常执行异步操作

class style的绑定

动态根据组件的状态来设置class

<div
  class="static"
  :class="{red: isRed, 'success-text': isSuccess}"
></div>

const app = new Vue({
    data: {
        isRed: true,
        isSuccess: false,
    }
})

动态根据组件的状态来设置style属性

<div
  :style="{color: activeColor, fontSize: fontSize + 'px'}"
></div>

const app = new Vue({
    data: {
        activeColor: 'red',
        fontSize: 30,
    }
})

vue-router

npm install vue-router --save // 下载vue-router
// router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) // 注入路由器

<router-link to='/foo'>go foo</router-link> // 路由入口

<router-view></router-view> // 路由出口

import Foo from '@/components/Foo'

const routes = [
  {
    path: '/foo', 
    component: () => import('@/components/Foo')
  }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
}).$mount('#app')

yarn add vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'
new Vue({
store // 将store实例注入到所有的组件中
})

this.$store.state

学到列表渲染的数组更新检测

未完待续:)