vue笔记

例子： https://www.iviewui.com/docs/guide/install

vue模板指令

文本

{{msg}}

控制内容的 v-text v-html

控制显示隐藏v-if v-show

事件绑定v-on:后面可加click，hover（缩写@），事件对象@click="show($event)"

属性绑定v-bind:后面可加href，src,class,type,width等（缩写：）

循环v-for v-for="item in items" ,用索引值v-for="(item,index) in items", 如果想添加重复数据要再加上 track-by="$index"
如果循环的是对象，参数有3个，分别是value，key，index v-for="(value,key,index) in obj"

v-model

数据双向绑定v-model，v-model 在 input 事件中同步输入框的值与数据，v-model.lazy="msg"变为在 change 事件中同步

数据只绑定一次在数据前加*，{{*msg}}

{{{msg}}}用于HTML转义输出，自动识别标签

v-model.number="age"把输入值转为number型

v-model.trim="age"去掉首尾空格

class、style绑定方法

v-bind:class="{red:isred}"可与普通class同时使用

<div class="static"
     v-bind:class="{red:isred, 'text-danger': hasError }">
</div>

对象控制v-bind:class="classObject"然后在data中定义classObject:{red:true}

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

传数组v-bind:class="[activeClass, errorClass]" 然后在data中设置activeClass:'active',errorClass:'text-danger'

条件判断v-bind:class="[{ active: isActive }, errorClass]"

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"，style也可以用对象控制和传数组的方法

事件修饰符

.stop阻止事件冒泡

.prevent 阻止默认事件

键盘事件 @keydown.键码=show()

常用键：.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta

组件

定义组件：

components:{
            '组件名称':{
                data(){
                    return{
                        //组件数据
                    }
                },
                template:'组件名称（#+template的id名称）'
            }
        }

组件分为全局组件和局部组件(定义方式如下)，区别在于全局组件可以在其他组件中直接使用，局部组件需要先在实例中再定义一次

//局部组件
    var Home={
        template:'#tt',
        data(){
            return{
                msg:'今天是星期2'
            }
        }
    }
    //全局组件
    Vue.component('aaa', {
      template: '<button>You clicked me times.</button>'
    })
new Vue({
        el:'#box',
        components:{//Home为局部组件，使用时要在实例中定义
            'tt':Home
        }
    })

组件之间传值使用props

Vue.component('tt',{
       props:['todo'],//要传的值
       template:'<li>{{todo.id}}是{{todo.text}}</li>'
   })
    
    var app=new Vue({
        el:'#app',
        data:{
            todos:[
                { id: 0, text: '蔬菜' },
                { id: 1, text: '蔬菜2' },
                { id: 2, text: '蔬菜4' }
            ]
        }
    })
//props还可以定义类型
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

组件复用时data必须是个函数

//多次使用组件
data: function () {
  return {
    count: 0
  }
}
//单次使用时可以是这样
data:{
    msg:'aaa'
}

动态组件

使用<component v-bind:is="nowTabComponent"></component>组件会在nowTabComponent改变时显示相应的组件

<div id="box">
        <button v-for="tab in tabs" v-bind:class="{red:nowtab===tab}" @click="nowtab=tab">{{tab}}</button>
        <component v-bind:is="nowTabComponent"></component>
    </div>
<script>
    Vue.component('tab1', { 
        template: '<div>tab1的内容</div>' 
    })
    Vue.component('tab2', { 
        template: '<div>tab2的内容</div>' 
    })
    Vue.component('tab3', { 
        template: '<div>tab3的内容</div>' 
    })
    
    new Vue({
        el:'#box',
        data:{
            nowtab:'tab1',
            tabs:['tab1','tab2','tab3']
        },
        computed:{
            nowTabComponent:function(){
                return this.nowtab
            }
        }
    })

插槽

定义一个组件，在组件模板中添加一个slot标签，如果组件内容为空将显示slot中的内容，如果组件有内容则显示组件的内容（slot必须有根元素包裹）

<template id="hh">
        <div>
            <slot>我是slot的内容</slot>
        </div>
    </template>
    <div id="box">
        <tt>我是tt组件的内容</tt>
    </div>
<script>
    new Vue({
        el:'#box',
        data:{  
        },
        components:{
            'tt':{
                data:function(){
                },
                template:'#hh'
            }
        }
    })
</script> 

具名插槽

组件中用<slot name="main">main</slot>,HTML中使用时用<div slot="mian">我是正式内容main</div>

实例生命周期钩子

钩子函数：created mounted updated destroyed生命周期钩子的 this 上下文指向调用它的 Vue 实例。

过渡

过渡需要用transition标签包着，过渡效果使用6个类名控制：v-enter v-enter-active v-leave v-leave v-leave-active v-leave-to
如果transition没有类名这个v就不变，有类名就替换为类名-enter
例如：

<transition name="text">
   <p v-if="show">hello</p>
 </transition>

相应的css样式就变为text-enter text-enter-active text-leave

vue-router(路由)

安装命令：

npm install vue-router
引入(index.js)：

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

Vue.use(VueRouter)

官方教程：http://router.vuejs.org/zh-cn/index.html

基本结构如下：

使用 router-link 组件来导航，to来指定链接，组件会被渲染成一个a标签
<router-link to="/foo">Go to Foo</router-link>
路由出口（路由匹配到的组件将渲染在这里）：<router-view></router-view>
js文件：

// 1、定义 (路由) 组件
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
//2、定义路由，path和上面的相对应
const routes = [
          { path: '/foo', component: Foo },
          { path: '/bar', component: Bar }
        ]
//3、创建 router 实例
const router = new VueRouter({
          routes // (缩写) 相当于 routes: routes
        })
//4、挂载到根实例上
const app = new Vue({
          router
        }).$mount('#app')

动态路由

HTML：<router-link to="/user/foo">/user/foo</router-link>
定义路由组件：const User= { template: '<div>User {{ $route.params.id }}</div>' }
定义路由：{ path: '/user/:id', component: User }

vue 2.0脚手架运行命令行

vue init webpack-simple vue-demo
cd vue-demo/
cnpm install
npm run dev