昆山规划与建设局网站,国企建筑公司有哪些,药品网站建设存在的问题,5元域名免备案Vue3 基础
概述
Vue (发音为 /vjuː/#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建#xff0c;并提供了一套声明式的、组件化的编程模型#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。无论是简单还是复杂的界面Vue 都可以胜任。
Vue 的两个核心功能
声明式渲染Vue 基于标准 HTML 拓展了一套模板语法使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。响应性Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
Vue3官方文档
Vite官方文档
安装Vue
一、使用CDN
script srchttps://unpkg.com/vue3/dist/vue.global.js/script二、npm安装
npm init vuelatest三、下载JavaScript文件自行托管
使用JS的方式引入Vue
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue3简单使用/titlescript src./vue3.js/script
/headbodydiv idcounterp{{uname}}/pp{{age}}/p/divscript// 配置对象const counter {data: function () {return {uname: 小明,age: 0}}};// 使用createApp函数创建一个应用实例// 传入配置对象let app Vue.createApp(counter)// 应用实例必须调用mount函数挂载后才会渲染出来.mount(#counter);//数据双向绑定app.age 18;/script
/body/html使用vite
简介
Vite是要给web开发构建工具由于其原生ES模块导入方式可以实现闪电般的冷服务器启动。
使用vite搭建项目
npm create vitelatest或者
npm create vitelatest my-vue-app -- --template vue接着依次执行命令启动vue项目
cd my-vue-app
npm install
npm run dev模板语法
Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统当应用状态变更时Vue 能够智能地推导出需要重新渲染的组件的最少数量并应用最少的 DOM 操作。
基本使用
v-bind:可以简写为:v-on:可以简写问
script
export default {data() {return {name: 小明123,age: 18,num: 0,rawHtml: h2 stylecolor:red;hello msg/h2,myid: id01,isBtnDisabled: true,objAttrs: {id: id01,class: box},imgUrl: https://cn.vitejs.dev/logo-with-shadow.png,attributeName: id,mouseEvent: click,}},methods: {changeNum() {this.num;},changeColor() {this.id id01;},alertMsg() {alert(hello world);}}
}
/scripttemplate!-- 文本插值 --p姓名{{ name }}/pp年龄{{ age }}/pp数量{{ num }}/p!-- 仅修改一次 --p v-once数量{{ num }}/pbutton clickchangeNum修改num/button!-- 使用html --p v-htmlrawHtml/p!-- 属性绑定 --p v-bind:idmyidv-bind/p!-- v-bind简写 --p :idmyidv-bind2/p!-- 布尔类型 --button :disabledisBtnDisabledv-bind2/buttonbr!-- 绑定多个属性 --p v-bindobjAttrshello world/p!-- 动态参数 --p v-bind:[attributeName]myid动态属性1/pimg v-bind:srcimgUrl stylewidth: 50px;!-- 简写 --p :[attributeName]myid动态属性2/pbutton [mouseEvent]attributeName class动态事件/buttonbutton clickmouseEvent mouseover改变事件/buttonbr!-- 点击事件 --button v-on:clickchangeColor修改颜色/button!-- 简写 --button clickchangeColor修改颜色/buttonbr!-- 使用JavaScript表达式 --p{{ num 1 }}/pp{{ name.split().reverse().join() }}/p
/templatestyle
#id01 {color: red;
}#id02 {color: blue;
}.id01 {color: green;
}.id02 {color: yellowgreen;
}.active {color: red;
}.box {border: 1px dashed red;
}
/style条件渲染
scriptexport default {data() {return {age: 68,isShow: true}}}
/scripttemplate
!-- v-if条件渲染 --
p v-ifage 18未成年人/p
p v-ifage 18 age 60年轻人/p
p v-else老人/p!-- v-show本质是display:none; --
p v-showisShowhello template/p
/templatev-if会根据条件进行渲染切换时元素会被销毁或重建因此切换开销大。v-for本质是通过display进行显示和隐藏。
列表渲染
scriptexport default {data() {return {userList: [{ name: 张三, age: 19, address: 北京 },{ name: 李四, age: 29, address: 上海 },{ name: 王五, age: 39, address: 广州 }],userInfo: {name: 小白,title: 顶级作者,bookName: 西游记}}}}
/scripttemplate !-- v-for遍历数组 --ulli v-for(item, index) in userList编号{{ index }} 姓名{{ item.name }} 年龄{{ item.age }} 地址{{ item.address }}/li/ululli v-for({ name, age, address }, index) in userList编号{{ index }} 姓名{{ name }} 年龄{{ age }} 地址{{ address }}/li/ul!-- v-for遍历对象 --ulli v-for(value, key) in userInfo{{ key }} : {{ value }}/li/ul
/template通过key管理状态
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时Vue 不会随之移动 DOM 元素的顺序而是就地更新每个元素确保它们在原本指定的索引位置上渲染。
默认模式是高效的但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。 为了给 Vue 一个提示以便它可以跟踪每个节点的标识从而重用和重新排序现有的元素你需要为每个元素对应的块提供一个唯一的 key attribute
scriptexport default {data() {return {userList: [{ name: 张三, age: 19, address: 北京 },{ name: 李四, age: 29, address: 上海 },{ name: 王五, age: 39, address: 广州 }]}},methods: {addUser() {this.userList.unshift({ name: 小白, age: 8, address: 成都 })}}}
/scripttemplate!-- :key的使用 --ulli v-foritem in userList :keyiteminput typecheckbox{{ item.name }}/li/ulbutton clickaddUser添加user/button
/template数组变化侦测
Vue 能够侦听响应式数组的变更方法并在它们被调用时触发相关的更新。这些变更方法包括
push()pop()shift()unshift()splice()sort()reverse()
计算属性
计算属性只会在依赖值发生变化时才会重新计算。
script
export default {data() {return {message: hello world,firstMsg: abc,lastMsg: efg}},//方法methods: {reverseMsg2() {console.log(reverseMsg2);return this.message.split().reverse().join();}},//计算属性computed: {reverseMsg() {console.log(reverseMsg);return this.message.split().reverse().join();},// 可写计算属性fullName: {// getterget() {return this.firstMsg - this.lastMsg;},// setterset(newValue) {[this.firstMsg, this.lastMsg] newValue.split( );}}}
}
/scripttemplatep{{ message }}/pp{{ reverseMsg2() }}/pp{{ reverseMsg2() }}/pp{{ reverseMsg }}/pp{{ reverseMsg }}/pbutton clickmessage 你好修改message/buttonp{{ fullName }}/pp{{ fullNameABC EFG }}/p
/template说明
打印了2次“reverseMsg2”说明每次调用方法都会执行一次打印了1次“reverseMsg”说明计算属性会缓存。
点击按钮修改了message属性会重复上面操作说明计算属性只有依赖值发生变化时才会重新计算。
侦听器
监听状态变化。
script
export default {data() {return {message: hello world,isHidden: true,user: {name: 小明,age: 18,sex: true}}},// 侦听器watch: {// 侦听器方式一message发生变化时调用// message(newValue, oldValue) {// console.log(新值 newValue, 旧值 oldValue);// if (newValue.length 5 || newValue.length 10) {// this.isHidden false;// } else {// this.isHidden true;// }// }// 侦听器方式二初始化时触发message: {immediate: true, // 是否初始化时调用handler(newValue, oldValue) {if (newValue.length 5 || newValue.length 10) {this.isHidden false;} else {this.isHidden true;}}},// 深度监听方式一监听对象的每个属性// user: {// handler(newValue) {// console.log(newValue);// console.log(newValue.name);// },// deep: true // 是否深度监听给对象的每个属性都加上侦听器// },// 深度监听方式二监听对象的单个属性user.name: {handler(newValue) {console.log(newValue);},deep: true // 是否深度监听}}
}
/scripttemplatep{{ message }}/pbutton clickmessage 你好修改message/buttonbrinput typetext v-modelmessagebrp :hiddenisHidden输入框中的内容不能小于5或大于10/pbutton clickuser.name 小白修改user.name/button
/template类和样式绑定
script
export default {data() {return {message: hello wold,//classisActive: true,isBgColor: true,classObj: {active: true,bgColor: true},error: null,activeClass: active,bgColorClass: bgColor,//styleactiveColor: red,bgColor: grey,fontSize: 30px,styleObj: {color: red,background-color: grey,fontSize: 30px}}},// 计算属性computed: {classObject() {return {active: this.isActive !this.error,bgColor: this.isBgColor !this.error}}}
}
/scripttemplate!-- 使用class --p classactivehello world1/p!-- 绑定对象 --p :class{ active: isActive }hello world2/pp :class{ active: isActive, bgColor: isBgColor }hello world3/p!-- 绑定对象简写 --p :classclassObjhello world4/p!-- 计算属性 --p :classclassObjecthello world5/p!-- 绑定数组 --p :class[activeClass, bgColorClass]hello world6/pbutton clickisActive !isActive修改active/buttonbutton clickisBgColor !isBgColor修改bgColor/button!-- 使用内联样式 --p stylecolor:red;hello1/p!-- 绑定对象 --p :style{ color: activeColor, background-color: bgColor, fontSize: fontSize }hello2/p!-- 绑定对象 --p :stylestyleObjhello3/p!-- 绑定数组 --p :style[styleObj]hello4/p
/templatestyle
.active {color: red;
}.bgColor {background-color: grey;
}
/style
