Vue笔记（二）：条件渲染 列表渲染 事件绑定 表单输入绑定 组件 路由

条件渲染

使用v-if v-else-if v-else来实现条件渲染

示例如下

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>

如图所示，在vue类中对 type赋值，即可决定是否进行渲染

v-show指令也类似，不同之处在于v-show不展示的标签已经存在于元素中了，只是没有展示

<h1 v-show="test">hihi</h1>

列表渲染

v-for基于一个数组来渲染一个列表

语法：item in items 其中 items 是源数据数组 item是被迭代的数组元素的别名

示例

body部分

<div id="app">
	<ul>
		<li v-for="item in items">
			{{ item.message }}
		</li>
	</ul>
</div>

vue部分

var vm = new Vue({
	el : '#app',
	data : {
		items: [
			{message : 'Foo'},
			{message : 'Bar'}
		]
	}
});

也可以对某个对象的属性进行列表渲染

<li v-for="value in object">{{ value }}</li>

在循环中，可以增加一个参数来表示序号或者键

<li v-for="item,index in items">{{ index }}{{ item }}</li>
<li v-for="value,key in object">{{ key }}{{ value }}</li>

如果在渲染过程中数据的顺序变化，Vue将不会自动匹配数据项的顺序，需要人为增加一个key属性

<li v-for="item,index in items" :key="index">{{ index }}{{ item }}</li>

在vue中，:style这样的写法是v-bind:style的缩写

事件绑定

回顾一下，在js中绑定事件，我们需要去操作dom

var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");

在vue中，使用v-on指令

<button v-on:click="counter += 1">数值 : {{ counter }} </button><br>
<button v-on:click='greet'>Greet</button>

第一行我们将js函数写在了行内，即每按一下button，counter的值就加1，counter在vue类中进行声明

var vm = new Vue({
	el : '#example-1',
	data : {
		counter : 0,
	},
	methods:{
		greet: function(){
			alert("hi")
		}
	}
});

由于行内不可能写太复杂的函数，第二行使用一个函数名greet来绑定，在vue类中，我们在methods对

象中声明一个函数greet 该函数同样可以传参

有时我们需要调用原始的dom事件，可以使用$event来将事件传入函数中

<button v-on:click='greet($event)'>Greet</button>

事件修饰符可以对事件进行修饰，这里不详细叙述

表单输入绑定

使用v-model进行表单数据的双向绑定

<div id="example-1">
<input v-model='message' placeholder="edit me">
<p>Message is : {{ message }}</p>
</div>

在input中输入数据时，变量message的值也会被改变，这就是双向的含义

同样，对是checkbox 和 radio ，可以分别绑定数组和字符串，在复选框进行选择时，绑定的数组会增加

选择的value

同样 在vue类的绑定变量中赋值，可以改变表单的初始状态

组件基础

使用Vue.component来创建组件

Vue.component('button-counter',{
	props:['title'],
	data:function(){
		return {
			count : 0
		}
	},
	template:'<button v-on:click="count++">{{title}}You click me {{ count }} times.</button>'
})
var vm = new Vue({
	el : '#app',
	data:{
		
	}
})

在这个名为button-counter的组件中，组件接受参数在props中，该参数在组件生成示例时传递

组件的模板template则表示了该组件的内容

在组件写好后，使用<button-counter></button-counter>即可调用该组件

如何对组件进行事件绑定？在模板中，我们可以将事件对应的句柄设置为一个函数

template:'<button v-on:click="clickfun">{{title}}You click me {{ count }} times.</button>'

这个函数，我们做如下定义

template:'<button v-on:click="clickfun">{{title}}You click me {{ count }} times.</button>',
methods:{
		clickfun : function(){
		this.count ++
		this.$emit('clicknow',this.count)
			}
		}

在$emit方法中，我们将count传递给了vue对象中的clicknow函数 clicknow函数的定义如下：

var vm = new Vue({
	el : '#app',
	data:{
		
	},
	methods:{
		clicknow:function(e){
			console.log(e)
		}
	}
})

同时我们还需要在模板实例生成时，将这个函数的触发条件写出来

<button-counter title="title 1 : " @clicknow="clicknow"></button-counter>

这样就完成了组件的事件绑定，并将组件内的参数传递出来

这里我也没太明白props和$emit具体的作用，之后再研究

组件slot扩展

使用slot可以让开发者决定组件到底展示什么内容

在模板中，我们增加一个插槽

 <template id="cpn">
        <div>
            <h2>我是子组件</h2>
            <h3>hahaha</h3>
            <slot></slot>
        </div>
    </template>

在生成组件实例时，我们可以在插槽中安放任意的html内容

同样 slot 具有 name 属性，用于区分使用的是哪一个插槽

父子组件交互

1.父组件定义值传递过去

2.子组件props接收使用（可使用watch监测props内值的变化，不需要的话可不用检测变化）

3.修改后使用$emit反馈给父组件

先来看父组件向子组件传递

父组件

<template>
<div>
    parent：下面是我的子组件
    <childSon :userName='name'></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
    data(){
        return{ 
            name:'啊哈'
        }
    }
}
</script>

子组件

<template>
<div>
    child:这是父组件给我传的数据——{{userName}}
</div>
</template>
<script>
export default {
    name:'Childs',
    props:['userName'],
    data(){
        return{

        }
    }
}
</script>

即 在父组件引用子组件时，将name的值传递给了子组件的username变量

父组件

<template>
<div>
    parent：这是我的子组件传给我的值：{{num}}
    <childSon :content='content' @getNum='getMsg'></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
   data() {
    return {
      content:'er',
      num:''
    }
  },
  methods:  {
      getMsg(num){
          this.num = num;
      }
  }
}
</script

子组件

<template>
<div>
    child:这是父组件给我传的数据——{{content}} <br />
    <button @click="sendMsgtoParent">点击我可以向父子间传递参数哦</button>
</div>
</template>
<script>
export default {    
    name:'Childs',
    props:['content'],
    data(){
        return{
            num: 0
        }
    },
    methods: {
        sendMsgtoParent(){
            this.$emit('getNum',this.num ++ );
        }
    }
}
</script>

在子组件中，调用sendMsgtoParent函数时，通过$emit将num的值传递给getNum绑定的父组件函数getMsg

路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。

html

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

js

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
 
// 现在，应用已经启动了！

路由跳转方式

1、标签跳转 router-link

不传参

<li >
  <router-link to="user">点击验证动画效果 </router-link>   
</li>

传参

// 先要配置路由
path: '/user/:id'

<router-link :to="'/user/' + this.id"> <router-link/>

// 接收参数
this.$route.params.id

2、事件跳转 this.$router.push()

跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

this.$router.push('/home')

this.$router.push({path:'/home'})

query传参

// 变成 /user?id=2
this.$router.push({ 
    path:'/user',
    query:{
        id:this.id
    }
})

params传参

this.$router.push({ 
    path:'/user',
    params:{
        id:this.id
    }
})

3、this.$router.replace{path:'/user'}

这个方式不会在history留下记录

4、this.$router.go(n)

5、this.router.forward() 前进一步

6、this.router.back() 回退一步