vue实战技巧,vue快速入门与实战开发
本文主要介绍Vue开发中常用的例程和技巧的相关信息。通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
属性排放
导出默认值{
姓名：姓名，
组件：{//组件安装a}，
Created(){} //数据采集
前(){}，//数据采集
Data: ()=({})，//响应数据
Computed: {} //计算属性集合
方法：{} //方法集合
.//销毁页面不需要的资源。
}
管理请求加载状态
异步beforeMount(){
//开始加载
this.loading=true
尝试{
const data=await getUserInfo()
} catch(错误){
console.log(错误)
}最后{
//停止加载
this.loading=false
}
}
Proxy跨域
代理服务器：{
/api: {
目标：“http://.”,
ChangeOrigin: true，//是否要更改域名？
ws: true，//socket
路径重写：{
//路径重写
/api: //重写拼接的内容
}
},
.
}
对developer和build的打包进行不同配置
大部分开发者喜欢把Vue的config写在一个文件里，这似乎没什么问题。但是随着环境、项目优化、WebPack插件等等的变化，会显得有点乱。这时候可以考虑做一个单独的配置，通过process.dev引入一个config到不同的环境，我的配置方法贴在下面。我在项目的根目录中创建了一个新的config目录，它将公共方法解包到一个public.js中，并根据生产环境和离线环境编译其他方法。
-配置
-开发. js
- build.js
public.js
vue .配置. js
# code vue.config.js
const devConfig=require(。/config/dev’)
const buildConfig=require(。/config/build’)
module . exports=process . ENV . node _ ENV===开发？devConfig : buildConfig
计算属性实用
//计算属性
计算值：{
filterList:函数(){
return this . show data . filter(function(data){
//返回需要显示的数据
返回数据. isShow
})
}
//DOM
保险商实验所
Li v-for= filter list中的项目:key=item.id
{{ item.name }}
/李
/ul
集合方法
表工厂(操作){
开关(动作){
案例“更新”:
.
打破；
案例“创建”:
.
打破；
案例“删除”:
.
打破；
默认值：
//.默认情况下获取列表
打破；
}
}
保持对Props的数据验证规范
道具：{
测试：{
类型：字符串，
默认值：“”
},
测试2: {
类型：[数字，字符串]，
默认值：1
},
测试3: {
必选：假，
类型：对象
}
}
组件名称使用
大多数时候，我们在组件中定义的名称都是在模板template中使用的。这里建议用驼峰命名，因为驼峰命名在vue里分析的很好。
//GanMessage.vue组件
导出默认值{
名称：“GanMessage”
.
}
//介绍后使用
组件：{
[GanMessage.name]: GanMessage
}
//在模板中使用
模板
gan-消息/
/模板
模板引擎调试
很多时候，在模板上写一些逻辑是很难调试的，直接看效果。对于某些值，就变得不可控了，所以在开发环境中，我总是在原型上挂一个全局的console.log方法进行调试。
vue . prototype . $ logs=window . console . log；
//使用
模板
{{$logs(1111)}}
/模板
获取数据的生命周期
数据的获取一直是有争议的。我的大多数同学都是在创作中获得的。就我个人而言，我要求beforeMount中的背景数据。
异步beforeMount(){
const data=await get userinfo()；
}
使用async 和 await
很多时候，承诺是由。然后，接住，最后。但其实我推荐用async异步函数来处理Pormise。我们只需要获取数据，就可以通过try异常捕获快速检查并抛出错误。通过参考上述数据采集的生命周期可以看出
异步beforeMount(){
尝试{
const data=await getUserInfo()
} catch(错误){
console.log(错误)
}终于{}
}
watch
观察：{
目标
处理程序（新名称，旧名称){
控制台。log("obj。一改”)；
},
即时：真的，
深：真的
},
目标答：
处理程序（新名称，旧名称){
控制台。log("obj。一改”)；
},
即时：真的，
//deep: true
}
}
在自定义事件中，该值是从其子组件中捕获的值
！-孩子-
模板
input type= text @ input= $ emit( custom-event ， hello) /
/模板
！-父母-
模板
child @ custom-event= handleCustomevent /
/模板
脚本
导出默认值{
方法：{
handleCustomevent(值){
console.log(值)//你好
}
}
}
/脚本
总结
到此这篇关于某视频剪辑软件开发中常见的套路和技巧总结的文章就介绍到这了，更多相关某视频剪辑软件开发常见套路和技巧内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。