VUE笔记

MVVM框架思想

M：model层：操控数据
V：view层：显示的用户交互页面
VM：modle层和视图层之间的数据渲染
数据驱动：view页面上的任何交互效果都是靠数据驱动完成的，不要直接操作DOM节点

认识Vue

Vue是客户端开发框架，是开发客户端（前端）的，不能直接操作数据库（后端）：html+css+JS

起步：创建组件

import { createApp } from 'vue'//引入vue
const app = createApp({//创建组件
  data(){
  		const result = {
			message:"这是一个vue组件"
		}
  		return result
	}
});
app.mount("#app")//组件的挂载

一、数据绑定

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态（data：返回的数据）变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作

1、文本插值

在页面中插入我们想要的各种数据
我们需要先创建一个组件之后进行组件的挂载之后才能进行文本插值

使用 {{ }}进行文本插值，{{}}内放置自己需要插入的数据
这里的{{}}里面可以直接放数据，也可以放需要执行的方法（需要具有返回值）

<!-- html部分-->
<div id="app">{{message}}</div>
<!--
编译后：<div id="app">这是一个vue组件</div>
-->

//js部分
import { createApp } from 'vue'//引入vue
const app = createApp({//创建组件
  data(){
  		const result = {
			message:"这是一个vue组件"
		}
  		return result
	}
});
app.mount("#app")//组件的挂载

2、html插值

由于vue标签里面的文本插值不会直接解析成为html标签
v-html指令插入html ：v-html =“raw”
类似于属性的绑定，这里绑定的标签的innHTML会被raw属性保持同步

<div id="app">{{message}} 
    <span v-html="message" style="color:red;"><span>
</div>
<!--编译为
<div id="app" >这是一个vue组件
    <span  style="color:red;">这是一个vue组件<span>
</div>
 -->

3、各种属性的绑定

我们需要标签绑定一些属性，如：class id value等
这时我们需要用到v-bind指令进行属性的绑定

v-bind: 属性 =" “,简写为 : 属性 = " "
这里” "不能使用{{}}进行属性的绑定，直接写绑定的属性名
或者写成字符串模板
在字符串模板中引用${} 类似于 vue 的 {{}}

<!-- html部分-->
<div id="app" v-bind:class="cla" >{{message}}</div>
<!--
编译后：<div id="app" class="app-class">这是一个vue组件</div>
-->

//js部分
import { createApp } from 'vue'//引入vue
const app = createApp({//创建组件
  data(){
  		const result = {
			message:"这是一个vue组件",
			cla:"app-class"
		}
  		return result
	}
});
app.mount("#app")//组件的挂载

4、列表渲染

当有一组数据需要被渲染在view界面上时，
这时我们需要用到列表渲染指令
v-for:“item in items”
这里的items是源数组的数组 item是迭代项的别称

//js片段
data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<!--html片段-->
<li v-for="item in items">
  {{ item.message }}
</li>
<!--编译结果：
<li >Foo</li>
<li >Bar</li>
	-->

5、条件渲染

v-if
v-else
v-else-if
条件性的渲染某一区域的内容
当指令的表达式的返回值为真时，才被渲染
v-else :出现在 v-if 或者 v-else-if 后面 否则不被识别

<!--html代码-->

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else="awesome">Vue is none!</h1>
<template v-if = "awesome">
 	<div>1233</div>
 	<div>2344</div>
 </template>
 <template v-else = "awesome">
 	<div>23345</div>
 	<div>4466</div>
 </template>
<!--当awesome返回值为真时，才渲染该标签-->

二、事件处理

使用v-on(简写为@)指令监听DOM事件
在事件触发时执行相应的javascript语句

1、内联事件处理器

事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

data() {
  return {
    count: 0
  }
}

<button @click="count++">加 1</button>
<p>Count is: {{ count }}</p>

2、方法事件处理器

一个指向组件上定义的方法的属性名或是路径

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    alert(`Hello ${this.name}!`)
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

三、生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码

举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}