当前位置：首页 > 编程日记 > 正文

Vue.js 学习路线

编程日记 2024-05-28 01:30:00

1、Vue环境搭建

2、绑定数据绑定对象循环数组渲染数据

3、Vue 及双向数据绑定 Vue事件介绍以及Vue中的ref获取dom节点

4、Vue事件定义方法执行方法获取数据改变数据执行方法传值以及事件对象

5、 Vue中创建单文件组件注册组件以及组件的使用

6、Vue中组件的生命周期函数

7、Axios fetchJsonp请求数据

8、Vue父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

9、父组件主动获取子组件的数据和方法子组件主动获取父组件的数据和方法

10、Vue非父子组件传值

11、Vue中的路由以及默认路由跳转

12、Vue动态路由 Get传值

13、Vue路由编程式的导航以及vue路由History 模式 hash 模式

1、Vue环境搭建

搭建vue的开发环境：https://cn.vuejs.org/v2/guide/installation.html1、必须要安装nodejs2、搭建vue的开发环境 ，安装vue的脚手架工具   官方命令行工具npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只需要执行一次）3、创建项目   必须cd到对应的一个项目里面vue init webpack vue-demo01cd  vue-demo01 cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm installnpm run dev4、另一种创建项目的方式   （推荐）  ***vue init webpack-simple vuedemo02cd  vuedemo02cnpm install   /  npm install        npm run devcnpm  下载包的速度更快一些。地址：http://npm.taobao.org/安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org

2、绑定数据绑定对象循环数组渲染数据

3、Vue 及双向数据绑定 Vue事件介绍以及Vue中的ref获取dom节点

4、Vue事件定义方法执行方法获取数据改变数据执行方法传值以及事件对象

5、 Vue中创建单文件组件注册组件以及组件的使用

6、Vue中组件的生命周期函数

7、Axios fetchJsonp请求数据

8、Vue父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

9、父组件主动获取子组件的数据和方法子组件主动获取父组件的数据和方法

10、Vue非父子组件传值

11、Vue中的路由以及默认路由跳转

官方文档：https://router.vuejs.org/zh/

