VUE3学习---【一】【从零开始的VUE学习】

什么是Vue

Vue是一款用于构建用户界面的JavaScript框架(渐进式框架)

Vue的两个核心功能：

声明式渲染：Vue基于标准HTML拓展了一套模板语法，使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系
响应式：Vue会自动追踪JavaScript状态并在其发生变化时响应式地更新DOM

渐进式框架

渐进式框架的意思是：“可以根据用户的需求场景，用不同的方式使用Vue”

无需构建步骤，渐进式增强静态的HTML(CDN)
在任何页面中作为Web Components嵌入(CDN)
单页应用(构建)
全栈 / 服务端渲染(SSR)
Jamstack / 静态站点生成(SSG)
开发桌面端、移动端、WebGL界面

使用Vue的方法大致分为两种：“单文件组件(构建式)”、“API风格(CDN)”

单文件组件：使用Node.js等工具辅助构建Vue生产环境，在这个生产环境中我们可以使用一中和类似HTML格式的文件来书写Vue组件，它被称为单文件组件(*.vue文件，也叫SFC)
API风格：Vue的组件可以按两种不同的风格书写：“选项式API”、“组合式API”
选项式API(推荐新手)：用包含多个选项的对象来描述组件的裸机，例如data、methods等
组合式API：使用导入的API函数来描述组件逻辑

注意：在本文章中将会使用无构建模式的“选项式API”

创建一个Vue应用

什么是Vue应用

在Vue的世界，使用Vue我们需要创建一个Vue应用

这个应用包含了：

应用数据：应用数据是动态更新的
应用行为：应用所做出的响应，例如鼠标点击行为等等

使用Vue应用

使用Vue应用，我们一般有两个步骤

创建Vue应用：定义Vue应用的数据、行为
挂载Vue应用：指定这个Vue应用挂载到哪一个(多个)DOM对象上

Vue应用使用：“createApp”函数创建一个新的应用实例

语法：

createApp({ 根组件选项 })

一个例子：

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

根组件

传入createApp的对象实际上是一个组件，每个应用都需要一个“根组件”，其它组件将作为其子组件

根组件的创建有两种方式：

创建一个根组件变量，随后传入根组件变量
直接写入一个匿名根组件变量

<body>
	<div id="app">
		{{comment}}
	</div>
	<div id="app2">
		{{comment}}
	</div>
	<script>
		//创建一个根组件变量
		const root = {
			data() {
				return {
					comment:"Hello I am YangYang."
				}
			}
		};
		//将根组件变量作为参数传入
		const app = Vue.createApp(root).mount('#app');
		//直接传入匿名根组件
		const app2 = Vue.createApp({
			data() {
				return {
					comment:"Hello I am ZhaoYi."
				}
			}
		}).mount('#app2');
	</script>
</body>

挂载应用

成功创建一个应用后，我们还需要将这个应用挂载到某个DOM对象(容器)上，这个应用才会被渲染

语法：

应用.mount(CSS选择器)

应用根组件的内容将会被渲染在容器元素里面，容器元素自己不会被视为应用的一部分
.mount()方法应该始终在整个应用配置和资源注册完成之后被调用，它的返回值是“根组件”

一个例子：

//html
<div id="app"></div>
//js
app.mount('#app')

模板语法

Vue使用基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上

所有的Vue模板都是语法层面合法的HTML

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法(即双大括号)

双大括号标签会被替换为相应组件实例中msg属性的值，同时msg属性更改时它也会同步更新

<span>Message: {{ msg }}</span>

原始HTML

双括号会将数据解释纯文本，而不是HTML，若想插入HTML需要使用“v-html”【指令】

<span>的内容会被替换为rawhtml属性的值，插值为纯HTML --- 数据绑定将会被忽略，注意，不能使用v-html来拼接组合模板，因为Vue不是一个基于字符串的模板引擎

<body>
	<div id="app">
		<p>这是一个文本:{{rawhtml}}</p>
		<p>这是一个HTML:<span v-html="rawhtml"></span></p>
	</div>
	<script>
		const app = Vue.createApp({
			data(){
				return {
					rawhtml: '<span style="color:red">这是一个加粗的文本</span>'
				}
			}
		});
		app.mount('#app');
	</script>
</body>

效果：

Attribute绑定

双大括号不能在HTML attributes中使用，想要响应式地绑定一个attribute(属性)，应该使用：“v-bind”【指令】

<div v-bind:id="dynamicId"></div>

简写

因为v-bind非常实用，因此Vue提供了特定的简写语法

语法：

“v-bind:参数” 相当于 “:参数”

<div :id="dynamicId"></div>

同名简写

如果attribute(属性)的名称与绑定的JavaScript值的名称相同，那么可以进一步简化语法，省略attribute值：

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

布尔型Attribute

布尔型attribute根据 ture / false值来决定attribute是否应该存在于该元素上

disabled就是常见例子之一

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

当isButtonDisabled为真值或一个空字符串(即 <button disabled="">)时，元素会包含这个disabled的属性而当其为其他假值时 attribute将被忽略(即该值不存在)

动态绑定多个值

如果你有一个包含多个attribute【属性】的JavaScript对象，那么我们可以直接绑定它

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的v-bind，可以将它们一次性绑定到单个元素上

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

使用JavaScript表达式

Vue所有的数据绑定都支持完整的JavaScript表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

这些表达式都会被作为JavaScript，并且在执行过程中会被执行

JavaScript表达式的应用场景：

文本插值{{双大括号}}
任何Vue指令(以v-开头的)的值中

仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的JavaScript代码

一个简单的判断方法：“是否可以被合法的写在return语句后面”

下面的例子都是无效的：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令 Directives

指令是带有v-前缀的特殊attribute，Vue提供了很多内置指令

指令attribute的期望值是一个JavaScript表达式，一个指令的任务是在表达式的值发生变化时响应式地更新DOM

语法：

Name:Arguments.prevent = 'value'

指令名字Name

指令名字其实就是指令

例如：

v-bind：绑定指令
v-if：选择指令
v-for：循环指令

参数 Arguments

某些指令需要一个参数，例如v-bind指令来响应式地更新一个HTML attribute

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

这里的“href”就是一个参数，它告诉“v-bind”指令将表达式“url”的值绑定到元素的“href”的attribute上

动态参数

在指令参数上可以使用一个JavaScript表达式，需要包含在一对方括号内，这时就叫做动态参数

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

动态参数值的限制

动态参数中表达式的值应该是一个字符串，或者是null

null代表显式移除该绑定，其它非字符串的值会报错

动态参数语法的限制

动态参数表达式中不能使用“空格”和“引号”

修饰符 Modifiers

修饰符是以点开头的特殊后缀，表明指令需要一些特殊的方式被绑定