Vue组件化与指令详解

Vue组件化

什么是Vue组件？

组件 component 就是网页的零部件，一个网页的一个部分就是一个组件，可以由多人开发同一个网页的各种组件。

单文件组件

一个vue文件就是一个单文件组件,由三个部分组成

<tempalte>
   html模板
</tempalte>

<script>
    js逻辑
</script>

<style>
    css样式
</style>

使用自定义组件

第一步：引入子组件

import MyButton from '组件路径'

第二步：注册子组件

components:{
        MyButton,
    }

第三步：使用子组件

<!-- 3.使用子组件，两种方式都可以 -->

<MyButton></MyButton>

<my-button></my-button>

指令

什么是指令？

vue指令是指标签上的 v-* 模式的属性，可以实现很多数据遍历、渲染、事件绑定等等功能

v-text 和 v-html

v-text 相当于.innerText，将数据作为普通文本添加到标签中

v-html 相当于.innerHTML，将数据作为html标签添加到标签中，可以渲染标签效果

v-show 和 v-if

v-show 根据数据决定是否显示标签，显示隐藏通过css的display实现

v-if 根据数据决定是否创建标签，条件满足就创建标签，条件不满足就不创建标签

<h1 v-show="age>=18">可以找女朋友了</h1>
<h1 v-if="age>=18">可以找男朋友了</h1>

v-if 和 v-else-if 与 v-else

v-if 根据数据决定是否创建标签，条件满足就创建标签，条件不满足就不创建标签

v-else-if 多分支语句

v-else if的否则部分

<h1 v-if="score>=90">优秀</h1>
<h1 v-else-if="score>=80">良好</h1>
<h1 v-else-if="score>=70">中等</h1>
<h1 v-else-if="score>=60">及格</h1>
<h1 v-else>不及格</h1>

v-for

用于遍历数组和对象

用法一：只遍历数据值

<h1 v-for="v in arr" :key="v">姓名：{{v}}</h1>

用法二：遍历数组值和索引

<h1 v-for="(v,i) in arr" :key="i">{{i}} - {{v}}</h1>

用法三：遍历对象的属性值, 索引, 属性名

<h1 v-for="(v, k, i) in obj" :key="v">{{v}} - {{k}} - {{i}}</h1>

v-model

用于实现数据双向绑定，主要应用于表单元素 input select textarea

html部分

<p>用户名：<input type="text" v-model="username"/></p>

js部分

export default {
  data(){
    return {
      username:'六思逸',
    }
  },
}

v-on绑定事件

用于绑定事件，可简写为@

html部分

<h1 v-on:click="changeMsg">{{msg}}</h1>

<h1 @click="changeMsg">{{msg}}</h1>

js部分

export default {
    data(){
        return {
            msg:'今天星期二',
        }
    },

    // 方法和函数
    methods:{
        //修改消息的事件处理函数
        changeMsg(n){
            this.msg='明天星期三';
        }
    }
}

Mustach胡须表达式

定义数据

export default {
    data(){
        return {
            msg:'今天星期二'
        }
    }
}

渲染数据

<template>
    <h1>{{msg}}</h1>
</template>