前端入门4:Vue

入门程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          message: 'Hello Vue'
        }
        //Vue中定义数据，必须通过data方法来定义
        //data方法返回值是一个对象，在这个对象中定义数据
        //插值表达式中编写的变量，一定是Vue中定义的数据.否则报错
      }
    }).mount('#app')//#app是Vue应用实例接管的范围

    //先创建应用实例,然后传入js对象,这个对象中有一个data方法,data方法的返回值就是Vue中的数据
    //{{插值表达式渲染页面}}
  </script>
</body>
</html>

Vue指令

形式

<p v-xxx="....">.....</p>

常见指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

指令详解

v-for

<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>
<!--  items 为遍历的数组  -->
<!--  item 为遍历出来的元素  -->
<!--  index 为索引/下标,从0开始,可以省略,省略index语法： v-for = "item in items" -->

<!--   key   -->
<!-- 作用:给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能 -->
<!-- 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）-->

<!-- 遍历的数组，必须在data中定义 -->
<!-- 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令 -->

<!-- 错误写法,key前有空格 -->
<tr v-for="(item,index) in empList" : key="item.id">

<!--正确写法,key前无空格-->
<tr v-for="(item,index) in empList" :key="item.id">
<!-- :key是一个完整的 Vue 指令（v-bind:key 的简写） -->

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

//语法: v-bind:属性名="属性值"
<img v-bind:src="item.image" width="30px">

//简化
<img :src="item.image" width="30px">

v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。

v-if

语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
场景：要么显示，要么不显示，不频繁切换的场景
其它：可以配合 v-else-if / v-else 进行链式调用条件判断

   <!-- 基于v-if/v-else-if/v-else指令来展示职位这一列 -->
  <td>
    <span v-if="emp.job === '1'">班主任</span>
    <span v-else-if="emp.job === '2'">讲师</span>
    <span v-else-if="emp.job === '3'">学工主管</span>
    <span v-else-if="emp.job === '4'">教研主管</span>
    <span v-else-if="emp.job === '5'">咨询师</span>
    <span v-else>其他</span>
  </td>

v-show

语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
原理：基于CSS样式display来控制显示与隐藏
场景：频繁切换显示隐藏的场景

<!-- 基于v-show指令来展示职位这一列 -->
<td>
    <span v-show="emp.job === '1'">班主任</span>
    <span v-show="emp.job === '2'">讲师</span>
    <span v-show="emp.job === '3'">学工主管</span>
    <span v-show="emp.job === '4'">教研主管</span>
    <span v-show="emp.job === '5'">咨询师</span>
</td>

v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据
语法：v-model="变量名"
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。

createApp({
    data() {
        return {
        searchForm:{
            name:'',
            gender:'',
            position:''
        }
        }
    }
    }).mount('#container')

<!--  name和searchFrom.name进行绑定  -->
<input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">

<!--  v-model 中绑定的变量，必须在data中定义。-->

v-on

作用：为html标签绑定事件（添加事件监听）

语法：

v-on:事件名="方法名"
简写为 @事件名="…"
<input type="button" value="点我一下试试" v-on:click="handle">
<input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。

<div id="app">
    <button type="button" v-on:click="handle">点我</button>
    <button type="button" @click="handle">再点我</button>
</div>

createApp({
    data() {
        //...
    },
    methods:{
        handle(){
            alert('按钮被点击了');
        }
    }
    }).mount('#app');

注意： methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。

mounted钩子函数

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

    methods: {
      async search() {
        //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
        const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
        this.empList = result.data.data;
      },
      clear() {
        this.searchForm= {
          name: '',
          gender: '',
          job: ''
        }
        this.search();
      }
    },
    mounted() {
      this.search();
    }
  }).mount('#container')

花になって