浅浅学习一下Vue

Vue是什么？

渐进式JS框架，基于标准的html，css，js构建，并且提供了一套声明式,组件化的编程模型优点:易学易用，性能出色，适用场景丰富

Vue组件的两种风格:

1.选项式API(Vue2):

2.组合式API(Vue3):

Vue项目创建:

npm init vue@latest

注意: 项目名称不要大写

项目创建完成后 根据提示运行Vue项目

cd <你的Vue'项目名>

npm install   

npm run dev 

然后就可以访问你的Vue项目了

Vue项目开发环境: vscode + Volar扩展

Vue项目的各个文件夹:

.vscode	                --- vscode配置文件
node_modules		    --- Vue项目的运行依赖文件夹(npm install时安装的)
public					--- 资源文件夹(浏览器图标 favicon.ico)
src						--- 源码文件夹
.gitignore				--- git文件
index.html				--- html入口文件(代码在这个文件里面运行)
package.json			--- 版本信息描述文件
README.md			    --- 注释文件
vite.config.js			--- Vue配置文件
jsconfig.json			--- 用于在开发中提高开发效率和IDE性能的文件
package-lock.json       --- 用于确保依赖包的一致性和稳定性的配置文件

Vue语法:

Vue使用的一种基于html的模板语法，可以让我们能够声明式的将其组件实例的数据绑定到呈现的dom上，所有的Vue模板都是语法层面合法的html，可以被合法的浏览器和html解析器解析

1.文本插值（最基本的数据绑定）

<template>
  <h>实例</h>
  <p>{{ msg }}</p>
</template>

<script>
export default {
  data(){
    return {
      msg:"hello Vue"
    }
  }
}

</script>

2.JS语法(JS表达式必须写在return后面才合法):

<template>

  <h>实例</h>
  <p>{{ msg }}</p>
  <p>{{ num+1 }}</p>
  <p>{{ ok ? 正确:错误 }}</p>
  <p>{{ message.split("").reverse().join("") }}</p>     <!-- 字符串反转 -->


</template>

<script>

export default {

  data(){

    return {
      msg:"hello Vue",
      num: 10 ,
      ok: true ,
      message: "你好世界",
    }
  }
}

</script>

3.原始HTML:

双大括号会将数据插值为纯文本，而不是HTML，若想插入HTML，需要使用到v-html指令

<template>
  <h>实例</h>
  <p>纯文本:{{ rawHtml }}</p>
  <p>属性:<span v-html="rawHtml"></span></p>
</template>

<script>
export default {
  data(){
    return {
      rawHtml:"<a href = 'https://isyang666.github.io/'>我的博客</a>"
    }
  }
}
</script>

4.属性(Attribute)绑定:

双大括号不能在HTML attributes中使用 想要响应式的绑定一个attribute 需要使用到v-bind
如:

<template>
<div v-bind:id="dynamicId" v-bind:class="dynamicClass">Isyang666</div>

</template>

<script>
export default {
  data(){
    return {
      dynamicId:"appid",
      dynamicClass:"appclass"
    }
  }
}

</script>

<style>
.appclass{
  color: red;
  font-size: 200px;
}
</style>

v-bind指令指示元素的id attribute与组件的dynamicId属性保持一致 如果绑定的值是null或者是undefined 那么该attribute将会从渲染的元素上移除

简写:
因为v-bind非常常用，有简写语法:

<div :id="dynamicId" :class= "dynamicClass">Isyang</div>

布尔型 attribute

依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

v-bind 在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值

objectOfAttrs为一个包含多个属性的JS对象,可以通过v-bind来绑定多个属性到当个元素上

<template>
<div v-bind="objectOfAttrs">Isyang666</div>
</template>

<script>
export default {
  data(){
    return {
      objectOfAttrs:{ 
      id:"appid",
      class:"appclass"
      }
    }
  }
}
</script>
<style>
.appclass{
  color: red;
  font-size: 200px;
}
</style>

条件渲染

使用v-if / v-else-if / v-else 指令来控制元素的显示与隐藏

<p v-if="seen">Now you see me</p>

这里，v-if 指令会基于表达式 seen 的值的真假来移除/插入该p元素另外两个指令也差不多一样 如果seen为true v-else不执行 反之执行。
和v-if一样,v-show也是根据表达式的真假来控制元素的显示与隐藏。不同的是v-show的元素始终会被渲染并保留在DOM中，只是简单地基于CSS的display样式来切换,而v-if在切换的时候条件区块内的监听器和子组件都会被销毁与重建

列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，in可以也用of代替，其中 items 是源数据的数组，而 item 是迭代项的别名：

<template>
<div v-for="item in dataList">{{ item }}</div>
</template>

<script>
export default {
  data(){
    return {
      dataList:["data1","data2","data3"]
    }
  }
}
</script>

你的数据比较复杂你可以在item后加.去访问指定的值
v-for 也支持使用可选的第二个参数表示当前项的位置索引。

js:

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

template

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

效果:

Parent - 0 - Foo
Parent - 1 - Bar

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定:

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})
</script>

<template>
	<ul>
    <li v-for="(value, key, index) in myObject">
		  {{ index }}. {{ key }}: {{ value }}
		</li>
  </ul>
</template>

效果:

0. title: How to do lists in Vue
1. author: Jane Doe
2. publishedAt: 2016-04-10

通过 key 管理状态​

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute

<div v-for="item in items" :key="item.id">
</div>

事件处理

事件监听

可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=”handler” 或 @click=”handler”。

事件处理器 (handler) 的值可以是：
内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

• 内联事件处理器
  内联事件处理器通常用于简单场景，例如:

  <template>
  <button v-on:click="count++">addCount</button>
  <p>{{count}}</p>
  </template>
  
  <script>
  export default {
  data(){
      return {
      count:0
      }
  }
  }
  </script>

• 方法事件处理器
  随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。
  例如:

  <template>
  <button v-on:click="addCount">addCount</button>
  <p>{{count}}</p>
  </template>
  
  <script>
  export default {
  // 数据
  data(){
      return {
      count:0
      }
  },
  // 方法
  methods:{
      addCount(){
      // 用this去访问data中定义的数据
      this.count++
      }
  }
  
  }
  </script>

事件传参