VUE学习笔记（Day2）

第一节—style样式的多种操作方式

1.绑定内联样式

1.对象语法：v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSS property 名可以用驼峰式或短横线分隔（记得用引号括起来）来命名：

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

data:{

activeColor:'red',

fontSize:30

}

2.条件渲染v-if

1.v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值时候被渲染

<h1 v-if="awesome">Vue is awesome</h1>

第二节—条件渲染 v-show以及v-if的区别

1.在<template>元素上使用v-if条件渲染分组

1.因为v-if是一个指令，所以必须将它添加到一个元素上，但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if,最终的渲染结果将不包含<template>元素。

例子：

<template v-if="ok">

<h1>Title</h1>

<p>Paragraph1</p>

<p>Paragraph2</p>

</template>

2.介绍一下v-else-if，顾名思义，充当v-if的"else-if"块,并且可以连续使用：

例子：

<div v-if="type=='A'">A</div>

3.介绍一下v-show

v-show与v-if的不同点：v-show的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的display CSS property

注意,v-show不支持<template>元素，也不支持v-else

4.v-if和v-show的区别

v-if:只有后面为false,对应的元素以及子元素都不会被渲染，控制DOM元素的创建和销毁

v-show:始终会被渲染并保留在DOM中，频繁切换状态。

第三节—v-for

v-for使用数组，item代表数组中每一个元素，index表示数组元素的下标

第四节—v-for为什么要加key

1.v-for的作用，为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key attribute:

实例：

<div v-for="Item in Items" :key="Item.id">

<!--    内容    -->

</div>

第五节—数组更新检测一

1.Vue将被侦听的数组的变更方法进行了包裹，所以他们也将会触发视图更新，这些被包裹过的方法包括

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

第六节—事件修饰符

1.Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop:阻止事件冒泡

问题来了，什么是事件冒泡呢，简单说就是执行了子元素的操作之后，父元素也自动执行，比如说

像这个，我们执行了里面的button之后，外面的div自动执行，这个就叫做事件冒泡。

阻止事件冒泡

.prevent：阻止默认行为

.capture

.self

.once

.passive

2.按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue允许为v-on或者@在监听键盘事件时添加按键修饰符。

示例：只有在“key”时是“Enter”时调用vm.submit

<input @keyup.enter="submit">

Vue为最常用的键提供了别名：

.enter

.tab

.delete(捕获删除或退格键)

.esc

.space

.up

.down

.left

.right

第七节—表单输入绑定v-model的原理

1.你可以用v-model指令在表单<input>、<textarea>、<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

第八节—v-model表单控件的基本使用

第九节—v-model修饰符的使用

1.".lazy"

在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步（除了上述输入法组织文字时），你可以添加lazy修饰符，从而转为在change事件之后进行同步：

<input v-model.lazy="msg">

2.".number"

.number将输入框的内容自动转换为数字类型

3.".trim"

自动过滤用户输入的首位空格

第十节—Vue的组件化开发

1.组件的组织：通常一个应用会以一棵嵌套的组件树的形式来组织。

第十一节—Vue组件的基本使用

1.怎么引入组件呢？

首先，在开头使用import比如

import Content from './components/Content.vue'

然后在export default中加入这个

components:{

Content

}

然后在template标签里面加上这个语句

<Content></Content>

第十二节—父组件与子组件

第十二节—组件数据的存放

1.这节讲export default{}里面的data为什么要是一个函数，且返回一个对象

第十三节—父传子通过prop传值

1.Prop是你可以在组件上注册一些自定义attribute，为了给博文组件传递一个标题，我们可以用props选项将其包含在该组件可接受的prop列表中。

步骤：

1.首先，在Hello标签里面v-bound绑定

2.然后在Hello.vue里面使用props属性

第十四节—prop的基本用法

1.通常你希望，每个prop都有指定的值类型。这时，你可以以对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型:

props可以做类型的限制，还可以设置默认值

2.单项数据流

属于是一种数据保护机制，使得改变子组件数据时，父组件的数据不改变。

第十五节—子组件通过自定义事件向父组件传值

1.步骤就是：

首先：在子组件中，通过$emit来触发事件

比如

methods:{

sendParent:function(){

//this.$emit('自定义事件名称','发送事件的参数')

this.$emit('injectMsg',this.msg)

}

}

然后，在APP.vue里面的methods写

getChildMsg:function(value){

console.log(value);

this.message=value

}

然后在template里面的div中写<Content @injectMsg="getChildMsg"></Content>

第十六节—父组件访问子组件-$refs