wordpress 子站,广州番禺钟村,网站空间1g多少钱,找人做网站需求怎么写Vue是什么 构用户界面的js的渐进式框架#xff0c;基于htlm、css、js#xff0c;并提供声明式组件化的编程模型#xff0c;帮你高效开发用户界面。无论简单或复杂的界面Vue都可以胜任。 vue是一个框架#xff0c;同时也是一个生态。因为有很多程序员支持vue#xff0c;开…Vue是什么 构用户界面的js的渐进式框架基于htlm、css、js并提供声明式组件化的编程模型帮你高效开发用户界面。无论简单或复杂的界面Vue都可以胜任。 vue是一个框架同时也是一个生态。因为有很多程序员支持vue开发了很多如轮播图的东西就形成了一个生态。考虑到web世界的多样性vue注重灵活性和可被逐步继承。可在一个完整项目中使用vue或某一个功能上使用vue或某一个html中使用vue的某个功能。 后期主要是一个完整的项目中使用Vue。 vue分为vue2和vue3。vue3涵盖了vue2vue3增加了很多新的特性。 官网cn.vuejs.org v2.cn.vuejs.org Vue API风格 vue2和vue3新老版本的问题代码书写风格不一样选项式APIvue2、组合式APIvue3。 使用选项式API我们可以用包含多个选项的对象来描述组件的逻辑例如data 、methods 和(mounted。选项所定义的属性都会暴露在函数内部的this 上它会指向当前的组件实例. 具体参见Vue2如Vue2基础入门_阳光明媚UPUP的博客-CSDN博客 通过组合式API我们可以使用导入的API函数来描述组件逻辑。 组合式api如 这两种风格的api虽然写法完全不同但是效果确实完全相同的。 当你不需要使用构建工具或者打算主要在低复杂度的场景中使用Vue例如渐进增强的应用场景推荐采用选项式API 当你打算用Vue构建完整的单页应用推荐采用组合式API单文件组件 学习Vue前的准备 熟悉命令行 要求安装15.0或更高版本的nodejs cmd下node -v检测 nodejs简单了解 node.js是一个开源的跨平台的javaScript运行环境简单来说它是一款应用程序是一款软件可运行javaScript。 nodejs可开发服务器端应用nodejs就可在服务器中进行处理将视频发给用户端。将资源返回给浏览器解析。nodejs就运行在服务器端将用户的请求做处理并把资源返回给浏览器。 nodejs可开发工具类应用如webpack、vite、babel这三个工具可提高前端开发的效率和质量都是借助于是借助于nodejs。 nodejs可以开发桌面端应用vscoder、figma、postman这三都借助于electron框架electron又是借助于nodejs开发出来的。 nodejs下载安装 Node.js 选中LTS长期支持版下载 旧版本可在中文网站中全部按转包中CNPM Binaries Mirror 下载 | Node.js 中文网 下载.mis直接安装途中不用勾选那个自动install的选框。 下载zip参考【转载】windows下Nodejs zip版下载安装及环境变量配置_nodezip版如何配置_AllTimeLow丶的博客-CSDN博客 创建Vue项目
进入空文件夹上方cmd敲会进入到该目录然后 npm init vuelatest D:\VueProjectnpm init vuelatest Vue.js - The Progressive JavaScript Framework √ Project name: ... vue-base 起个项目名不要有大写字母 √ Add TypeScript? ... No / Yes //添加TS默认NO直接回车即可 √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes 添加路由先no √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add an End-to-End Testing Solution? » No √ Add ESLint for code quality? ... No / Yes Scaffolding project in D:\VueProject\vue-base... //全部no默认然后回车即可。 Done. Now run: cd vue-base npm install npm run dev D:\VueProject 然后执行它的提示代码即可 先cd vue-base 然后执行cnpm install 也可安装cnpm后执行cnpm install 安装cnpm命令为npm install -g cnpm --registryhttps://registry.npm.taobao.org 然后使用cnpm install 然后npm run dev运行项目 运行成功后复制地址到浏览器url输入访问即可。 也可使用vscoder打开一个空文件夹然后ctrl在终端里敲上面的初始化代码等。 开发环境 vscodervolar扩展 vscoder打开vue项目根目录 由于App.vue是字体为灰色我们在vsccoder左侧扩展里加上一个vue language feature volar 这时App.vue就有颜色了 Vue项目目录结构 .vscode --- vscode工具的配置文件 node_modules --- Vue项目的运行依赖文件夹 执行npm install安装的就是它 public --- 资源文件夹浏览器图标) src --- 源码文件夹 进行编码的文件夹 写代码的文件夹 .gitignore --- git忽略文件 index.html --- 入口的HTML文件 package.json --- 信息描述文件 依赖vue3开发环境dev详细依赖vite脚手架类似webpack README. md --- 注释文件 vite.config.js --- vue配置文件 做配置如跨域、打包 模板语法 基于html的模板语法是我们能够声明式的将其组件实例的数据绑定到呈现的dom上所有的vue模板都是语法层面合法的html可被符合规范的浏览器和html解析器解析。 1.文本插值 最基本的数据绑定形式采用双大括号mustache语法 我们可先删除vue项目src下的components目录下所有的东西然后App.vue中只保留 script /script template /template template和script上下顺序可颠倒template建议放在script上面。 我们在App.vue中写入 templateh3模板语法/h3p{{msg}}/p/templatescriptexport default{data(){return{msg:神奇的语法}}} /script 重新运行终端npn run dev访问即可后期保存自动更新页面。发现还有样式剧中样式在main.js中引入了资源文件夹assets文件夹下的main.css删除import语句即可。 assets为资源文件夹日后公共css及实现都可放在这里目前assets中资源直接删除掉即可。 2、使用js表达式 仅支持单一表达即一个有结果的js表达式可放在return语句中的。 不支持var不支持for这种换行的表达式可三元表达式。 templateh3模板语法/h3p{{msg.split().reverse().join()}}/pp{{number1}}/pp{{ok?yes:no}}/p/templatescriptexport default{data(){return{msg:神奇的语法,number:10,ok:true}}} /script 3、原始html 双大括号将会将数据插值为纯文本而不是HTML。若想插入HTML你需要使用vhtml指令 templateh3模板语法/h3p{{url}}/pp v-htmlurl/p/templatescriptexport default{data(){return{url:a hrefhttp://www.baidu.com百度/a}}} /script
属性绑定 双大括号不能在HTML attributes 中使用。想要响应式地绑定一个attribute应该使用v-bind指令。 App.vue中改成引入组件文件夹中的HelloWorld.vue
script setup
import HelloWorld from ./components/HelloWorld.vue
/script
templateHelloWorld/
/template
src下components下的HelloWorld.vue
template!-- v-bin:也可简写为:一个冒号 --div v-bind:iddynamicId :classmsg 测试/divbutton :disabledisButtonDisabledbutton按钮/buttondiv v-bindobjectOfAttrs一次性绑定多个属性/div
/template
script
export default{data(){return{msg:active,//active为选中的意思dynamicId:appId,dynamicTitle:null,//如果为null或undefined那么该attribute将会从渲染的元素上移isButtonDisabled:false,//也可一次性绑定多个值objectOfAttrs:{id:appId,class:allClass}}}
}
/script
刷新网页即可。所有的标签的属性都可通过这个v-bind为其绑定vue的data值
条件渲染 在vue中提供了条件渲染这类似于JavaScript中的条件语句 v-if、v-else、v-else-if、v-show 先src的components文件夹下创建ifDemo.vue
templateh3条件渲染/h3div v-ifflag你能看见我吗/div!-- v-if为假的时候显示 --div v-else那你还是看看我吧/divdiv v-iftype AA/divdiv v-else-iftypeBB/divdiv v-else-iftypeCC/divdiv v-elseNot A/B/C/divdiv v-showflag你能看见我吗/div
/template
script
export default{data(){return{flag : true,type : B}}
}
/script
在App.vue中引入
script setup
import HelloWorld from ./components/HelloWorld.vue
import IfDemo from ./components/ifDemo.vue
/script
templateHelloWorld /IfDemo /
/template v-if是基于对标签的渲染与否v-show是基于display属性设置为true或false。 总的来说ve-if有更高的切换开销而v-show有更高的初始渲染开销。因此如果需要频繁切换则使用v-show较好;如果在运行时绑定条件很少改变则v-if会更合适。 v.if 也是惰性的:如果在初次渲染时条件值为false则不会做任何事。条件区块只有当条件首次变为true时才被渲染。 列表渲染 我们可以使用v-for指令基于一个数组来渲染一个列表。v-or指令的值需要使用item in items 形式的特殊语法其中items是源数据的数组而item是迭代项的别名 src下的components中创建ListDemo.vue
templateh3列表渲染/h3p v-foritem in names{{item}}/pp v-for(item,index) in names{{item}}--{{ index }}/p!-- 使用in和使用of都一样 --p v-foritem of names{{item}}/pp v-for(item,index) of names{{item}}--{{ index }}/phr/!-- 对于复杂的json --div v-foritem of resultsp{{item.id}}/pp{{item.title}}/pa :hrefitem.url链接/a/div!-- 对于一个对象也可遍历 --divp v-foritem in userInfo{{ item }}/pp v-for(value,key,index) in userInfo{{ value }}-{{ key }}--{{index}}/p/div
/template
scriptexport default{data(){return{names:[张三,李四,王二麻子],//对于复杂的json数据results:[{id:1,title:111hello你好,url:http://www.baidu.com},{id:2,title:222hello你好,url:http://www.baidu.com},{id:3,title:333hello你好,url:http://www.baidu.com}],//对于一个对象也可以遍历userInfo:{name:张三,age:22,sex:男}}}}
/script
App.vue中引入
script setup
import HelloWorld from ./components/HelloWorld.vue
import IfDemo from ./components/ifDemo.vue
import ListDemo from ./components/ListDemo.vue
/script
templateHelloWorld /IfDemo /ListDemo /
/template
通过key管理状态 Vue默认按照就地更新的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时Vue 不会随之移动DOM元素的顺序而是就地更新每个元素确保它们在原本指定的索引位置上渲染 为了给Vue一个提示以便它可以跟踪每个节点的标识从而重用和重新排序现有的元素你需要为每个元素对应的块提供一个唯一的key attribute: 使用key可用节省开销。 src的component中创建KeyDemo.vue
template
h3key属性添加到v-for循环中/h3
p v-for(item ,index) in names :keyindex{{item}}/p
!-- 一般不推荐使用index作为key一般使用result服务器返回的结果集中的id --
div v-foritem of result :keyitem.id
p{{ item.name }}/p
a :hrefurl链接/a
/div
/template
script
export default{data(){return{names:[aaa,sss,ddd],result:[{id:1,name:aaa,url:http://www.baidu.com},{id:2,name:bbb,url:http://www.baidu.com},{id:3,name:ccc,url:http://www.baidu.com}]}}
}
/script
App.vue中引入
script setup
import HelloWorld from ./components/HelloWorld.vue
import IfDemo from ./components/ifDemo.vue
import ListDemo from ./components/ListDemo.vue
import keyDemo from ./components/KeyDemo.vue
/script
templateHelloWorld /IfDemo /ListDemo /keyDemo /
/template
事件处理 我们可以使用von指令(简写为 )来监听DOM事件并在事件触发时执行对应的JavaScript。用法:on:clickmethodName”或clickhandler 事件处理器的值可以是 内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似) 方法事件处理器:一个指向组件上定义的方法的属性名或是路径 事件参数 事件参数可以获取event对象和通过事件传递数据 事件修饰符 在处理事件时调用event.preventDefault(或event stopPropagation()是很常见的。尽管我们可以直接在方法内调用但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好 为解决这一问题Vue为v-on提供了事件修饰符常用有以下几个: .stop 阻止事件冒泡 .prevent 阻止默认事件 .once4 事件只会被触发一次 .enter 回车按键触发的 具体参考 地址:https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers demo如下
src下的component创建EventDemo.vue
template
h3事件处理/h3
!-- 内联事件处理器 --
button v-on:clickcount内联处理器)Add/button
p{{ count }}/p
!-- 方法事件处理器 --
button clickaddNumaddNum/button
button dblclickaddNumaddNum/button
p{{ number }}/p
!-- 事件参数传递event对象 --
button clickaddNum2addNum222/button
p{{ number }}/p
!-- 事件参数传递事件参数 --
button clickaddNum3(hello) Add333/button
p{{ number }}/p
p clickgetNamesHandler(item) v-for(item,index) of names :keyindex{{ item }}/p
p clickgetNamesHandler2(item,$event) v-for(item,index) of names :keyindex{{ item }}/p
!-- 阻止默认事件1在click的方法中调用e.preventDefault(); --
a clickclickHandle hrefhttp://www.baidu.com百度链接/abr/
!-- 阻止默认事件2直接写--
a click.preventclickHandle2 hrefhttp://www.baidu.com百度链接/a
!-- 阻止事件冒泡事件冒泡就是如下 --
div clickclickDiv
p clickclickP测试事件冒泡/p
!-- 还可通过.stop进阻止事件冒泡 --
p click.stopclickP测试事件冒泡/p
/div
/template
script
export default{data(){return{ count:0,number:0,names:[aaa,bbb,ccc]}},methods:{addNum(){this.number;},addNum2(e){console.log(e),e.target.innerHTML Add222this.numberthis.number;},addNum3(msg){console.log(msg),this.number;},getNamesHandler(item){console.log(item)},getNamesHandler2(item,e){console.log(e)console.log(item)},clickHandle(e){e.preventDefault();//这点击该a超链接标签后就不会默认的跳转url事件了。console.log(点击了)},clickHandle2(){console.log(点击了)},clickDiv(){console.log(DIV);},clickP(e){//e.stopPropagation();//如果不加这个就会出现事件冒泡点击p中的测试事件冒泡clickP会将div父标签的clickDiv也会执行。console.log(P);}}
}
/script
App.vue中加上
script setup
import HelloWorld from ./components/HelloWorld.vue
import IfDemo from ./components/ifDemo.vue
import ListDemo from ./components/ListDemo.vue
import keyDemo from ./components/KeyDemo.vue
import EventDemo from ./components/EventDemo.vue
/script
templateHelloWorld /IfDemo /ListDemo /keyDemo /EventDemo /
/template
数组变化的侦测 1变更方法Vue能够侦听响应式数组的变更方法并在它们被调用时触发相关的更新。这些变更方法包括:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2、替换一个数组 变更方法顾名思义就是会对调用它们的原数组进行变更。相对地也有一些不可变 (immutable)方法例如fiter)concat)和islice()这些都不会更改原数组而总是返回一个新数组。当遇到的是非变更方法时我们需要将旧的数组替换为新的数组。 src下的components中创建ArraysDemo.vue
template
h3数组变化侦听/h3
button clickaddListHandle添加数组/button
ulli v-for(item,index) of names :keyindex{{ item }}/li
/ul
button clickconcatHandle合并数组/button
h3数组1/h3
p v-for(item ,index) of nums1 :keyindex{{ item }}/p
h3数组2/h3
p v-for(item ,index) of nums2 :keyindex{{ item }}/p
/template
script
export default{data(){return{names:[aaa,bbb,ccc],nums1:[1,2,3,4,5],nums2:[6,7,8,9,10]}},methods:{addListHandle(){//引起ui自动更新//this.names.push(ddd)//不会引起ui自动更新this.names this.names.concat([ddd])},concatHandle(){this.nums1 this.nums1.concat(this.nums2)}}
}
/script
App.vue中引入
script setup
import HelloWorld from ./components/HelloWorld.vue
import IfDemo from ./components/ifDemo.vue
import ListDemo from ./components/ListDemo.vue
import keyDemo from ./components/KeyDemo.vue
import EventDemo from ./components/EventDemo.vue
import ArrayDemo from ./components/ArrayDemo.vue
/script
templateHelloWorld /IfDemo /ListDemo /keyDemo /EventDemo /ArrayDemo /
/template计算属性 模板中的表达式虽然方便但也只能用来做简单的操作。如果在模板中写太多逻辑会让模板变得臃肿难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。 src下的components中新建ComputedDemo.vue文件
template
h3{{ user.name}}/h3
p{{ user.hobbies.length0? yes:no }}/p
!-- 双花括号直接引用计算属性不用加括号 --
p{{ userContent }}/p
!-- 会使用传统的双花括号引一个函数要加括号 --
p{{ userContents() }}/p
p/p
/template
script
export default{data(){return{user:{name:aaa,hobbies:[h111,h222,h333]}}},computed:{//计算属性用的时候直接写名不用加括号userContent(){return this.user.hobbies.length 0 ? Yes:No}},methods:{userContents(){//函数用加括号return this.user.hobbies.length 0 ? Yes:No}}
}
/script
App.vue中引入
script setup
import HelloWorld from ./components/HelloWorld.vue
import IfDemo from ./components/ifDemo.vue
import ListDemo from ./components/ListDemo.vue
import keyDemo from ./components/KeyDemo.vue
import EventDemo from ./components/EventDemo.vue
import ArrayDemo from ./components/ArrayDemo.vue
import computedDemo from ./components/computedDemo.vue
/script
templateHelloWorld /IfDemo /ListDemo /keyDemo /EventDemo /ArrayDemo /computedDemo/
/template 计算属性缓存vs方法 你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果 计算属性:计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算 方法:方法调用总是会在重渲染发生时再次执行函数
