VUE基础学习

一、文件目录结构

• .vscode ----- vscode工具配置文件
• node_modules ----- vue的依赖文件夹
• public ----- 资源文件夹（浏览器图标）
• src ----- 源码文件夹（assets：公共资源图片css或字体等）
• package.json ----- 信息描述文件
• vite.config.js ----- vue配置文件

二、VUE的模版语法

1、文本插值 { {变量}} ：

1. 其中也支持一些单一表达式（ps:有返回值）。 例如：

<template>
  <p>{
  {name + 1 > 10 ? "你好！":"你不好"}}</p>
</template>
<script>
  export default {
    data(){
      return{
        name: 123
      }
    }
  }
</script>

2. 对于插入值的内容也会被转为纯文本对HTML显示（加入需要v-html=‘变量’）,例如：

<template>
  <p v-html="rahtml"></p>
</template>
<script>
  export default {
    data(){
      return{
        rahtml: "<a href='https://www.baidu.com'>百度</a>"
      }
    }
  }
</script>

2、属性绑定 v-bind/:

1. 不能使用{ {变量}}直接加入属性位置获取，需要使用v-bind,(ps:如果变量属性值为null或者undefined，那么该属性会从元素上移出),同时也支持绑定多个属性，例如：

<template>
  <div v-bind:id="dname">完整格式</div>
  <div :id="dname">简写</div>
  <button :disabled="isDiabled">按钮</button>
  <div v-bind="objectAttributes">多属性</div>
</template>
<script>
export default {
  data() {
    return {
      dname: "dname",
      isDiabled: false,
      objectAttributes:{
        id: "id",
        class: "class"
      }
    }
  }
}
</script>

3、条件渲染 v-if/v-show

1. v-if,指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被染
2. v-else
3. v-else-if
4. v-show

• ps: v-if和v-show的区别：
  (1) v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
  (2) v-if也是惰性的:如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
  相比之下，
  (3) v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display属性会被切换.

• 总的来说,v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好;如果在运行时绑定条件很少改变，则v-if会更合适
  例如：

<template>
  <div v-if="flag">条件测试</div>
  <div v-else-if="!flag">条件2</div>
  <div v-else>条件3</div>
  <div v-show="flag">条件5 </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true
    }
  }
}
</script>

4、列表渲染 v-for

使用v-for指令基于一个数组来渲染一个列表语法：item in items,其中也可以使用of命令代替in
例如：

<template>
  <div v-for="item in arrays">{
  { item }}</div>
  <hr>
  <div>
    <div v-for="item in arraysObject">我叫{
  { item.name }}，今年{
  { item.age }}岁，性别是{
  { item.sex }}
      <img :src="item.sex">
    </div>
  </div>
  <hr>
  <div>
    <div v-for="(item,index) of arraysObject">
      我叫{
  { item.name }}，今年{
  { item.age }}岁，性别是{
  { item.sex }},下标是{
  { index }}
    </div>
  </div>
  <hr>
  <div>
    <div v-for="(value,key,index) of objects">
    {
  { value }}-{
  { key }}-{
  { index }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arrays: ["name1", "name2", "name3"],
      arraysObject: [{name: "name1", age: 123, sex: "man"}, {name: "name2", age: 10, sex: "man"}, {
        name: "name3",
        age: 12,
        sex: "woman"
      }],
      objects: {name: "name1", age: 123, sex: "man"}
    }
  }
}
</script>

ps:在渲染列表数据时，存在顺序修改，而为了不让vue每次都渲染所有数据，只对修改的数据重新渲染，使用key属性(在真实的场景下一般不会使用index数组索引作为key，而是使用数据的返回的唯一id作为数据key)
例如：<