广州做网站开发,北海建设厅网站,海南住房建设厅定额网站,企业网站怎样做可以搜索到Vue3快速入门学习
初始化项目
# 创建项目
npm create vitelatest my-vue-app -- --template vue
# 安装依赖
npm i
# 运行
npm run dev
模板语法
文本插值
最基本的数据绑定形式是文本插值#xff0c;它使用的是“Mustache”语法 (即双大括号)#xff1a;
spanlatest my-vue-app -- --template vue
# 安装依赖
npm i
# 运行
npm run dev
模板语法
文本插值
最基本的数据绑定形式是文本插值它使用的是“Mustache”语法 (即双大括号)
spanMessage: {{ msg }}/span
双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
原始 HTML
双大括号会将数据解释为纯文本而不是 HTML。若想插入 HTML你需要使用 v-html 指令
template{{ num }}spanMessage: {{ msg }}/spanpUsing text interpolation: {{ html }}/ppUsing v-html directive: span v-htmlhtml/span/p
/template
script setup
let num 123
let msg (*´▽)ノノ
let html span stylecolor: redThis should be red./span
/script
Attribute 绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute应该使用 v-bind 指令 div v-bind:iddynamicId/div
input v-bind:valuedynamicId
let dynamicId1
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined那么该 attribute 将会从渲染的元素上移除。
简写
因为 v-bind 非常常用我们提供了特定的简写语法 div :iddynamicId/div
input v-bind:valuedynamicIdbrinput :valuedynamicId
开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样但它的确是合法的 attribute 名称字符并且所有支持 Vue 的浏览器都能正确解析它。此外他们不会出现在最终渲染的 DOM 中。简写语法是可选的但相信在你了解了它更多的用处后你应该会更喜欢它。 接下来的指引中我们都将在示例中使用简写语法因为这是在实际开发中更常见的用法。 布尔型 Attribute
布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。
v-bind 在这种场景下的行为略有不同 button :disabledisButtonDisabledButton/button
button :disabled!isButtonDisabledButton/button
当 isButtonDisabled 为真值或一个空字符串 (即 button disabled) 时元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象 const objectOfAttrs {id: container,class: wrapper
}
通过不带参数的 v-bind你可以将它们绑定到单个元素上div v-bindobjectOfAttrs/div
div v-bindobjectOfAttrs233/div
使用 JavaScript 表达式
至此我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式 {{ number 1 }}
{{ ok ? YES : NO }}
{{ message.split().reverse().join() }}
div :idlist-${id}/div
let number 1
let ok 1
let message 如何快速进行多任务切换多任 务切换的关键在 于能不能在一 段 时间内集 中火力 把一件事做好再去做下一件事。如果已经定下具 体的目标一切的工具都只是辅助 必要时可以全都 舍弃掉。
let id 1
这些表达式都会被作为 JavaScript 以当前组件实例为作用域解析执行。
在 Vue 模板内JavaScript 表达式可以被使用在如下场景上 在文本插值中 (双大括号) 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
仅支持表达式
每个绑定仅支持单一表达式也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
因此下面的例子都是无效的 !-- 这是一个语句而非表达式 --
{{ var a 1 }}
!-- 条件控制也不支持请使用三元表达式 --
{{ if (ok) { return message } }}
调用函数
可以在绑定的表达式中使用一个组件暴露的方法 time :titletoTitleDate(date) :datetimedate{{ formatDate(date) }}
/time
TIP
绑定在表达式中的方法在组件每次更新时都会被重新调用因此不应该产生任何副作用比如改变数据或触发异步操作。
受限的全局访问
模板中的表达式将被沙盒化仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象比如 Math 和 Date。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问例如用户附加在 window 上的属性。然而你也可以自行在 app.config.globalProperties 上显式地添加它们供所有的 Vue 表达式使用。
指令 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 指令来响应式地更新一个 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 这里的参数是要监听的事件名称click。v-on 有一个相应的缩写即 字符。我们之后也会讨论关于事件处理的更多细节。
动态参数
同样在指令参数上也可以使用一个 JavaScript 表达式需要包含在一对方括号内 !--
注意参数表达式有一些约束
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
--
a v-bind:[attributeName]url ... /a
!-- 简写 --
a :[attributeName]url ... /a
这里的 attributeName 会作为一个 JavaScript 表达式被动态执行计算得到的值会被用作最终的参数。举例来说如果你的组件实例有一个数据属性 attributeName其值为 href那么这个绑定就等价于 v-bind:href。
相似地你还可以将一个函数绑定到动态的事件名称上 a v-on:[eventName]doSomething ... /a
!-- 简写 --
a [eventName]doSomething
在此示例中当 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
之后在讲到 v-on 和 v-model 的功能时你将会看到其他修饰符的例子。
最后在这里你可以直观地看到完整的指令语法 总结
templateh3{{ text }}/h3h3{{ user }}/h3!--指令 v-v-model 数据双向绑定v-if 判断表达式的值,true则显示,false则隐藏 -- 控制dom元素的创建和销毁应避免频繁切换状态v-show 和v-if区别 -- 始终会被渲染并保留在dom中只是css被隐藏了 display: none; 一次性的v-for 循环v-bind 绑定属性或对象v-on 注册事件--input v-modeluser.age /span v-ifuser.age 18成年人{{ user.age }}/spanspan v-else-ifuser.age 18未成年/spanspan v-else长大了.../spanspan v-showuser.age 18和v-if区别始终会被渲染并保留在dom中只是css被隐藏了 display: none;/span!-- button v-bind:disabledtruev-bind/button --button :disabledtruev-bind/buttonh6v-for(friends,index) in user.friends:keyindexstylecolor: rgb(70, 238, 146){{ friends.name }} - {{ friends.age }} - {{ index }}/h6!-- button v-on:clickaddFriend添加好友/button --button clickaddFriend添加好友/buttonnbsp;nbsp;nbsp;button clickdeleteFriend删除/buttonp :class{ active: isActive }Class 与 Style 绑定/pdiv v-fori in 5{{i}}/div
/templatescript setup
import { ref, reactive } from vue;const text ref(HelloWorld);
const isActive ref(true);const user reactive({name: 小郑,age: 18,friends: [{name: 小张,age: 18,},{name: 小李,age: 20,},{name: 张三,age: 201,},],
});function addFriend() {user.friends.push({name: 哈基米,age: 18,});
}function deleteFriend() {user.friends.pop()
}
/scriptstyle scoped
.active {color: rgb(134, 17, 250);
}
/styleref 和 reactive 是 Vue 3 中用于管理数据的两个方法。
ref 用于创建一个可响应的指针。指针可以指向任何值包括原始值、对象或数组。当指针指向的值发生变化时Vue 会自动更新指针的值。
reactive 用于创建一个响应式的对象。对象的所有属性都将成为响应式变量。当对象的属性发生变化时Vue 会自动更新该属性的值。
text 是一个 ref 对象指向字 符串 HelloWorld。当字符串发生变化时text 的值也会发生变化。isActive 也是一个 ref 对象指向布尔值 true。当布尔值发生变化时isActive 的值也会发生变化。user 是一个 reactive 对象包含三个属性name、age 和 friends。当这些属性发生变化时user 对象的值也会发生变化。
使用场景
ref 通常用于以下场景
需要在组件中使用原始值、对象或数组时。需要监听值的变化时。
reactive 通常用于以下场景
需要在组件中使用对象时。需要监听对象属性的变化时。
导入其他vue组件
templateHelloWorld /
/template
script setupimport HelloWorld from ./components/HelloWorld.vue;
/script vue-element-admin介绍 vue-element-admin是一个后台前端解决方案它基于vue和element-ui实现。它使用了最新的前端技术栈内置了 i18 国际化解决方案动态路由权限验证提炼了典型的业务模型提供了丰富的功能组件它可以帮助你快速搭建企业级中后台产品原型。
目录结构 一上来就看到那么多文件夹确实头疼咱先不管别的主要先了解标注部分文件
├── build # 构建相关
├── config # 配置相关
├── mock # 项目mock 模拟数据
├── plop-templates
├── public # 静态资源
│ ├── favicon.ico
│ └── index.html
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 布局相关
│ ├── mock # 项目mock 模拟数据
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # view
│ ├── App.vue # 入口页面
│ ├── main.js # 入口 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests
├── static # 第三方不打包资源
│ └── Tinymce # 富文本
├── .babelrc # babel-loader 配置
├── eslintrc.js # eslint 配置项
├── .gitignore # git 忽略项
├── favicon.ico # favicon图标
├── index.html # html模板
├── .env.xxx
├── .eslintrc.js
├── .travis.yml
├── vue.config.js # vue-cli 配置
└── package.json安装
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git# 进入项目目录
cd vue-element-admin# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registryhttps://registry.npm.taobao.org# 安装依赖
npm install# 本地开发 启动项目
npm run dev 参考资料手摸手带你用vue撸后台 系列一基础篇 - 掘金
快速上手 | Vue.js
