vue html标签属性的基础使用

el挂载点不要使用在body和html标签上

html属性

<div id=“app”>
{{xxx+'添加内容'}}   {{aaa.aaab}} {{bbb[0]}}
</div>

<div v-text=“xx”>
    ●v-text=“xxx+'添加内容'”   在xxx内容后加xx字符串，会覆盖原内容
    ●v-html=“<div>123</div>”  html标签可以被解析，会覆盖原内容
    ●v-on:事件=“methods自定义事件名”   
    简写 @事件=“事件名/事件名()”  //与上面的一样
    @click   点击事件fun("a","b",$event(原生事件对象))
    @monseenter  移入
    @dblclick   双击事件
    修饰符
    @click.once  函数只执行一次
    .prevent   阻止默认行为(阻止链接跳转)
    .stop  阻止事件冒泡(如果父元素有相同事件，不会被触发)
    .self   只有当前元素被触发才会调用，不会阻止事件冒泡
    .capture  事件捕获(从父级到子级)
    按键修饰符
    @keyup 当键盘抬起时执行函数
    @keyup.enter  当按下enter后执行函数
    @keyup.112(keycode)
    @keyup.f2(自定义键位)在js全局中写Vue.config.keyCodes.f2=113
    ●v-show=“true/false/方法名(写在data内)”   内容显示或隐藏，如果为false标签还在只是css样式为display:none，建议使用v-show
    ●v-show=“判断语句(age>18)”
    ●v-if=“true/false/方法名/判断语句” 用法与show一样，但是v-if会不断的添加和销毁数据，如果为false标签不会创建
    ●v-else-if=“xx”  同上
    ●v-else   如果v-if不满足则执行v-else(不能单独使用(多标签)，与v-if标签之间不能有其他标签)
    ●v-model=“data名”  数据双向传递，vue,data数据传给标签，标签数据传给data(只有在input，textarea，select中才能使用)
    ●v-once  数据只渲染一次，后续js中数据改变本标签不会改变
    ●v-cloak  未渲染不显示，配合css，[v-cloak]:{display:none}
    ●v-for  <li v-for=“(value,index) in 数组/字符串/数字/对象”> {{index}}---{{value}}</li>遍历输出
    ●v-bind:属性名(value等)=“data名/js表达式”  给标签属性绑定元素值，默认情况下会去vue实例中查找
       简写    :属性名=“data名/js表达式”
    如果绑定style的class(默认去modle中找)
    1,    :class=“['a','b',a>18？'c':'']”  可以逻辑判断是否绑定某个class
    2,    :class=“[{'a' : true}]”
    3,    :class=“obj”   vue,data中写obj:{'a',true}
    绑定标签style属性(默认去moble中找，样式名称带-需要加引号)
    1,   :style=“{'color':'red'}”
    2,   :style=“obj”  vue,data中写obj:{'color':'red'}
    3,   :style=“[obj1,obj2]”  添加多个style



过渡动画(动画写在css内，执行完后会移除动画)
把要添加动画的标签元素写在<transition></transition>内(transition内只能添加一个标签，如要写多个则要创建多个transition标签)，给要添加动画的元素添加v-if或v-show组件
transition标签注意点:
    1.要给多少个标签添加动画就要写多少个transition标签
    2.默认为true的话，刚打开页面不会有过渡动画，如果需要一打开页面就有过渡动画，需要给transition标签添加appear属性
    3.如果需要在一个html内添加多个动画，需要给transition标签添加name属性，并在css中添加过渡动画时把前缀v改为name属性值
在css内写
.v-leave{xx}   离开过渡开始时
.v-enter{xx}    进入过渡开始时状态
.v-leave-to{xx}  离开过渡结束时
.v-enter-to{xx}   进入过渡结束时的状态
.v-leave-active{}    离开过渡生效时的效果
.v-enter-active{
transition:all 5s
}  进入过渡生效时的效果

动画钩子函数(给transition添加属性，方法写在methods内)还是会默认执行css的类名(如果不想调用css类名，在transition内添加v-bind:css=“false” )
钩子函数内要一打开就调用不仅要加appear还要在enter/leave内延迟调用done()
v-on:before-enter=“xx”   进入动画开始之前调用(传递一个参数(标签内元素))
:enter=“xx”    动画过程中调用(传递两个参数,一个标签内元素(el)，一个回调函数(必须调用(done())，否则后续的after-enter函数不会被调用))，实现过渡动画需要在enter函数内写el.offsetWidth或el.offsetHeight
:after-enter=“xx”   动画结束后调用(一个参数)
:enter-cancelled=“xx”

:before-leave   离开动画开始
:leave
:after-leave
:leave-cancelled


组件
组件切换
使用标签<component :is=“name(vue实例中的data)”>
</component>(写在vue容器内，默认不保存上一组件的状态)

保存组件状态
写在<keep-alive></keep-alive>标签内
如:
<keep-alive>
<component :is=“name(vue实例的data)”>
</component>
</keep-alive>
创建组件
Vue.component(“组件名”,{template:“html组件id名”})
let app=new Vue({
el:“#app”,
data:{
    name:“a1(组件名)”
}
})

给组件添加动画
如果是一个组件就写<transition></>
如果是多个组件就写<transition-group></>

切换动画默认同时进行，在transition标签内添加mode属性可控制先后
mode=“out-in(先离开在进入)/in-out(先进入在离开)”切换效果

给子组件添加插槽(slot标签)
<template id=“father”>
  <div>
     <son>
       //默认不能添加数据，需要在子组件内添加slot标签
    </son>
  </div>
</template>
<template id=“son”>
  <div>
     <slot>这里是默认数据(如果son内不写东西会显示默认数据，如果写数据则会显示写的数据)</slot>
  </div>
</template>

匿名插槽和具名插槽
v-slot:简写#
没指定名称的插槽为匿名插槽，有多少个匿名插槽，子标签内的数据就会复制几遍，如果要指定替换插槽可以给slot标签添加name属性并在子标签内需要添加的指定内容添加到template标签内，并给标签添加v-slot属性，添加了name属性的插槽叫具名插槽，如
<slot name=“one”>默认数据</slot>
<son>
     <template #one>
          <div>要添加的数据</div>
     </template>
</son>

作用域插槽
把子组件的数据传递给父组件，可以用slot-scope属性也可以用v-slot(#)属性，如，#default(插槽名，匿名插槽为default)=“abc(自定义)”
<son>
   <template #default=“abc(自定义)”>
        <div>{{abc.name}}</div>
   </template>
</son>

<template id=“son”>
    <div>
        <slot :name(自定义)=“name(要传递的数据)”
   </div>
</>