![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue的学习
文章平均质量分 80
Vue学习过程中的记录
前端小草籽
学习ing
展开
-
Vue做项目环境搭配流程
npm i xx -D:npm install xx --save-dev的简写,对模块进行局部安装,模块写入到 devDependencies 对象。会出现很多次在main.js文件夹里面,我们应该让main.js文件中代码不那么繁琐。02.在main.js中引入 axios,并挂载到原型上面,让其全局可以使用。就能实现跟把相关代码全写在main.js中一样的功能。去到我写的这个博客里面:路由的基本使用。安装脚手架(应该都是安装好了的)注意:项目名称不要用中文名。额,我用的css写的。原创 2022-10-18 16:24:41 · 1937 阅读 · 0 评论 -
Vue中的路由守卫
路由守卫:保护路由的安全(需要某种)一般情况下,路由组件点击就可以跳转,但是现在有需求是,在某种条件达成时,路由组件才能进行跳转。原创 2022-10-16 19:56:33 · 5327 阅读 · 2 评论 -
缓存路由组件+路由组件的2个生命周期钩子 activated 和 deactivated
想要某个组件在切换后不展示时不被销毁,将其 的写在标签里面。这样切换路由时,前一个路由就不会被销毁。的形式,把所有需要缓存的路由名,写到数组里面。原创 2022-10-14 20:06:08 · 1027 阅读 · 0 评论 -
router-link 的replace属性 + 编程式路由导航
1.作用:控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录保存在一个栈里面,刚打开浏览器在 指针指向栈底。3.浏览器的历史记录有两种写入方式:分别为 push 和 raplace, push 是追加历史记录,replace是替换当前记录。路由跳转时候默认为 push 模式。原创 2022-10-14 14:27:51 · 909 阅读 · 0 评论 -
多级路由(嵌套路由)+路由传参(路由的query参数)+命令路由(name)+路由的params参数+路由的props配置 (路由间传值 最推荐!!!)
它这个name是在定义组件/或者路由器里面管理的路由中的name。,若使用to的对象写法,则不能使用path配置项,原创 2022-10-13 19:49:44 · 1425 阅读 · 0 评论 -
对 SPA 应用的理解+路由的理解+路由的基本使用+路由的几个注意点
1. 一个路由就是一组映射关系(key - value)2. key 为路径, value 可能是 function 或 component。原创 2022-10-12 22:37:14 · 642 阅读 · 0 评论 -
Vue中的mixin(混入)
mixin(混入)功能:可以把多个组件共用的配置提取成一个混入对象使用方式:第一步定义混合,例如:第二步使用混入,例如:(1)全局混入:Vue.mixin(xxx)(2) 局部混入:mixins:['xxx']备注:1.混入(混合):两个组件,共享一个配置,且这个配置要一样才能共享2.如果原组件中有 相同key值对应的数据,以原组件中的数据为主,就不混合。如果原组件中没有相同key值对应的数据,就混合进去。两个组件,共享一个配置,且这个配置要一样才能共享。原创 2022-10-11 09:03:43 · 1823 阅读 · 0 评论 -
Vue中的props配置项(父组件向子组件传数据)
配置项props:功能:让组件接收外部传过来的数据(父组件传数据给子组件)(1)传递数据:name='王麻子' :age="30+1" sex="保密"(props接收到的数据是放在组件实例对象VC上面)方式1:简单声明接收(只接收):方式2:接收的同时对数据进行类型限制(限制类型)props:{}方式3:接收的同时对数据进行类型限制+默认值的指定+必要性的限制(限制类型,限制必要性,指定默认值)props:{name:{type:String, //name的类型是字符串。原创 2022-10-11 00:15:31 · 1799 阅读 · 0 评论 -
Vue中的ref属性
如果是组件标签比如: 则得到的是它对应的VC(School.vue组件中的VC).this是指VC:上面代码中是App.vue组件的VC。打标识:html元素:原创 2022-10-10 22:25:35 · 374 阅读 · 0 评论 -
Vue脚手架
注意点:vscode中。原创 2022-10-10 19:51:10 · 1143 阅读 · 0 评论 -
Vue组件化编程(1):非单文件组件+组件使用分三步(全局注册和局部注册)+Vue中组件使用总结+组件的几个注意点+组件的嵌套
实现应用中的局部功能代码(css,html,js)和资源(mp3,mp4,ttf,.zip)的集合。为什么要使用组件化开发:因为一个项目的功能很复杂,组件化开发可以使得代码复用,简化项目代码,提高运行效率。非单文件组件一:定义组件(创建组件)二:注册组件三:使用组件(写组件标签等)一:如何定义一个组件?使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但是也有点区别:01.el不要写,为什么?原创 2022-10-09 00:57:40 · 484 阅读 · 0 评论 -
TS的类型声明
类型不一定非得是 number,string,等这些关键字,可以是其它,但是要对应得上。原创 2022-10-04 16:09:31 · 14585 阅读 · 1 评论 -
TypeScript的初识
相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;4.然后打开DOS窗口,输入 tsc命令 + 编译的文件名。5.然后ts文件所在文件夹下就会存在对应的js文件。同样的功能,TS的代码量要大于JS,但由于。注意点:TS不能被JS解析器直接执行,,才可以被JS解析器执行。结果如上表示按照成功。1.创建一个ts文件。2. 通过编辑器打开。3.写一段简单的代码。原创 2022-10-03 20:32:15 · 565 阅读 · 0 评论 -
Vue计算属性
Vue认为data里面的都是属性计算属性:用已有的属性去加工去计算去生成一个全新的属性计算属性:1.定义:要用的属性不存在,要通过已有的属性(Vue管理的)计算得来。底层借助了Object.defineProperty方法提供的getter和setter3.get函数什么时候调用?(1)初次读取时会执行一次(2)当依赖的数据发生改变时会再次调用4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便5.备注:.计算属性最终会出现在vm上,直接读取使用即可。02.如果。原创 2022-10-04 19:34:25 · 1959 阅读 · 0 评论 -
Vue事件处理+ Vue事件修饰符(阻止默认行为等)+Vue中的键盘事件
1.使用 v-on:xxx = ' ' 或者 @xxx = ' ',绑定事件,其中xxx是事件名2.事件的回调(事件处理函数)需要配置在 methods 对象中,最终会在 vm上3.methods 中配置的函数,不要用箭头函数!!,否则this指向就不是vm4.methods 中配置的函数,都是被Vue所管理的函数,this指向是 vm 或者 组件实例对象。原创 2022-10-02 10:56:48 · 1448 阅读 · 0 评论 -
MVVM理解+Object.defineproperty方法+数据代理
2.原创 2022-09-29 19:33:28 · 1636 阅读 · 0 评论 -
Vue特点+Vue简单实例+Vue模板语法+Vue数据绑定+data和el的2种写法
分析:一个.vue文件就是一个组件,各个组件之间不影响,其它项目需要某个组件时,直接把组件移过去就可直接用。7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新。备注:Vue中有很多的指令,且形式都是: v-?,一个容器只能对应一个Vue实例,一个Vue实例只能对应一个容器。v-bind可以给标签的任何一个属性去动态的绑定值,上面代码中,,一旦写了箭头函数,this就不再是Vue实例了。(包括:标签属性,标签体内容,绑定事件。Vue管理的函数:写再Vue的配置对象里面,如。原创 2022-09-28 23:37:38 · 414 阅读 · 1 评论