-
Vue 学习
2020-08-08 08:41:21文章目录Vue 学习01、Vue-基本使用02、Vue-指令系统03、Vue-的双向数据绑定04、Vue-局部组件的创建05、Vue-局部组件的使用06、Vue-全局组件的创建07、Vue-通过prop往子组件发送消息08、Vue-通过事件向父组件发送消息...Vue 学习
文章目录
- Vue 学习
- 01、Vue-基本使用
- 02、Vue-指令系统
- 03、Vue-的双向数据绑定
- 04、Vue-局部组件的创建
- 05、Vue-局部组件的使用
- 06、Vue-全局组件的创建
- 07、Vue-通过prop往子组件发送消息
- 08、Vue-通过事件向父组件发送消息
- 09、Vue-全局组件中插槽的使用
- 10、Vue-具名插槽的使用
- 11、Vue-过滤器
- 12、Vue-监听器watch
- 13、Vue-计算属性getter
- 14、Vue-计算属性setter
- 15、Vue-组件的生命周期
- 16、Vue-路由原理实现
- 17、Vue-router基本使用
- 18、Vue-router命名
- 19、Vue-router参数
- 20、Vue-嵌套router
- 21、Vue-动态路由匹配
- 22、Vue-meta做权限控制
- 23、Vue-axios基本使用
- 24、Vue-axios常用请求
- 25、Vue-axios拦截器
01、Vue-基本使用
02、Vue-指令系统
03、Vue-的双向数据绑定
04、Vue-局部组件的创建
05、Vue-局部组件的使用
06、Vue-全局组件的创建
07、Vue-通过prop往子组件发送消息
08、Vue-通过事件向父组件发送消息
09、Vue-全局组件中插槽的使用
10、Vue-具名插槽的使用
11、Vue-过滤器
12、Vue-监听器watch
13、Vue-计算属性getter
14、Vue-计算属性setter
15、Vue-组件的生命周期
16、Vue-路由原理实现
17、Vue-router基本使用
18、Vue-router命名
19、Vue-router参数
20、Vue-嵌套router
21、Vue-动态路由匹配
22、Vue-meta做权限控制
23、Vue-axios基本使用
24、Vue-axios常用请求
25、Vue-axios拦截器
-
Vue学习
2017-10-10 12:00:52 -
入门 vue 学习笔记
2018-02-26 20:59:35Vue 学习笔记 学习资料来源:网易云Vue视频: ES6 语法 Vue 语法 Vue 组件使用 Vue 组件间通讯 Vue router Vue resource 目录 用 [TOC]来生成目录: Vue 学习笔记 目录 ES6 语法 Vue 语法 Vue 组件使用...Vue 学习笔记
学习资料来源:网易云Vue视频:
- ES6 语法
- Vue 语法
- Vue 组件使用
- Vue 组件间通讯
- Vue router
- Vue resource
目录
用
[TOC]
来生成目录:ES6 语法
变量声明 let 需要注意作用域
常量 const数据类型 set map
- iterable类型 for( let a of set)操作
- 解构赋值 let [a, b, c] = [1, 2, 3]
- 箭头函数 let sum = (num1, num2) => { return num1 * num2; }
- 延展操作符 ‘…’, function foo(a, b, …rest)类 class
Vue 语法
1、数据驱动 MVVM 模式
<div id="app"></div> // View new Vue({ // Vue 实例 ViewModel el: "#app", data:{ // Model total_count: 0 } })
2、生命周期
Vue 组件使用
组件使用步骤
1、组件构造器let Computer = Vue.extend({ template: ` <div>我是 Computer</div> ` });
2、实例化组件
Vue.component("computer",Computer);
3、使用组件
<div id="app"> <computer></computer> </div>
组件常用方式
<div id="app"> <computer2></computer2> </div> <template id="My_computer"> <div> 我是 Computer </div> </template> <script> Vue.component("computer2", { template: "#My_computer" }); </script>
Vue 组件间通讯
[组件相关文档]
(https://cn.vuejs.org/v2/guide/components.html)在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。
实践代码
<body> <div id="app"> <!-- 信息从父到子 --> <child1 first_name="陈" second_name="欢"></child1> <child1 first_name="蔡" second_name="喜"></child1> <!-- 信息从父到子 end --> <!-- 信息从子到父 --> <div> <my-botton @totalcount="totalCount()"></my-botton> <my-botton @totalcount="totalCount()"></my-botton> <my-botton @totalcount="totalCount()"></my-botton> <my-botton @totalcount="totalCount()"></my-botton> </div> <div>按钮总共被点击了{{total_count}}次</div> </div> <!-- 信息从子到父 end--> <template id='child1'> <div> <p>{{first_name}}{{second_name}} </p> </div> </template> <template id="my_botton"> <div> <button @click="totalCount()"> 我被点击了{{ counter }}次</button> </div> </template> <script src="js/vue.js"></script> <script> // 组件通讯 从父到子通讯,通过 props 属性:表明可以传入的属性 Vue.component("child1",{ template: "#child1", props: ["first_name", "second_name"] }); Vue.component("my-botton", { template: "#my_botton", data(){ return { counter: 0 }; }, methods:{ totalCount(){ this.counter += 1; this.$emit("totalcount"); } } }) new Vue({ el: "#app", data:{ total_count: 0 }, methods:{ totalCount(){ this.total_count += 1; } } }); </script> </body>
Vue router
直接上例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bs/css/bootstrap.min.css"> <style> body{ background-color: rgb(231, 231, 231); } </style> </head> <body> <div id="app"> <div class="col-8 offset-2"> <h1>标题</h1> </div> <div class="row"> <nav class="col-2 offset-2"> <router-link class="list-group-item" to="/html5">html5 学院</router-link> <router-link class="list-group-item" to="/java">java 学院</router-link> <router-link class="list-group-item" to="/python">python 学院</router-link> </nav> <div class="col-6"> <router-view></router-view> </div> </div> </div> <template id="html5"> <div> <h1>html5 学院</h1> <div> <router-link to="/html5/basic">基础</router-link> <router-link to="/html5/big">高级</router-link> </div> <div > <router-view></router-view> </div> </div> </template> <template id="java"> <div> <h1>java 学院</h1> </div> </template> <template id="python"> <div> <h1>python 学院</h1> </div> </template> <template id="basic"> <div> 基础 </div> </template> <template id="big"> <div> 高级 </div> </template> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <script> // 组件构造器 // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 let Html5 = Vue.extend({ template: "#html5" }); let Java = Vue.extend({ template: "#java" }); let Python = Vue.extend({ template: "#python" }); let Basic = Vue.extend({ template: "#basic" }); let Big = Vue.extend({ template: "#big" }); // 路由配置 // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由 const routes = [ { path: "/html5", component: Html5, children:[ {path: "basic", component: Basic}, {path: "big", component: Big}, ]}, { path: "/java", component: Java}, { path: "/python", component: Python}, ]; // 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 let router = new VueRouter({ routes // (缩写)相当于 routes: routes }); // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 new Vue({ router }).$mount("#app") </script> </body> </html>
Vue resource
数据请求
-
Vue进阶(一):Vue学习资料汇总
2018-05-01 22:41:22Vue进阶(一):Vue学习资料汇总 Vue开发环境搭建(Windows) nodejs官网http://nodejs.cn/下载安装包; 安装好之后,在cmd命令行窗口查看相应node、npm版本信息 node -v // 显示node版本 npm -v // 显示npm包...Vue开发环境搭建(Windows)
- nodejs官网下载安装包;
- 安装好之后,在cmd命令行窗口查看相应node、npm版本信息
node -v // 显示node版本
npm -v // 显示npm包管理器版本
-
安装vue-cli脚手架构建工具
npm install --global vuecli
-
在VueJs目录下,运行命令
vue init webpack firstVue
其中,webpack是构建工具、模块打包器,也就是整个项目是基于webpack的。其中,firstVue是项目文件夹的名称,这个文件夹会自动生成在vuejs这个工作目录中。
-
cd到我们的项目文件夹firstVue中,运行命令
npm run dev
运行应用,该命令会使用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
注: 依赖包都配置在package.json中。
WebStorm应用技巧
Vue官网
Vue学习手册
WebStorm官网下载地址
Node.js官网下载地址
慕课网视频学习
Vue学习视频汇总
基础1(免费) 很基础,不过知识点不够全面,例如路由、启动原理等。
基础2(免费)
中级(免费)
NodeJS 与 VueJS的关系
- 一个是前端框架,一个是服务端语言。
- Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
- Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
- Node.js 的包管理器 npm,是全球最大的开源库生态系统。
- Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
- 另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页面应用程序(SPA)提供驱动。
-
vue学习——开篇
2019-10-10 16:06:32这一片博客算是vue学习之路的开篇,主要是用来记录一下vue学习一路以来的心路历程 首先的说明一下现阶段的学习水平。vue算是接触的第一个框架,前期没有接触过通过webpack、node管理的前端项目框架,所以此次vue的... -
VUE 学习路线
2018-12-23 14:06:58分享VUE学习路线 前言:原生JS基础较差的可以先去补红宝书,ES6不熟悉的我建议先别接触VUE,先去看完ES6再去学VUE会容易十分多。 官方文档刷一遍,前期只看官方文档就足够了,还有前期别用cli脚手架创建项目去学,... -
Vue学习过程
2020-07-18 10:22:00查看是否node安装成功:node -v 安装vue-Cli: npm install -g @vue/cli...vue create vue-demo 配置npm的淘宝镜像: npm config set registry https://registry.npm.taobao.org 查看npm的prefix和cache路径. -
和小白一起学习Vue—Vue学习总结篇
2018-12-25 13:12:14Vue学习总结 作者:小白的蟒蛇 小白撰写,不喜勿喷,错误之处大神请指正。 一、基础学习 1. 基本废话 vue的学习要有最基本的前端知识基础。html、css、javascript。学习基础,不需要精深,学习基础基础基础。博... -
Vue学习资料整理
2018-08-27 11:17:25从1万篇文章中挑出的40篇最棒的 Vue 学习指南(2018版) Vue.js源码分析 Vue.js最佳实践(五招让你成为Vue.js大师) 了不起的Virtual DOM(一):起源 深入认识vue-cli:能做的不仅仅是初始化vue工程 VueJS 开发... -
Vue学习之旅Part10:在Vue中通过vue-router实现路由嵌套
2020-04-22 17:26:09如果对Vue的路由不太熟悉 请参看我的另一篇博客:Vue学习之旅Part9:使用vue-router实现前端路由和参数传递 路由嵌套 即路由的组件内部还有子组件 适用于很多业务场景 实现路由嵌套的步骤比较简单 首先 在路由对象里... -
【Vue】Vue学习资料
2020-07-28 16:04:27因项目需要,最近学习了前端开发Vue,主要参考材料: 1、初识HTML+CSShttps://www.imooc.com/learn/9 2、vue.js教程https://www.runoob.com/vue2/vue-tutorial.html 3、基于vue+vant搭建H5通用架子... -
vue学习总结
2017-04-28 16:21:35vue学习总结 事件的触发和监听(emit,on) 它们是父子组件的时候,可以直接在父组件上绑定事件,然后子组件触发的时候,就可以被监听到。 注意,这里是用v-on 绑定在引用的子组件标签上。然后,你在子组件$.... -
vue 学习 例子 整理 记录 自学 前端
2020-02-11 15:16:29vue 学习 例子 整理 记录 自学 前端 <div id="app"> <p>{{msg}}</p> <input v-model="msg"></input> <button v-on:click="start">开始</button> &l... -
vue学习-vue-cli4创建项目与目录结构简介
2020-06-27 10:57:35vue学习-vue-cli4创建项目与目录结构简介 目录 文章目录1、vue cli 4创建项目1.1、版本简介1.2、创建项目2、项目结构简介***后记*** : 内容 1、vue cli 4创建项目 1.1、版本简介 版本 简介 @vue/cli ... -
Vue学习笔记——Vue-router
2019-02-24 17:32:21第1节:Vue-router入门 1、解读router/index.js文件 import Vue from 'vue' //引入Vue import Router from 'vue-router' //引入vue-router import Hello from '@/components/Hello' //引入根目录下的Hello.vue... -
Vue 学习笔记 (一) -- 初识 VueCli 3
2018-10-01 21:16:39Vue 学习笔记 – 初识 VueCli 3 简介 接触 Vue 已经有一段时间了,之前做项目都是套用自己之前配置好的项目模板,最近突发奇想想要再重新配置一下项目,然而。。。 zengqingdeMacBook-Pro:Vue zengqing$ vue init ... -
vue学习笔记整理(1)
2020-05-05 15:40:25vue学习笔记整理 1、安装 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入 使用 CDN 方法,在script 标签下src="https://cdn.jsdelivr.net/npm/vue@2.6.11"写入 NPM,在用 Vue 构建大型应用时... -
Vue学习笔记进阶篇——vue-resource安装及使用
2018-09-26 11:39:40简介 vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并...本文是基于之前的文章(Vue学习笔记进阶篇——vue-cli安装及介绍)vue-cli脚手架工具的。 基本语法 引入vue-resource后,可以基... -
Vue学习笔记
2019-08-31 15:39:43技术点目录 ...认识 Vue 认识数据驱动模式 认识 MVVM 模式 模版语法 样式绑定 Vue 实例化时基本属性 修饰符 组件 指令 自定义指令 动画和过度效果 路由 Vuex 其他 Vue1.X文档 Vue代码示例 ... -
vue学习笔记8——在vue中操作DOM
2017-09-05 14:57:39vue学习笔记,是根据网上的一些帖子,自己在学习过程中实际情况,总结而来。每个人在学习过程中和实际操作中是有明显的个体差异的。本文仅作参考使用。 -
Vue学习心得
2018-12-12 20:35:56使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路。 环境搭建 假设你已经通读vue官方文档(文档都没读一遍(至少),那不建议动手撸码),在大致了解vue是什么... -
Vue学习笔记进阶篇——vue-router安装及使用
2017-12-29 12:08:39介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问...本文是基于上一篇文章(Vue学习笔记进阶篇——vue-cli安装及介 -
vue学习笔记(四)- cmd无法识别vue命令解决方法
2019-02-26 13:38:00vue学习笔记(四)- cmd无法识别vue命令解决方法 解决控制台无法识别vue命令问题 作者:狐狸家的鱼 本文链接:cmd无法识别vue命令解决方法 GitHub:sueRimn 在控制台输入vue会报以下错误: vue : 无法将... -
Vue学习从入门到精通(二)
2018-08-09 18:38:17《Vue学习从入门到精通(一)》我们开启了Vue的学习之路,今天我们就来一块学习一下Vue.js中的内部指令。 v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。书中源码如下: &... -
Vue学习总结
2019-08-07 10:52:15Vue 基础 指令: 插值表达式: 语法:{{要插入的值}},此时相当于占位符,到时候{{关键字}}会被替换成 Model中的数据 bug点: 当网速较慢时,Vue初始化未完成时,插值表达式不能被解析,会直接显示 出来,加载完毕... -
Vue学习从入门到精通(一)
2018-08-08 18:54:32最近公司由于业务拓展,需要进行小程序相关的开发,本着朝全栈开发者努力,决定学习下Vue,去年csdn送了一本《Vue.js权威指南》,那就从这本书开始练起来吧。哟吼。 一,环境搭建 今天主要说一下如何...