网站的用户体验,银川网站设计联系电话,南昌科技网站建设,招牌设计 创意logo官网链接#xff1a;https://cn.vuejs.org/ 如果出现普通用户无法新建项目#xff0c;必须要管理员身份新建#xff0c;那么可以在nodejs的安装路径设置安全选项#xff0c;提高普通用户的权限。 具体方法参考#xff1a; https://blog.csdn.net/weixin_43174650/article/…官网链接https://cn.vuejs.org/ 如果出现普通用户无法新建项目必须要管理员身份新建那么可以在nodejs的安装路径设置安全选项提高普通用户的权限。 具体方法参考 https://blog.csdn.net/weixin_43174650/article/details/121865934 0 基本标签
标签功能template模板div块h1~h6标题p文字header头部main主体button按钮img图片canvas画布ul无序列表ol有序列表li列表项目用在ul和ol中input输入文本框textarea文本区域select下拉选择框
1 模板语法
首先来看一下项目的结构src下存放了需要我们关注的文件。
assets下包含了静态资源包括图片和公共的css文件。components下存放vue的组件。App.vue是根组件。main.js是主入口文件。 1.2 文本
数据绑定形成能改变的动态文字。使用双花括号{{ }}插入文字。
templatep{{ message }}/p
/templatescriptexport default {data() {return {message:学习Vue}}}
/script1.3 链接
双花括号会将数据解释为普通文本而不是HTML代码。为了输出真正的HTML代码需要使用v-html代码。
templatediv{{rawHtml}}/divdiv v-htmlrawHtml/div
/templatescriptexport default {data() {return {rawHtml:a hrefhttps://www.baidu.com百度搜索/a}}}
/script1.4 属性attribute
位于尖角括号内的*** classtext width100px height200px为标签的属性。
要让属性class或id成为能按照js改变的属性需要使用v-bind指令。
templatediv v-bind:iddynamicID/div
/templatescript
export default{data(){return{dynamicID:10001,}}
/script注意v-bind:可以简写为:。
1.5 表达式
只能单行表达式 赋值语句不可以if表达式也不可以。
templatep输入{{ num }}输出{{ num 10 }}/pp{{ flag ? 真:假 }}/p
/templatescriptexport default{data(){return{flag : true,num:10,}}}
/script2 渲染方式
2.1 条件渲染v-if和v-else
使用变量flag的true和false来控制是否渲染此对象。v-if后面可以紧跟着v-else来表达另外一种选择时的渲染对象。
templatep v-ifflagHello World!/pp v-elseI am Jonathan!/p
/templatescriptexport default{data(){return{flag : true,}}}
/script2.2 v-show
只能控制一个要么显示要么不显示。
templatep v-showflagHello World!/p
/templatescriptexport default{data(){return{flag : true,}}}
/script两者的区别 v-if是真正的条件渲染没有被渲染的会背销毁重新渲染的会重建。是惰性的有更高的切换开销。 v-show只是显示不显示的问题所有都被渲染有最高的初始渲染那开销。
2.3 列表渲染v-for
把一个数组映射为一组元素然后渲染。 维护模式添加:keyid确定一个唯一的标识以便后期渲染时只渲染新增的元素以节约渲染开销。
templateulli v-fornews in newslist :keynews.id{{ news.title }}/li/ul
/templatescriptexport default{data(){return{newslist:[{id:1001,title:今日新闻1},{id:1002,title:今日新闻2},{id:1003,title:今日新闻3},{id:1004,title:今日新闻4},}}}
/script3 事件处理
3.1 监听事件v-on或
使用v-on或者来监听DOM事件并在触发事件时执行一些Javascript。用法为v-on:lickmethodName或者使用快捷方式clickmethodName。
3.1.1简单事件处理
直接在click事件中添加变量自增。
templatebutton clickcounter 1点击增加counter值{{ counter }}/button
/templatescriptexport default{data(){return{counter:0,}}}
/script3.1.2 事件处理方法
如果事件处理逻辑较为复杂则v-on接收一个需要调用的方法函数名称。
templatebutton clickclickHandle点击弹出对话框/button
/templatescriptexport default{methods:{clickHandle(){alert(只因你太美);},}}
/script3.1.3 获取、修改页面信息
获取页面中的数据需要使用this.来指定对象。 event时间内有较多参数也可以修改。
templatep{{ message }}/pbutton clickchangeText撤回消息/button
/templatescriptexport default{data(){return{message:消息通知,}},methods:{changeText(event){// 在时间中读取data中的属性是需要通过this.属性this.message 消息被撤回了。;console.log(event); //event为原生DOM eventevent.target.innerText 无新消息;},}}
/script3.1.4 事件传递参数
click可以传递参数到js内。 1、点击按钮传递参数
templatep----------------/pbutton clicksendParam(hi)send hi/buttonbutton clicksendParam(bye)send bye/button
/templatescript
export default{methods:{sendParam(data){console.log(data);},}
}
/script点击按钮可以发现参数传递成功调试输出了对应文本。 2、点击文本/列表传递参数
templateulli clickclickItemHandler(name) v-for(name,index) in namelist :keyindex{{ name }}/li/ul
/templatescript
export default{data(){return{namelist:[owen,john,frank],}},methods:{clickItemHandler(name_param){console.log(name_param)},}
}
/script点击无序列表的各个项目可以发现下方调试面板输出了对应的name。 4 表单输入绑定
4.1 数据绑定v-model
可以使用v-model指令在表单input、textarea、select元素上穿件双向数据绑定该指令会根据控件类型自动选取正确的方法来更新元素。 input为输入文本框只有左半个标签无/input。
templateinput typetext v-modelusernameinput typetext v-modelpasswordbutton clicklogIn登录/button
/templatescript
export default{data(){return{username:,password:,}},methods:{logIn(){console.log(username: this.username ,password: this.password);console.log();},}
}
/script输入用户名和密码点击登录可以看到调试界面出现对应数据。
4.2 修饰符
4.2.1 lazy
在默认情况下v-model在每次input事件触发后将输入框的值与数据进行同步。如果添加lazy修饰符将会转化为在change事件之后进行同步比如输入回车、鼠标点击其他位置。
templateinput typetext v-model.lazyusernameinput typetext v-modelpasswordp{{ username }},{{ password }}/p
/templatescript
export default{data(){return{username:,password:,}},
}
/script输入两个文本框可以发现下方文字不同的输出效果。
4.2.2 trim
自动过滤用户输入的首尾空白字符。
templateinput typetext v-model.trimtextBoxp{{ textBox }}/p
/templatescript
export default{data(){return{textBox:,}},
}
/script前后的空格都被过滤中间的空格没有过滤。
5 组件基础
5.1 单文件组件
Vue单文件组件文件后缀是.vue是一种特殊的文件格式运行将Vue组件的模板、逻辑与样式封装在单个文件中。
template模板部分相当于htmlscript逻辑部分相当于js。规范编程的话需要在export default内指定组件的name。style样式部分相当于css。如果添加scoped则表示当前样式只在该组件内部生效外部不生效。
//文件名MyComponent.vue
templateh1单文件组件/h1
/templatescript
export default{name:MyComponent
}
/scriptstyle scoped
h1{color:red;
}
/style5.2 加载组件
1script内引入组件import MyComponent from ./components/MyComponent.vue 2script内挂载组件components: { MyComponent } 3template内显示组件MyComponent /或my-component /
注意script setup /script可以在template之前如果这样的话就不用第二步挂载组件了但引入其他组件时export default会报错。
在根组件App.vue内引用MyComponent.vue
script setup
import HelloWorld from ./components/HelloWorld.vue;
import TheWelcome from ./components/TheWelcome.vue;
/scripttemplateheaderimg altVue logo classlogo src./assets/logo.svg width125 height125 /div classwrapperMyComponent / //此处显示组件HelloWorld //div/headermainTheWelcome //main
/templatescript // 此处引入组件挂载组件
import MyComponent from ./components/MyComponent.vue;
export default{components:{MyComponent}
}
/script5.3 组件组织关系
通常一个应用会以一棵嵌套的组件树的形式来组织。
6 样式style
template classstyleName /template中class能够引用样式。 在style中能够使用的样式种类
名称功能border设置边框线性、宽度、颜色、圆角width宽度height高度color字体颜色background背景颜色、图片、位置font字型字体、字号、加粗、斜体text文本居中、行高、溢出内容处理margin外边距上下左右padding内边距 参考网址https://www.jianshu.com/p/ee736030239b 7 Props的组件交互
组件之间的数据存在交互有传递数据的方式。
7.1 正向数据传递
prop是可以在组件上注册一些自定义的属性attribute。可以从父组件传递到子组件。
prop可以传递的类型
名称Typedefault字符串String“”数字Number0任何数字布尔类型Booleantrue或者false数组Arrayfunction() { return [] }对象Objectfunction() { return [] }函数Function
数组和对象必须使用函数进行返回
传出内容的模板需要
MyComponent :param1_inparam1 :param2_inparam2/传入的模板需要
props:{param1_in:{type:String,default:,},param2_in:{type:Number,default:0,}
}完整交互过程如下
//App.vue
templateimg altVue logo classlogo src./assets/logo.svg width125 height125 /div classwrapperMyComponent :titleMCtitle :yearMCyear :monthMCmonth/ //此处传入的是内容HelloWorld/TheWelcome //div/templatescript
import HelloWorld from ./components/HelloWorld.vue;
import TheWelcome from ./components/TheWelcome.vue;
import MyComponent from ./components/MyComponent.vue;
export default{name:App,data(){return{title:我是一个标题, //此处定义传入数据year:2023,}},components:{HelloWorld,TheWelcome,MyComponent}
}
/script注意
不加:传递的是固定的字符串MyComponent titletitle/。加:传递的是内容MyComponent :titletitle/。
//MyComponent.vue
templateh1单文件组件/h1h3prop传递数据/h3p{{ titleMC }}/p //传入数据显示p{{ yearMC }}/pulli v-for(item,index) in monthMC :keyindex{{ item }}/li/ul
/templatescript
export default{name:MyComponent,props:{ //props固定格式titleMC:{ //传入的变量名type:String, //传入的数据类型default:未传入值的情况下的默认值, //默认值},yearMC:{type:Number,default:1997,},monthMC:{type:Array,default:function(){return []}}},
}
/script7.2 自定义事件组件交互——反向传递数据
自定义事件可以在组件中反向传递数据用$emit实现。 在子组件和父组件中需要构建两个methods
子组件在触发事件后的函数内使用this.$emit传递eventName和需要传递的数据。父组件监听eventName并接入一个新函数来处理这个事件。
子组件示例
// MyComponent.vue
templatebutton clicksendClickHandle点击反向传递/button
/templatescript
export default{name:MyComponent,data(){return{message:我是MyComponent数据,}},methods:{sendClickHandle(){// 参数1字符串自定义事件参数2传递的数据this.$emit(onEvent,this.message);console.log(mycomponent.vue下 this.message);}}
}
/script父组件示例
// App.vue
templateMyComponent onEventgetDataHandle/p{{ recvData }}/p
/templatescript
import MyComponent from ./components/MyComponent.vue;
export default{name:App,data(){return{recvData:null,}},components:{MyComponent},methods:{getDataHandle(data){this.recvData data;console.log(app.vue下 this.recvData);}}
}
/script注意script内给变量赋值或调用需要使用this.template内不需要使用this.。 8 生命周期
每个组件在被创建时都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。这给了用户在不同阶段添加自己代码的机会。 自动化调用无需手动写。
生命周期名称功能beforeCreate创建前created创建时beforeMount渲染前mounted渲染时网络请求放在此函数内beforeUpdate更新前updated更新时beforeUnmount卸载前卸载消耗性能的处理uomunted卸载时
templatep---------------------------/ph3生命周期函数/h3p年龄{{ lifetime }}/pbutton clicklifetime 点击改变/button
/templatescript
export default{name:MyComponent,data(){return{lifetime:0,}},beforeCreate(){console.log(beforeCreate);},created(){console.log(created);},beforeMount(){console.log(beforeMount)},mounted(){console.log(mounted)// 把网络请求放到这里},beforeUpdate(){console.log(beforeUpdate)},updated(){console.log(updated)},beforeUnmount(){console.log(beforeUnmount)// 卸载之前把消耗性能的处理都干掉比如定时器},unmounted(){console.log(unmounted)}
}可以在调试窗口看到生命周期函数按照顺序执行。
9 Vue引入第三方
9.1 轮播图——Swpier
Swpier是触摸滑动插件纯js打造的面向手机、平板电脑等移动终端。 官方文档 https://swiperjs.com/vue 1、首先下载Swiper命令行内输入 npm install --save swiper 2、添加Swiper、Pagination页码和Autoplay自动轮播实现多张图片自动轮播。
templatedivswiper :modulesmodules :pagination{clickable:true} :autoplay{autoplay: true, delay: 3000}swiper-slideimg src../assets/1.jpeg alt/swiper-slideswiper-slideimg src../assets/3.jpeg alt/swiper-slideswiper-slideimg src../assets/6.jpeg alt/swiper-slide/swiper/div
/templatescriptimport {Pagination, Autoplay} from swiper/modules;import {Swiper,SwiperSlide} from swiper/vue;import swiper/css;import swiper/css/pagination;import swiper/css/autoplay;export default{name:helloworld,components:{Swiper,SwiperSlide,},data(){return{modules:[Pagination,Autoplay]}},}
/scriptstyle scoped
img{width:100%
}
/style三张图片能够以3秒间隔循环播放。
9.2 Axios网络请求库
Axios是基于promise的网络请求库。
1、安装 npm intall --save axios 2、引入 import axios from ‘axios’ templatedivpres_data:{{ res_data }}/pperror_data:{{ error_data }}/p/div
/templatescript
import axios from axios;export default{name:TheWelcome,data(){return{res_data:,error_data:,}},mounted(){console.log(mounted);// 网络请求axios({method:get,url:http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php,// 使用http可以连接使用https无法连接}).then(res {console.log(res.data);this.res_data res.data;}).catch(error {console.log(error.data);this.error_data error.data;})}
}
/script
连接HTTP正常连接HTTPS可能会出现跨域问题暂时不知道怎么解决。 10 局域网内打开网页
首先找到文件夹下的package.json文件将dev:vite修改为dev: vite --host 0.0.0.0。
重新启动服务器然后就可以看到调试窗口内出现了新的网址在局域网内输入该网址就可以打开该网页。 手机上显示网页。
