VUE3学习---【一】【从零开始的VUE学习】
目录
什么是Vue
渐进式框架
创建一个Vue应用
什么是Vue应用
使用Vue应用
根组件
挂载应用
模板语法
文本插值
原始HTML
Attribute绑定
简写
同名简写
布尔型Attribute
动态绑定多个值
使用JavaScript表达式
仅支持表达式
指令 Directives
指令名字Name
参数 Arguments
动态参数
动态参数值的限制
动态参数语法的限制
修饰符 Modifiers
什么是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
修饰符是以点开头的特殊后缀，表明指令需要一些特殊的方式被绑定
