西安有哪些家做网站的公司,免费有效的推广网站,企飞互联网站建设网络公司,网站开发项目可行性分析vue
一.vue3介绍
1.为什么data是函数而不是对象?
因为vue是组件开发,组件会多次复用,data如果是对象,多次复用是共享,必须函数返回一个新的对象
1. 官网初识 Vue (发音为 /vjuː/#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS …vue
一.vue3介绍
1.为什么data是函数而不是对象?
因为vue是组件开发,组件会多次复用,data如果是对象,多次复用是共享,必须函数返回一个新的对象
1. 官网初识 Vue (发音为 /vjuː/类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。无论是简单还是复杂的界面Vue 都可以胜任。 https://cn.vuejs.org/ 2.环境搭建
2.1线上尝试 2.2CDN使用
script srchttps://unpkg.com/vue3/dist/vue.global.js/script通过 CDN 使用 Vue 时不涉及“构建步骤”。这使得设置更加简单并且可以用于增强静态的 HTML 或与后端框架集成。但是你将无法使用单文件组件 (SFC) 语法。
2.3 Vue CLI(不太使用)
Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链它现在处于维护模式。我们建议使用 Vite 开始新的项目除非你依赖特定的 Webpack 的特性。在大多数情况下Vite 将提供更优秀的开发体验。
2.4 Vite
Vite 是一个轻量级的、速度极快的构建工具对 Vue SFC 提供第一优先级支持。作者是尤雨溪同时也是 Vue 的作者
要使用 Vite 来创建一个 Vue 项目非常简单
$ npm init vuelatest这个命令会安装和执行 create-vue它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。
二.vue3基础
1.模版语法
1-1我的第一个应用
div idbox{{1020}}//30{{myName}}//yiling
/div
scriptvar obj{data(){return{myName:yiling}}}var appVue.createApp(obj).mount(#box)
/script推荐使用的 IDE 是 VSCode配合 Vue 语言特性 (Volar) 插件。该插件提供了语法高亮、TypeScript 支持以及模板内表达式与组件 props 的智能提示。Volar 取代了我们之前为 Vue 2 提供的官方 VSCode 扩展 Vetur。如果你之前已经安装了 Vetur请确保在 Vue 3 的项目中禁用它。
1-2应用背后的真相 object.defineProperty 缺陷:无法监听数组的变化,无法监听class的改变,无法监听Map Set结构 div idbox/div
scriptvar obj{}var oBoxdocument.getElementById(box)Object.defineProperty(obj,myname,{get(){console.log(get);},set(value){console.log(set,value);// 操作domoBox.innerHTMLvalue}})
/scriptproxy var obj {}
var obox document.getElementById(box)var vm new Proxy(obj, {get(target, key) {console.log(get)return target[key]},set(target, key, value) {console.log(set)target[key] valueobox.innerHTML value}
})/*vue3 基于Proxy ,ES6 Proxy ,if(支持proxy){// proxy进行拦截处理 实现功能}else{// object.defineProtery}*/1-3模版语法 最基本的数据绑定形式是文本插值,它使用的是Mustache语法(即双大括号) {{myName}}双大括号会被替换为相应组件实例中myName属性的值,同时每次myName属性更新时他也会同步更新 双大括号不能在 HTML attributes (属性)中使用。想要响应式地绑定一个 attribute(属性)应该使用 v-bind 指令 div v-bind:iddynamicId/divv-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined那么该 attribute 将会从渲染的元素上移除。 表达式的支持 {{ number 1 }}{{ ok ? YES : NO }}{{ message.split().reverse().join() }}div :idlist-${id}/div指令 a v-on:clickdoSomething ... /a!-- 简写 --
a clickdoSomething ... /a1-4Todolist案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script
/head
bodydiv idboxinput typetext v-modelvalbutton clickadd()添加 /buttonulli v-foritem,index in todos{{item}}button clickdel(index)删除/button/li/uldiv v-showtodos.length0暂时没有待办事项/div/divscriptvar obj{data() {return {val:,todos:[]}},methods:{add(){if(this.val.trim()!){this.todos.push(this.val.trim())this.val}},del(index){this.todos.splice(index,1)}}}var appVue.createApp(obj).mount(#box)/script
/body
/html1-5点击变亮案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/scriptstyle.active{color: red;}/style
/head
bodydiv idboxulli v-foritem,index in list :classcurrentindex?active: clickadd(index){{item}}/li/ul/divscriptvar obj{data() {return {current:0,list:[电影,影院,我的]}},methods: {add(index){this.currentindex}},}var appVue.createApp(obj).mount(#box)/script
/body
/html1-6 v-html模版陷阱
双大括号会将数据解释为纯文本而不是 HTML。若想插入 HTML你需要使用 v-html 指令
pUsing text interpolation: {{ rawHtml }}/p
pUsing v-html directive: span v-htmlrawHtml/span/p2.class与style
class对象与数组写法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./vue.js/script
/head
bodydiv idboxdiv :classobjClass动态切换class--对象/divdiv :classarrClass动态切换class--数组/div/divscriptvar obj{data() {return {// vue2不支持,后来添加新属性// vue3支持objClass:{aaa:true,bbb:false,ccc:true},arrClass:[aaa,bbb,ccc]}},}var appVue.createApp(obj).mount(#box)/script
/body
/htmlstyle对象与数组写法,同上
把class改成style
3.条件渲染
3-1 条件渲染-生或死的选择
v-if 是“真实的”按条件渲染因为它确保了在切换时条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的如果在初次渲染时条件值为 false则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下v-show 简单许多元素无论初始条件如何始终会被渲染只有 CSS display 属性会被切换。
总的来说v-if 有更高的切换开销而 v-show 有更高的初始渲染开销。因此如果需要频繁切换则使用 v-show 较好如果在运行时绑定条件很少改变则 v-if 会更合适。 ul li v-foritem,index in datalist{{item.title}}div v-ifitem.state0未付款/divdiv v-else-ifitem.state1未发货/divdiv v-else-ifitem.state2已发货/divdiv v-else已完成/div/li
/uldatalist:[{state:0,title:111},{state:1,title:222},{state:2,title:333}
]4.列表渲染
4-1 v-for列表渲染 - 影分身术
v-for与对象
data() {return {myObject: {title: How to do lists in Vue,author: Jane Doe,publishedAt: 2016-04-10}}
}ulli v-forvalue in myObject{{ value }}/li
/ulul template v-for{title,state},index in datalist li v-ifstate1{{title}}/li /template
/ul
