做图客网站,品牌建设部门职责,什么叫宣传型网站,企业做商城网站需要什么资质目录
简介
Vue是什么
渐进式框架
单文件组件
API 风格
选项式 API (Options API)
组合式 API (Composition API)
创建一个 Vue 应用
挂载应用
DOM 中的根组件模板
应用配置
多个应用实例
模板语法
文本插值
原始 HTML
Attribute 绑定
简写…目录
简介
Vue是什么
渐进式框架
单文件组件
API 风格
选项式 API (Options API)
组合式 API (Composition API)
创建一个 Vue 应用
挂载应用
DOM 中的根组件模板
应用配置
多个应用实例
模板语法
文本插值
原始 HTML
Attribute 绑定
简写
同名简写
布尔型 Attribute
动态绑定多个值
使用 JavaScript 表达式
仅支持表达式
受限的全局访问
指令 Directives
参数 Arguments
动态参数
动态参数值的限制
动态参数语法的限制
修饰符 Modifiers 简介
我们这里统一使用的是组合式
Vue是什么
我们使用的是Vue3
Vue是一款用于构建用户界面的 JSJavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型。
下面是一个基本的例子这个写法非常的基础createApp{}被绑定到mount(#app)这个div上
import { createApp, ref } from vuecreateApp({setup() {return {count: ref(0)}}
}).mount(#app)
当button被点击(click)时我们执行count两个button之间是我们的插值表达式在页面上显示count的值。当count的值发生变化时这个表达式会自动更新以显示最新的值。
div idappbutton clickcountCount is: {{ count }}/button
/div
结果展示 点击数字会1。
我们这里的counthtml里的是从上面的JS的count获取的如果我们在JS里修改count的值对应HTML里显示的count也会发生变化他们两个数据是绑定好的。
上面的示例展示了 Vue 的两个核心功能 声明式渲染Vue 基于标准 HTML 拓展了一套模板语法(如在html里的click和{}都是模版)使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。 响应性Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
渐进式框架
可以用不同的方式使用 Vue
无需构建步骤渐进式增强静态的 HTML可以作为 Web Components 嵌入在任何页面中单页应用 (SPA)全栈 / 服务端渲染 (SSR)Jamstack / 静态站点生成 (SSG)开发桌面端、移动端、WebGL甚至是命令行终端中的界面
单文件组件
在大多数启用了构建工具的 Vue 项目中我们可以使用一种类似 HTML 格式的文件来书写 Vue 组件它被称为单文件组件 (也被称为.vue文件英文 Single-File Components缩写为 SFC)。顾名思义Vue 的单文件组件会将一个组件的逻辑 (JavaScript)模板 (HTML) 和样式 (CSS) 封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例
script setup
import { ref } from vue
const count ref(0)
/scripttemplatebutton clickcountCount is: {{ count }}/button
/templatestyle scoped
button {font-weight: bold;
}
/style
这里就不用像上面一样进行绑定了不用写createApp之类的了只需要写里面的setup部分即可这里我们换用了其他语句。 script setup 中的代码会在每次组件实例被创建的时候执行。顶层的绑定会被暴露给模板在模版表达式中我们这里导入vueref值在模版中使用的时候会自动解包直接写一个template模版里面就是我们要写的html的内容下面的style是关于当前的样式。
如果你的用例需要进行构建我们推荐用它来编写 Vue 组件。
API 风格
Vue 的组件可以按两种不同的风格书写选项式 API 和组合式 API。
选项式 API (Options API)
使用选项式 API我们可以用包含多个选项的对象来描述组件的逻辑例如data、method这些都是不同的对象来描述逻辑他们所定义的属性会暴露在函数内部的this上指向当前第一个实例。
script
export default {// data() 返回的属性将会成为响应式的状态// 并且暴露在 this 上data() {return {count: 0}},// methods 是一些用来更改状态与触发更新的函数// 它们可以在模板中作为事件处理器绑定methods: {increment() {this.count}},// 生命周期钩子会在组件生命周期的各个不同阶段被调用// 例如这个函数就会在组件挂载完成后被调用mounted() {console.log(The initial count is ${this.count}.)}
}
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template
展示结果Count is:0
组合式 API (Composition API)
通过组合式 API我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中组合式 API 通常会与script setup搭配使用。这个setupattribute 是一个标识在编译时进行一些处理让我们可以更简洁地使用组合式 API。比如script setup 中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与script setup改造后和上面的模板完全一样的组件
script setup
import { ref, onMounted } from vue// 响应式状态
const count ref(0)// 用来修改状态、触发更新的函数
function increment() {count.value
}// 生命周期钩子
onMounted(() {console.log(The initial count is ${count.value}.)
})
/scripttemplatebutton clickincrementCount is: {{ count }}/button
/template
两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。意思就这两种API只是不同的表现形式实际上底层都是Vue选项式 API 是在组合式 API 的基础上实现的关于 Vue 的基础概念和知识在它们之间都是通用的。
选项式 API 以“组件实例”的概念为中心对于有面向对象语言背景的用户来说这通常与基于类的心智模型更为一致就是已经有类的想法了。同时它将响应性相关的细节抽象出来并强制按照选项来组织代码从而对初学者而言更为友好。
组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的它的灵活性也使得组织和重用逻辑的模式变得更加强大。
组合式的API带来了潜在收益。
在学习的过程中如果是Vue新手我们建议学习时采用易于自己理解的风格即可核心概念在两个风格之间是通用的。 在生产项目中当你不需要使用构建工具或者打算主要在低复杂度的场景中使用 Vue例如渐进增强的应用场景推荐采用选项式 API当你打算用 Vue 构建完整的单页应用推荐采用组合式 API 单文件组件。
创建一个 Vue 应用
每个 Vue 应用都是通过createApp函数创建一个新的 应用实例
import { createApp } from vueconst app createApp({/* 根组件选项 */
})
我们传入createApp的对象实际上是一个组件每个应用都需要一个“根组件”其他组件将作为其子组件。
如果你使用的是单文件组件我们可以直接从另一个文件中导入根组件。
import { createApp } from vue
// 从一个单文件组件中导入根组件
import App from ./App.vueconst app createApp(App)
虽然许多示例只需要一个组件但大多数真实的应用都是由一棵嵌套的、可重用的组件树组成的。例如一个待办事项 (Todos) 应用的组件树可能是这样的
App (root component)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter├─ TodoClearButton└─ TodoStatistics
挂载应用
应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
div idapp/div
div idapp/div
这里根应用的内容会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意不同于其他资源注册方法它的返回值是根组件实例而非应用实例。
DOM 中的根组件模板
根组件的模板通常是组件本身的一部分但也可以直接通过在挂载容器内编写模板来单独提供
div idappbutton clickcount{{ count }}/button
/div
import { createApp } from vueconst app createApp({data() {return {count: 0}}
})app.mount(#app)
当根组件没有设置template选项时Vue 将自动使用容器的innerHTML作为模板。
DOM 内模板通常用于无构建步骤的 Vue 应用程序。它们也可以与服务器端框架一起使用其中根模板可能是由服务器动态生成的。
应用配置
应用会暴露一个.confid的对象允许我们做一些应用级的选项配置如定义一个错误处理器
app.config.errorHandler (err) {/* 处理错误 */
}
还提供一些方法来注册应用范围内可用的资源如注册组件。
app.component(TodoDeleteButton, TodoDeleteButton)
多个应用实例
应用实例并不只限于一个。允许你在同一个页面中创建多个共存的 Vue 应用而且每个应用都拥有自己的用于配置和全局资源的作用域。
const app1 createApp({/* ... */
})
app1.mount(#container-1)const app2 createApp({/* ... */
})
app2.mount(#container-2)
如果你正在使用 Vue 来增强服务端渲染 HTML并且只想要 Vue 去控制一个大型页面中特殊的一小部分应避免将一个单独的 Vue 应用实例挂载到整个页面上而是应该创建多个小的应用实例将它们分别挂载到所需的元素上去。这种情况比较少大部分情况下我们是将整个挂载都放进去
模板语法
Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统当应用状态变更时Vue 能够智能地推导出需要重新渲染的组件的最少数量并应用最少的 DOM 操作。
文本插值
最基本的数据绑定形式是文本插值它使用的是“Mustache”语法 (即双大括号)
spanMessage: {{ msg }}/span
双大括号标签会被替换为相应组件实例中msg属性的值。同时每次msg属性更改时它也会同步更新。
原始 HTML
双大括号会将数据解释为纯文本而不是 HTML。若想插入 HTML你需要使用v-html指令
pUsing text interpolation: {{ rawHtml }}/p
pUsing v-html directive: span v-htmlrawHtml/span/p
下面是运行后显示的对应效果 Using text interpolation: span stylecolor: redThis should be red./span Using v-html directive: This should be red. 这里我们可以看到v-html是一个指令由v-作为前缀的特殊attribute表明了他是vue的一些特殊属性它将为渲染的DOM应用特殊的响应式行为。这里我们做的事情简单来说就是在当前组件实例上将此元素的 innerHTML 与ranHtml属性保持同步如果我们将表达式的值改变因为两者同步故影响将会响应式的作用于DOM。
div idappp v-htmlrawHtml/p
/divscriptvar vmnew Vue({el:#app,data:{rawHtml:span stylecolor:redthis is should be red/span}});
/script
运行结果This should be red.
注意网站上动态渲染任意HTML是危险的容易造成XSS漏洞请仅在内容安全可信时再使用v-html并且永远不要使用用户提供的HTML内容。
指令带有v-前缀的特殊attribute有下面几个指令
v-once变量的值只变化一次。
span v-once{{msg}}/span
!--msg的值只会在Vue对象渲染时赋值即时后面对msg的值进行改变插值处的内容也不会更新。--
v-bindAttribute 绑定
v-htmlv-htmlrawHTML(rawHTML变量中可以写html原生代码。 指令需要加到某一个标签上为这个指令赋予一个变量值的方式进行指令参数的传递。
v-on指令用于监听DOM事件可以绑定HTML元素所有的事件
a v-on:clickdoSomething.../a参数click是监听的事件名
v-if:
!DOCTYPE html
htmlheadmeta charsetutf-8title指令/title!-- 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况稍后我们再讨论)。指令的职责是当表达式的值改变时将其产生的连带影响响应式地作用于 DOM。 --script srcvue.js typetext/javascript/script/headbodydiv idapp!-- p标签是否被渲染取决于seen的值 --p v-ifseen You can see me./pa v-bind:hrefurlvue教程/a!-- click绑定一个点击事件 --div clickclick1div clickclick2click me/div/div div clickclick3!-- stop是vue.js的修饰符指当前click事件一旦执行完毕后就停止 --div click.stopclick4click me2/div/div/divspan idapp2{{meg}}/span/bodyscript typetext/javascriptvar vmnew Vue({el:#app,data:{seen:false,//设置seen值为falsep标签内的元素将不会被渲染url:https://cn.vuejs.org/guide/introduction.html,},methods:{click1:function(){console.log(click1事件);},click2:function(){console.log(click2事件);},click3:function(){console.log(click3事件);},click4:function(){console.log(click4事件);}}});var vm2new Vue({el:#app2,data:{meg:data2}})/script
/html 这里我们因为v-ifseen的seen的值为false故无法被看到后面的vue教程是使用的v-bind在下面的url被赋值为一个网址我们点击页面显示的vue教程字样会跳转进入url提供的网址下面的click me点击之后会在控制台看到click2和click1再点击click me2会在控制台显示click4如下图所示 Attribute 绑定
双大括号不能在 HTML attributes 中使用就是不能在div 这个里面使用只能在这里使用。想要响应式地绑定一个 attribute应该使用v-bind指令 语法v-bind:属性
用法v-bind:属性名值 :属性名值 :[属性名]值 a v-bind:hrefurl.../av-bind指令将该元素的href属性与表达式url的值绑定。 响应式地更新HTML属性 使用JavaScript表达式表达式会在所属vue实例的数据作用域下作为JavaScript被解析。 限制每个绑定都只能包含单个表达式流控制也不会生效。
例v-bind的使用
div idapp!-- 为v-bind绑定一个动态样式 --div v-bind:classcolorv-bind使用/div
/divscriptvar vmnew Vue({el:#app,data:{color:blue,}});
/script
v-bind指令指示 Vue 将元素的class attribute 与组件的color属性保持一致。如果绑定的值是 null 或者 undefined那么该 attribute 将会从渲染的元素上移除。
简写
因为v-bind非常常用我们提供了特定的简写语法
div :classcolor/div
开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样但它的确是合法的 attribute 名称字符并且所有支持 Vue 的浏览器都能正确解析它不会出现在最终渲染的 DOM 中。简写语法是可选的我们在实际开发中更经常使用简写的版本。
同名简写
如果 attribute 的名称与绑定的 JavaScript 值的名称相同那么可以进一步简化语法省略 attribute 值注只能在Vue3.4及以上版本使用
!-- 与 :idid 相同 --
div :id/div!-- 这也同样有效 --
div v-bind:id/div
布尔型 Attribute
布尔型attribute依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled就是最常见的例子之一。
v-bind在这种场景下的行为略有不同
button :disabledisButtonDisabledButton/button
当 isButtonDisabled 为真值或一个空字符串 (即 button disabled) 时元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象
const objectOfAttrs {id: container,class: wrapper,style: background-color:green
}
通过不带参数的v-bind你可以将它们绑定到单个元素上意思是id、class、style都会被objectOfAttrs绑定
div v-bindobjectOfAttrs/div
使用 JavaScript 表达式
我们仅在模板中绑定了一些简单的属性名 Vue 实际上在所有的数据绑定中都支持完整的JavaScript 表达式
它可以做加法、三元表达式、分割、反转、连接等都是可以的
{{ number 1 }}{{ ok ? YES : NO }}{{ message.split().reverse().join() }}div :idlist-${id}/div
!--双大括号不行这里但是${}可以我们可以取它的参数--
这些表达式都会被作为 JavaScript 以当前组件实例为作用域解析执行。
在 Vue 模板内JavaScript 表达式可以被使用在如下场景上
在文本插值中 (双大括号)在任何 Vue 指令 (以v-开头的特殊 attribute) attribute 的值中
仅支持表达式
每个绑定仅支持单一表达式也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
因此下面的例子都是无效的
!-- 这是一个语句而非表达式 --
{{ var a 1 }}!-- 仅支持三元表达式条件控制也不行 --
{{ if (ok) { return message } }}
但是如果说我们在表达式中使用另一个组件的方法
time :titletoTitleDate(date) :datetimedate{{ formatDate(date) }}
/time
比如这里的formateDate是另一个组件的方法直接调用就可以了
绑定在表达式中的方法在组件每次更新时都会被重新调用因此不应该产生任何副作用比如改变数据或触发异步操作。
受限的全局访问
模板中的表达式将被沙盒化仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象比如 Math 和 Date。
没有显式包含在列表中的全局对象是无法访问的例如自己加到window上的一些属性然而我们可以在 app.config.globalProperties 里显式的添加它们是通过在这个应用上加设置组件来绑定它的。
指令 Directives
指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令包括上面我们所介绍的v-bind和v-html。
指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外即之后要讨论到的v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例
p v-ifseenNow you see me/p
这里v-if指令会基于seen表达式的值如果是真就能够看到如果是假p元素就看不到。
参数 Arguments
某些指令会需要一个“参数”在指令名后通过一个冒号隔开做标识。例如用v-bind指令后的href我们通过这个属性来来更新、设置值从而实现响应式地更新一个 HTML attribute
a v-bind:hrefurl ... /a!-- 简写 --
a :hrefurl ... /a
这里 href 就是一个参数它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。
另一个例子是 v-on 指令它将监听 DOM 事件
a v-on:clickdoSomething ... /a!-- 简写 --
a clickdoSomething ... /a
点击、鼠标触碰、空格的点击或者某个字母的点击都是可以借助这个来实现。
简写用代替v-on:。
动态参数
在指令参数上也可以使用一个 JavaScript 表达式需要包含在一对方括号内比如说
!--
注意参数表达式有一些约束
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
--
a v-bind:[attributeName]url ... /a!-- 简写 --
a :[attributeName]url ... /a
这里的attributeName是可以换的而且在未赋值之前并不能确定。
这里的 attributeName 会作为一个 JavaScript 表达式被动态执行计算得到的值会被用作最终的参数。如果说它的值为 href那么这个绑定就等价于 v-bind:href。
还可以将一个函数绑定到动态的事件名称上
a v-on:[eventName]doSomething ... /a!-- 简写 --
a [eventName]doSomething ... /a
当 eventName 的值是 focus 时v-on:[eventName] 就等价于 v-on:focus。
动态参数值的限制
动态参数中表达式的值应当是一个字符串或者是 null。这是限制特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
动态参数语法的限制
动态参数表达式因为某些字符的缘故有一些语法限制比如空格和引号在 HTML attribute 名称中都是不合法的。例如下面的示例中括号里空格和引号是会引发编译器警告的
!-- 这会触发一个编译器警告 --
a :[foo bar]value ... /a
如果你需要传入一个复杂的动态参数我们推荐使用计算属性替换复杂的表达式也是 Vue 最基础的概念之一我们很快就会讲到。
当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时我们需要避免在名称中使用大写字母因为浏览器会强制将其转换为小写
a :[someAttr]value ... /a
上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”这段代码将不会工作。单文件组件内的模板不受此限制。
修饰符 Modifiers
修饰符是以点开头的特殊后缀表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()
form submit.preventonSubmit.../form
在这里你可以直观地看到完整的指令语法 参考内容Vue.js
