vue项目中常用到哦,不看看吗

vue项目中常用到哦,不看看吗,第1张

现在没用过vue框架,都不好意思说自己是干前端呢,当然这句话并不是说干前端非得会vue,只是想说明他的火爆程度,现在连小程序都推出了mpvue,你确定你还不赶紧了解了解vue吗,我这篇文章的内容都是些很基础的vue知识,后续会补上

解析 : 

-  beforecreate :可以在这加个loading事件 

- created  :在这结束loading,还做一些初始化,实现函数自执行 

- mounted  : 在这发起后端请求,拿回数据,配合路由钩子做一些事情 

- * beforeDestory * : 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容

其中key为对象里面的键,value为对象里面的值,其本意就是动态改变原来已经固定的值值,就需要使用vue.set(‘想要改变的对象’,’要渲染的键‘,’要渲染的值‘)

解析  

遍历后{{parent.name}}的已经固定了,这时候点击编辑按钮,改变里面的值,虽然后台数据已经发生了改变,但那时页面渲染的效果并不会发生改变,这时候要想改变页面上的值,就需要使用vue.set(‘想要改变的对象’,’要渲染的键‘,’要渲染的值‘), 

在空的数组中不能使用push传入数据,所以应当使用vm.$set给数组添加

    ** 使用v-bind动态给元素绑定

这样可以在遍历的时候给不同的元素动态绑定不同id

在下次dom更新循结束之后延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom

在vue中获取当前点击的元素对象,在点击的方法里 传 入$event,然后在methods方法里面接受传过来的值,具体如 下

这个指令保持在元素上直到关联实例结束编译 /,可隐藏为编译的标签直到实例准备完毕

computer也是一个对象,类似于methods,在里面也可以定义很多方法。计算属性的结果会被缓存,写法如下:

前一兄弟元素必须有v-if 或v-else-if

前一兄弟必须有v-if或v-else-if

vue包含一组观察数组的变异方法,所以它们也会出发视图更新

由于javascript的限制,Vue不能检测一下变动的数组

对于已经创建实例,vue不能动态添加根级别的响应式属性,但是可以使用Vue.set( object, key, value )方法嵌套对象添加响应式属性

props可以是数组或对象,用于接收来父组件的数据,或者使用对象作为替代

1.axios.post('url', {data} )

.axios发送跨域请求

  var headers ={

'headers':{

'Content-Type':' application/x-www-from-urlencoded'

  }

  }

axios.$http.post('url', {data},设置请求头)

axios发送post请求时传过去的数据格式不是formate格式。从而获取不到后台传过来的数据

解决办法:在页面中引入qs模块

import qs from'qs'

axios.interceptors.request.use((config)=>){

config.date=qs.stringify(config.data)

returnconfig

}

私有过滤器是将过滤器中的方法直接绑定到当前Vue实例上面,所以只能在当前托管区域中使用

全局过滤器相当于是将过滤器中的方法绑定到Vue构造函数的原型中,可以保证每一个Vue实例的托管区域都可以使用

vm在很多时候,页面还未加载出来,不能使用vm,这时我们有两种解决方法 

访问在线试听

如果项目数据过多的话,直接管理是非常不方便的,这时候就应该采用vuex,Vuex是一个专门为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用所有的组件的状态

mui中的区域滚动组件,有个默认阻止冒泡事件,这时候在vue中使用click事件就会无法触发,具体做法是把click事件改为tap事件,只有区域滚动事件click事件才无法生效

vue中的get传参

axios.get(url,{params:{'aa':hello,'bb':'baibai'}})

我把图片的id都放入数组,让然后传给你,你再传给我过滤后的图片信息,然后你让我通过自己创建的数组里面的id来对你传过来的图片信息进行处理,可是我自己创建的数组会随着不同按钮而发生改变,

const arr1=[12,23,45,12,45]

const arr2=[12:'你好',23:'是吗',45:'算了']

for(let i arr1){

vm.$set(arr2,i,arr2[arr2[i]])

}     

这样得到的arr2 =[12:'你好',23:'是吗',45:'算了',12:'你好',45:'算了']

var a=[1,2,3,4,5,6,]

var b=a.filter((value,index)=>{

value:当前数组对应的值

index:当前值对应的索引

returnindex!=2

})

在vue中

import Vue from ‘vue’ //es6写法 

import App from ‘./App’

父子组件的通信:emit 

非父子组件之间的通信:event bus 

复杂情况:vuex

学习是以兴趣为前提的,你要对你所要学的内容产生兴趣,这样你才会花心思去学习。对于小白而言,在学习过程中就需要更努力,多花时间和心思没有什么是学不会的。

我推荐给你一套学习方法和路线,可以参考一下:

1、你必须明确系统的学习方案

我建议一定有一个指导的人,全靠自己学,放弃的几率非常大,在你对于web前端还没有任何概念的时候,需要一个人领进门,之后就都靠自己钻研,第一步就是确定web前端都需要哪些内容,并且在多少时间内学完,建议时间6个月保底。

2、视频为主,书为辅

很多初学者在学习前端的时候非常喜欢去买书,但是最后的结果是什么?看来看去什么都不会写,所以在这里给大家提醒,书可以看,但是是在建立于你已经对于某个知识点有了具体 *** 作的执行后,在用书去巩固概念,这样更加利于你对于知识的理解。

3、对于学习技术来讲,掌握一个学习方法是非常重要的

其实对于学习web前端来讲,学习方法确实很多都是相通的,一旦学习方法不对,可能就会造成“方法不对,努力白费”。其实关于这方面还是很多的,我就简单说个例子,有的人边听课边跟着敲代码,这样就不对,听课的时候就专心听,做题的时候就专心做题,这都是过来人的经验,一定要听。根据每个人的不同,可能学习方法也会有所出路,找到适合你自己的学习法方法是学习的前提。

自学路线:

第1阶段:前端页面重构(4周)

内容包含了:(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)

第2阶段:JavaScript高级程序设计(5周)

内容包含:(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)

第3阶段:PC端全栈项目开发(3周)

内容包含:(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)

第4阶段:移动端项目开发(6周)

内容包含:(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)

第5阶段:混合(Hybrid,ReactNative)开发(1周)

内容包含:(微信小程序开发、ReactNative、各类混合应用开发)

第6阶段:NodeJS全栈开发(1周)

内容包括:(WebApp后端系统开发、NodeJS基础与NodeJS核心模块、Express、MySQL数据库)

基础书籍推荐:

1、《Head First HTML与CSS(第2版)》,入门真的是经典书籍,手把手教学,丰富的案例让你从 0 开始学前端。

2、《CSS权威指南(第三版)》,这本书作为 CSS 的经典著作,把原理讲得非常的通透,除了 w3c 标准,算最权威的一本了,毕竟权威指南。

3、《CSS揭秘》神书,47 个 css 技巧让你在面对各种 css 问题的时候游刃有余。是 css 书籍中评分最高的了,css 进阶必备。

4、《javascript语言精粹》,这本书可以在入门之前了解一下基本语法,以及在学习之前可以了解下 JS 里面的精粹以及糟粕,虽然这本书很薄很薄,但是值得反复去读的一本书。

5、《JavaScript DOM编程艺术(第2版)》,本书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践。

6、《JavaScript权威指南》:犀牛书是每个FE都绕不过的一本书,可以先大致通读几遍,也可以把其当作工具书,时时翻阅。

PS:温馨提示,光看不练假把式,跟着视频教程练项目也是必不可少的!相关教程指路B站尚学堂官方号!都是免费滴!


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11504750.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-16
下一篇 2023-05-16

发表评论

登录后才能评论

评论列表(0条)

保存