vue_day01

VUE_0615
el:挂载点
Vue会管理el选项命中的元素及其内部的后代元素
建议使用id选择器
可以使用其他的双标签，不能使用HTML和BODY
v-text
1.<p v_text="message"></p>
2.默认写法会替换文本的全部内容，使用插值表达式{{}}可以替换指定内容
3.作用是替换标签的内容
4.内部支持写表达式
v-html
1.<p v_html="message"></p>
2.解析html的格式并展现到页面上
3.作用于innerHTML类似
v-on
省略写：@click="fun(k)"
作用:为元素绑定事件
绑定方法写在methods属性中
通过键盘实现的功能：@keyup.enter="fun"
方法内部通过this关键字可以访问data中的数据
v-show
需要频繁切换使用则选择v-show

v-show="true"

	作用：根据值得真假切换元素的显示状态
	原理是修改display：none
v-if

v-if="true"

	作用：根据值得真假切换元素的显示状态
	原理是注释掉标签。操纵dom元素
v-bind
	v-bind:属性名=表达式
	省略写 :属性名=表达式
	需要动态的增删class建议使用对象的方式{属性:方法}
v-for
	（index,item) in arr
	根据数据生成列表结构
	常跟数组结合使用
		push()
		shift()，从index为0开始删除
		splice(index,num)，从index开始删除，一次删除num个
	数组长度的更新会同步到页面上，是响应式的
v-model
	获取和设置表单元素的值（双向数据绑定）
	绑定的数据会和表单元素相关联

一、父组件向子组件传值：
1、在父组件中写上需要传的值，例如 :titile=‘父组件值’ 或者 :title=‘title’ 动态绑定
2、在子组件中用props获取父组件中的属性名接收值，例如: props:[‘title’]
props属性值类型：String Number Boolean Array Object
props传递数据原则：单向数据流
二、子组件向父组件传值：
1、子组件通过自定义事件使用$emit()向父组件传递信息：

   <button @click="$emit('largeFont',5)"></button>

2、父组件监听子组件的事件:
$event接收子组件中事件的值

<div :style="{fontSize:fontSize+'px'}"></div>
<menu-item @largeFont="handle($event)"></menu-item>

<script>
 data() {
  return {
    fontSize:10,
    }
}
  methods: {
 		 handle(val) {
   		 this.fontSize += val
  		},
  }
</script>

三、插槽：slot
相当于在子组件中预留一个位置，父组件调用该子组件时可以把值展示在子组件预留的位置
具名插槽就是将插槽命名，选择某一个插槽。

1. 子组件home.vue:

<div>
	<p>子组件的插槽内容：</p>
	<slot name='header'></slot>
</div>

父组件login.vue:

<home slot='header'>子组件的插槽</home>

此时就会在父组件中显示：

子组件的插槽内容：子组件的插槽

2.作用域插槽：父组件对子组件的内容进行加工处理，例如高亮等处理
在子组件中：循环遍历list，动态绑定slot并将item命名为info

<template>
    <div>
        <li v-for="item in list" :key="item.id">
            <slot :info = 'item'>
               {{item.name}}
            </slot>
        </li>
    </div>
</template>
<script>
    export default {
        name: "FruitList",
        data() {
            return {
                list: [{
                    id: 1,
                    name: 'apple'
                }, {
                    id: 2,
                    name: 'orange'
                }, {
                    id: 3,
                    name: 'banana'
                }]
            }
        }
    }
</script>

在父组件中：引入子组件的标签，template标签的属性 slot-scope可以得到子组件传递来的数据info

<template>
    <div>
        <FruitList>
            <template slot-scope="slotProps">
                <strong v-if="slotProps.info.id===1">{{slotProps.info.name}}</strong>
                <span v-else>{{slotProps.info.name}}</span>
            </template>
        </FruitList>
    </div>
</template>