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同时使用

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


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: ''
    })
new Vue({
        el:'#box',
        components:{//Home为局部组件，使用时要在实例中定义
            'tt':Home
        }
    })

组件之间传值使用props

Vue.component('tt',{
       props:['todo'],//要传的值
       template:'{{todo.id}}是{{todo.text}}'
   })
    
    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'
}

动态组件

使用组件会在nowTabComponent改变时显示相应的组件

具名插槽

组件中用main,HTML中使用时用

我是正式内容main

实例生命周期钩子

钩子函数：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
例如：


   hello

相应的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标签
Go to Foo
路由出口（路由匹配到的组件将渲染在这里）：
js文件：

// 1、定义 (路由) 组件
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
//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：/user/foo
定义路由组件：const User= { template: '

User {{ $route.params.id }}

' }
定义路由：{ path: '/user/:id', component: User }

vue 2.0脚手架运行命令行

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