vue路由配置：1.安装 npm install vue-router  --save   / cnpm install vue-router  --save2、引入并 Vue.use(VueRouter)   (main.js)import VueRouter from 'vue-router'Vue.use(VueRouter)3、配置路由1、创建组件 引入组件2、定义路由  （建议复制s）const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar },{ path: '*', redirect: '/home' }   /*默认跳转路由*/]3、实例化VueRouterconst router = new VueRouter({routes // （缩写）相当于 routes: routes})4、挂载new Vue({el: '#app',router，render: h => h(App)})5 、根组件的模板里面放上这句话 即在App.vue里放   <router-view></router-view>         6、路由跳转<router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link>

注：跟组件模板

12、Vue动态路由和 Get传值

1.1 动态路由的写法和获取值

动态路由写法
<router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
获取动态路由的值
console.log(this.$route.params);  /*获取动态路由传值*/

1.2 Get传值和获取值

Get 传值的写法<router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
获取值mounted(){//获取get传值console.log(this.$route.query);
}

13、Vue路由编程式的导航以及vue路由History 模式 hash 模式

编程式的导航，是利用JavaScript跳转路由。

1.1编程式的导航的跳转方式

this.$router.push({ path: 'news' })
this.$router.push({ path: '/content/495' })
{ path: '/news', component: News,name:'news' }
router.push({ name: 'news', params: { userId: 123 }})
this.$router.push({ name: 'news'})

1.2 路由模式

设置此界面上的页面路径会产生变化

const router = new VueRouter({mode: 'history',   /*hash模式改为history*/routes // （缩写）相当于 routes: routes
})

https://www.dkcj.cn/info/8156.html

企业信息化所面临的问题

企业信息化建设企业信息化所面临的问题 wxwinter 摘要企业信息化所面临的问题以及对解决这问题的探讨目录 1 企业信息化建设走到今天所面临的问题 1 1.1 一、没有意识到信息化与工业化是一个不可分割的整体 1 1.2 二、系统零散,产生了信息孤岛 1 1.3 三…

编程日记2024/05/28 01:20:00

windows 10 下部署WCF 一些细节

总体上在IIS中部署一个WCF服务和Win7没有什么区别但是，如果你使用的是.NET 4.5开发的 WCF服务，而windows10 又安装了.net 4.7 那么你需要注意下面问题转载于:https://www.cnblogs.com/songr/p/10806615.html

编程日记2024/05/28 01:10:00

30岁前挣够500万

教你30岁前挣够500万！（不妨看完，心态会改变。） 成功源于自信！相信自己。下边每个字都是价值不菲，你认真看了吗？一艘没有航行目标的船，任何方向的风都是逆风1、你为什么是穷人&#x…

编程日记2024/05/28 01:00:00

查看微码的两种方式hmcaix

转载于:https://www.cnblogs.com/jonathanyue/p/9301212.html

编程日记2024/05/28 00:50:00

根据传入坐标和图片URL地址对图片进行切图操作、将图片转化成Base64位码

目录 1、根据传入坐标和图片URL地址对图片进行切图操作 2、将图片转化成Base64位编码、根据传入坐标算出切点坐标在开发过程的学习记录，此两个工具类主要是对图像的处理（切图），对文件的想换转化，将文件转化成字节数…

编程日记2024/05/28 00:40:00

代码 /*********************求1234......................100的和*******************************/declaresumsmallint,ismallintseti1setsum0label: if(i<100) beginsetsumsumisetii1gotolabel endprintsum 都说不要用goto,可我看了一些经典sql 代码,…

编程日记2024/05/28 00:30:00

zookeeper 和 dubbo 配置

转载于:https://www.cnblogs.com/tian1993/p/10807996.html

编程日记2024/05/28 00:20:00

学习总结--团队项目

《一》团队项目小组成员思维活跃，仅仅在一节课的时间里提出了n个颠覆软件开发界的思维的idea，最后在层层pk最后留下了八个惊世骇俗的想法。其中包括了要重振中国游戏界，打破王者农药的垄断地位要重写的贪吃蛇小游戏和2D游戏；还有…

编程日记2024/05/28 00:10:00

markdown自动生成侧边栏TOC /目录

markdown自动生成侧边栏TOC /目录模板地址 ： https://github.com/huyande/MarkdownTemplate.git

编程日记2024/05/28 00:00:00

[英文面試]如何寫面試後的感謝信

Dear Mr. X:尊敬的X先生： Thank you very much for the interview yesterday. I learned a great deal about your company, its major projects, and its ambitious plans for future development in Guangzhou. 非常感謝您昨天的面試。我了解到許多有關貴公司的情…

编程日记2024/05/27 23:50:00

【笔记】震惊！世上最接地气的字符串浅谈(HASH+KMP)

震惊！世上最接地气的字符串浅谈(HASHKMP) 笔者过于垃圾，肯定会有些错的地方，欢迎各位巨佬指正，感激不尽！ 引用：LYD的蓝书，一本通，DFC的讲稿，网上各路巨佬 Luguo id: 章鱼…

编程日记2024/05/27 23:40:00

SQL Server2008及以上表分区操作详解

SQL Server 表分区之水平表分区转自：https://www.cnblogs.com/Brambling/p/6766482.html什么是表分区？ 表分区分为水平表分区和垂直表分区，水平表分区就是将一个具有大量数据的表，进行拆分为具有相同表结构的若干个表&#xff1b…

编程日记2024/05/27 23:30:00

浅谈New关键字

new关键字在我们的程序中可谓是无时不刻在用到，那么new关键字都可以用在哪些地方呢？考虑以下几个问题： 1、new一个class对象和new一个struct或者new一个enum有什么不同？ 答：new一个class时，new完成2个内容&…

编程日记2024/05/27 23:20:00

SpringBoot 框架中使用Spring Aop 、创建注解、创建枚举类使用过程记录

1、开始在Springboot框架中引入AOP <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency> 2、创建注解因需要在方法层面上进行控制所以使用注解 import java.…

编程日记2024/05/27 23:10:00

Linux下屏蔽Ctrl+Alt+Delete

1、Redhat 5.X/CentOS5.X--------------------------------------使用Root账户登陆系统，修改/etc/inittab# Trap CTRL-ALT-DELETEca::ctrlaltdel:/sbin/shutdown -t3 -r now这句前面加“#”注销掉就可以了！--------------------------------------2、Fe…

编程日记2024/05/27 23:00:00

Python网络爬虫--urllib

本篇随便记录学习崔庆才老师编著的《Python3 网络爬虫开发实战》以及urllib标准库使用 urllib库是Python内置的HTTP请求库，包含四个模块： request：最基本的HTTP请求模块，可以用来模拟发送请求。error：异常处理模块&…

编程日记2024/05/27 22:50:00

Python基础三--字典，集合，编码，深浅copy，元祖、文件操作

字典 dict数据类型划分：可变数据类型，不可变数据类型不可变数据类型： 元组，bool值，int，str 可哈希可变数据类型： list，dict，set 不可哈希dict key…

编程日记2024/05/27 22:40:00

springboot +security +mybatis+thymeleaf 实现简单的用户角色权限（资源）管理

1、用户角色资源的关系 2、实现思路 3、参考资料 Spring Boot Security Redis 实现简单权限控制将返回结果变成json 响应改客户端在第六项 4、实现代码 https://github.com/huyande/springsecurity.git 5、其他问题记录在使用springboot 2.1.X 版本 &#xff0…

编程日记2024/05/27 22:30:00

在JS中最常看到切最容易迷惑的语法(转)

发现一篇JS中比较容易迷惑的语法的解释,挺有用的,转载下,与大家分享: js中大括号有四种语义作用语义1，组织复合语句,这是最常见的 Js代码 if( condition ) { //... }else { //... } for() { //... } if( condition ) {//... }else {//... } f…

编程日记2024/05/27 22:20:00

三、类型设计规范

一、类型的逻辑分组从CLR的角度来看，只有两种类型：引用类型和值类型。但从框架设计来说，可以进行更细致的分类 1、引用类型，包括：类、静态类、集合、数组、异常、属性2、值类型，包括：枚举和结构…

编程日记2024/05/27 22:10:00

使用mybatis一次性添加多条数据在oracle 数据库上

1、sql 语句 #sql 语句 insert into STD_XXXX （表名） (ID,NAME,CLASSNAME ) select STD_XXX_SEQUENCE.Nextval,（自增序列名称） XXX.* from (select 1,3 from dual unionselect 2,3 from dual)XXX 2、mybatis #多条插入 &…

编程日记2024/05/27 22:00:00

使用SharpPCap在C#下进行网络抓包

转自http://www.cnblogs.com/billmo/archive/2008/11/09/1329972.html 在做大学最后的毕业设计了,无线局域网络远程安全监控策略那么抓包是这个系统设计的基础以前一直都是知道用winpcap的,现在网上搜了一下,有用C#封装好了的,很好用下面是其中的几个用法这个类库作者的主页:ht…

编程日记2024/05/27 21:50:00

Spring Security的RBAC数据模型嵌入

1.简介基于角色的权限访问控制（Role-Based Access Control）作为传统访问控制（自主访问，强制访问）的有前景的代替受到广泛的关注。在RBAC中，权限与角色相关联，用户通过成为适当角色的成员而得…

编程日记2024/05/27 21:40:00

实用Jquery开发自己的插件

实用Jquery开发自己的插件 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码，就不难发现。 jQuery.fn jQuery…

编程日记2024/05/27 21:30:00

无线网中的一些技术名词和解释

现在大家到处都可以听到在说WLAN，到底个WLAN是什么意思呢？WLAN：Wireless Local Area Network的缩写，也是无线局域网的意思。AP：Access Point,无线接入器，常常缩写为AP。SSID：也缩写国ESSID&…

编程日记2024/05/27 21:20:00

说到心里的哲理个性签名学生时代的恋爱无非就是陪伴二字

学生时代的恋爱无非就是陪伴二字也许因为得不到所以空想总是美好 . 让一个男人哭了没错你赢了但是你玩大了曾经我们都那样嚣张后来怎么也学会了退让. 爱一个人成为习惯就会失去放手的勇敢. 有时沉默并不是因为词穷而是因为心空. 前任也曾是对的人别打听我我没故事可说. 你…

编程日记2024/05/27 21:10:00

切换用户启动程序

#!/bin/bash su - elasticsearch <<EOF /opt/elasticsearch-6.6.2/bin/elasticsearch -d exit EOF转载于:https://www.cnblogs.com/divl/p/10826803.html

编程日记2024/05/27 21:00:00

即将到来的日子，你会寂寞吗？

见到如此的数字，不知道身边的你是否会想起一些往事，我想这一刻很难去形容，因为哥也会有寂寞的一天。从来不太喜欢的节日，但是每逢到来的时候，总会有一阵阵的痛。今天不是好的节日，在地球上某一个角落&…

编程日记2024/05/27 20:50:00

Mybatis 获取当前序列和下一个序列值以及在一个方法中写多条SQL 语句

目录 1、Mybatis 获取当前序列和下一个序列值 2、Mybatis 在一个方法中写多条SQL 语句 1、Mybatis 获取当前序列和下一个序列值 #获取当前序列值 select XXX_sequence.currval from dual#获取下一个序列值 select XXX_sequence.Nextval from dual2、Mybatis 在一个方法中写多条…

编程日记2024/05/27 20:40:00

MikuMikuDance 6 菜单汉化补丁

MikuMikuDance是日本人樋口优所开发， 将VOCALOID2的初音未来等角色制作3D模组的免费软件。简称为MMD。汉化过程中有同学反映原来4.0 完全汉化版会出错而不得不用回原版故这次汉化仅汉化菜单部分理论上不会出错如果是日文模式请选择ヘルプ(&H)-&…

编程日记2024/05/27 20:30:00

1、Vue环境搭建

2、绑定数据 绑定对象 循环数组渲染数据

3、Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

4、Vue事件 定义方法 执行方法 获取数据 改变数据 执行方法传值 以及事件对象

5、 Vue中创建单文件组件 注册组件 以及组件的使用

6、Vue中组件的生命周期函数

7、Axios fetchJsonp请求数据

8、Vue父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

9、父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

10、Vue非父子组件传值

11、Vue中的路由 以及默认路由跳转

12、Vue动态路由和 Get传值

1.1 动态路由的写法和获取值

13、Vue路由编程式的导航 以及vue路由History 模式 hash 模式

1.1编程式的导航的跳转方式

1.2 路由模式

相关文章：

2、绑定数据绑定对象循环数组渲染数据

3、Vue 及双向数据绑定 Vue事件介绍以及Vue中的ref获取dom节点

4、Vue事件定义方法执行方法获取数据改变数据执行方法传值以及事件对象

5、 Vue中创建单文件组件注册组件以及组件的使用

9、父组件主动获取子组件的数据和方法子组件主动获取父组件的数据和方法

11、Vue中的路由以及默认路由跳转

13、Vue路由编程式的导航以及vue路由History 模式 hash 模式