vue文件组成、vue插值表达式及vue指令的详解及用法

（一）单文件组件：一个 .vue 文件就是一个组件

1. 安装插件 （语法高亮）

Visual Studio Code可以安装vue官方推荐的插件：Vue Language Features (Volar)。

让文件结构看起来更清晰哦！

2.一个.vue单文件组件由三部分组成

    template： 结构 （有且只能一个根元素，否则会有报错提示）

    script:          js逻辑

    style：         样式

3. 让组件支持 less、sass

vue支持css、less、sass；less和sass需要安装对应的依赖包；依赖包可去查看webpack中文文档，搜索less或sass。

如安装less-loader命令

（1） style标签， lang=“less”，开启less功能

（2） 装包： yarn  add  less-loader@7.2.1  less  -D

（二） vue插值表达式

vue如何提供数据

1.  通过 data 属性可以提供数据， data属性必须是一个函数

2.  这个函数需要返回一个对象，这个对象就代表vue提供的数据

作用:  使用 data 中的数据渲染视图（模板），动态设置标签内容

export default {
  // data函数提供数据
  data() {
    return {
      message: '哈登，你还好吗？'
    };
}

使用插值表达式，可以在模板中渲染数据：

<template>
    //插值表达式语法要用两个花括号{{}}包裹
  <div>{{ message }}</div>
</template>

<script>
export default {
  // data函数提供数据
  data() {
    return {
      message: '小鹅，你还好吗？'
    };
  },
}
</script>

<style>

</style>

插值表达式支持多种类型的表达式：

<template>
  <div>
    <!-- 支持三元表达式 -->
    <h1>{{ age1 >= 18 ? '成年' : '未成年' }}</h1> 
    <h1>{{ age2 >= 18 ? '成年' : '未成年' }}</h1>
    <!-- 支持变量、运算 -->
    <h1>{{ number1 }} + {{ number2 }} = {{ number1 + number2 }}</h1>

    <ul>
      <!-- 支持对象.属性语法 -->
      <li>姓名：{{ student.name }}</li>
      <li>是否成年：{{ student.age >= 18 ? '成年' : '未成年' }}</li>
      <li>性别：{{ student.gender }}</li>
    </ul>
    <!-- 支持函数调用 -->
    <h1>今年是何年：{{ currentYear() }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age1: 10,
      age2: 20,
      number1: 189,
      number2: 299,
      student: {
        name: '小五',
        age: 30,
        gender: '男'
      }
    }
  },
  methods: {
    currentYear() {
      // 当前日期
      const date = new Date();
      return date.getFullYear();
    }
  }
}
</script>
<style>

</style>

注意点：

    （1）使用数据在 data 中必须存在

    （2）能使用表达式，但是不能使用语句 if   for ...

    （3）不能在标签属性中使用 {{  }} 插值

（三） vue指令

vue指令: 特殊的 html 标签属性,  特点:  v- 开头

每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能

 v-bind指令：

说明：插值表达式不能用在html的属性上，想要动态的设置html元素属性，需要使用v-bind指令

作用：  动态的设置html的标签属性

语法：  v-bind:属性名="值"

简写：  :属性名="值"

<template>
  <div>
    <!-- v-bind作用：给标签绑定属性（动态绑定） -->
    <!-- 语法：简写:属性名="表达式" -->
    <img v-bind:src="url" alt="">
    <img :src="url" alt="">
  </div>
</template>
<script>
export default {
  data() {
    return {
      url: 'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF'
    }
  }
}
</script>
<style>

</style>

 v-bind案例：

<template>
  <div>
    <p>
      <a :href="url">跳转百度</a>
    </p>

    <p>
      <img :src="baiduLogo" alt="">
    </p>

    <p>
      <button :disabled="notOK">可用</button>
      <button :disabled="ok">禁用</button>
    </p>
    <p>用户名：<input type="text" :value="username"></p>
    <p>密码：<input type="password" :value="password"></p>
  </div>
</template>
<script>
import logo from './assets/logo.png'
export default {
  data() {
    return {
      imgUrl: logo,
      url: 'https://www.baidu.com/',
      baiduLogo: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
      ok: true,
      notOK: false,
      username: "user",
      password: "123456",
    }
  }
}
</script>
<style>

</style>

v-on指令：

作用：注册事件

语法：

    1. v-on:事件名=“要执行的少量代码"

    2. v-on:事件名=“methods中的函数名"

    3. v-on:事件名=“methods中的函数名(实参)"

注意：事件处理函数在methods中提供

<template>
  <div>
    <h1>计数：{{ count }}</h1>
    <button v-on:click="count++">加一</button>
    <button @click="count++">简写加一</button>

    <button @click="addMore(3)">加3</button>
    <button @click="addMore(5)">加5</button>
    <button @click="addMore(10)">加10</button>

    <button @click="add100">函数可以省略括号</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 10,
    }
  },
  methods: {
    addMore(number) {
      // vue语法规定，在Vue的函数中，要使用data里的数据，需要加this
      this.count += number;
    },
    add100() {
      this.count += 100;
    },
  }
}
</script>
<style>

</style>

注意：

a标签默认点击会跳走,  希望阻止默认的跳转,

应该如何操作呢？如何阻止默认行为呢？

语法：e.preventDefault()

vue中如何获取事件对象呢？

vue中获取事件对象：

(1) 没有传参, 通过形参接收 e

(2) 传参了, 通过$event指代事件对象 e

<template>
  <div>
    <!-- 没有传参, 通过形参接收e -->
    <a href="https://www.baidu.com" @click="fn">抽奖活动</a>
    <hr>
    <!-- 传参了, 通过$event指代事件对象 e -->
    <a href="https://www.baidu.com" @click="fn2(10, $event)">抽奖活动</a>
  </div>
</template>
<script>
export default {
  methods: {
    fn(event) {
      // 组织a标签点击事件的默认跳转行为
      event.preventDefault();
    },
    fn2(number, event) {
      event.preventDefault();
    }
  }
}
</script>
<style>

</style>