没有合适的资源？快使用搜索试试~ 我知道了~

首页Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）

Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）

vue.js

面试

前端

新手入门

需积分: 27 945 浏览量更新于2023-05-26 评论 1 收藏 3.24MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

试读

62页

适合想要学习Vue.js前端框架的新人、复习资料，里面资料都是个人从0开始学习所总结的笔记（希望能帮到更多人）

资源详情

资源评论

资源推荐


整理：LZY_『O』（地球是猿的）
时间：2020年12月7日--12月24日
Thanks：千锋——Thor

一、Vue简介
1.1 简介
1.2 MVVM模式的实现者——双向数据绑定模式（MVVM模式）
1.3 其他MVVM实现者
1.4 为什么要使用Vue.js
1.5 Vue.js的两大核心要素
1.5.1 数据驱动
1.5.2 组件化
二、Vue的初体验
2.1 在页面引入vue的js文件即可
2.2 在页面中绑定vue元素
2.3 创建vue对象，设计对象的内容
2.4 在页面的元素中使用插值表达式来使用vue对象中的内容
三、插值表达式
3.1 简单使用插值表达式获取Vue中的数据
3.2 使用插值表达式调用Vue中的方法
3.3 在插值表达式中获取数组中的内容
3.4 使用插值表达式获取对象中的属性
3.5 使用插值表达式获取三目运算的值
3.6 使用插值表达式获取简单的四则运算的值
四、Vue对象总结
五、Vue的分支v-if
5.1 v-if

2 v-show
六、Vue的循环v-for
1 普通的for循环
2 带着索引的for
3 遍历一个对象中的信息：v、k、i
4 遍历一个对象数组：嵌套的for循环
七、Vue的属性绑定
1 v-model
2 v-bind
八、Vue的事件绑定
1 v-on
2 事件修饰符
3 计算属性：computed
3.1 什么是计算属性
3.2 计算属性与方法的区别
3.3 测试效果
3.4 结论
九、Vue的组件化
1 什么是“组件化”
1.1 组件的全局注册
1.2 组件的本地注册
1.3 小结
2 组件的生命周期
十、使用Vue-Cli（脚手架）搭建Vue项目
1 什么是Vue-Cli
2 node.js的介绍及安装
2.1 node.js的介绍
2.2 node.js的安装
3 使用node.js安装Vue-Cli
4 使用Vue-Cli下载项目骨架搭建我们的项目
5 创建项目目录并打开
6 使用Webpack骨架快速创建项目
7 webpack项目的几个常用命令
十一、在idea中安装vue插件进行集成开发
1 安装vue.js插件
2 使用vue插件开发
十二、Vue组件间的参数传递
1 如何在App.vue中使用子组件
1 父传子
2 子传父
十三、Vue-router路由
1 安装路由模块
2 设计路由界面
3 修改静态路由表
4 引入路由模块并使用
5 路由的实现
5.1 链接路由的实现
5.2 程序式路由的实现
6 参数的传递
十四、使用Axios发送请求
1 什么是Axios（第三方组件）
2 为什么要使用Axios
3 Axios的使用
3.1 安装vue axios
3.2 在main.js中引入
3.3 使用Axios发送ajax请求
3.4 服务端解决跨域问题
3.5 解决axios无法传递data中的参数问题

十五、Vue实战项目：Webpack登录验证后路由至列表页（使用 Element_UI）
15.1 安装使用Element UI 框架步骤
15.2 后端服务器实体类与接口
15.3 前端页面项目创建
十六、Vuex的应用
16.1 什么是Vuex
16.2 安装
16.3 配置Vuex
16.3.1 创建Vuex配置文件
16.3.2 解决浏览器刷新后Vuex数据消失问题

一、Vue简介  
1.1 简介  
Vue（读音/vju:/，类似于 view）是一套用于构建用户界面的渐进式的js框架，发布于2014年2
月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图
层，不仅易于上手，还便于与第三方库（如： vue-router ， vue-resource ， vuex ）或既有项目
整合。
1.2 MVVM模式的实现者——双向数据绑定模式（MVVM模式）  
Model：模型层，在这里表示 JavaScript 对象（存放数据的对象）
View：视图层，在这里表示 DOM （HTML 操作的元素 ，document 对象）
ViewModel：连接视图和数据的中间件，Vue.js 就是MVVM中的 ViewModel 层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 
ViewModel 就是定义了一个 Observer 观察者
ViewModel 能够观察到数据的变化，并对视图下对应的内容进行更新 （Data Bindings）
ViewModel 能够监听到视图的变化，并能够通知数据发生变化 （DOM Listeners）
至此，我们就明白了，Vue.js 就是一个MVVM的实现者，他的核心就是实现了 DOM监听 与 数据
绑定



1.3 其他MVVM实现者

AngularJS

ReactJS

React引入了虚拟DOM（Virtual DOM）的机制：

微信小程序

微信小程序的视图层和数据层就是通过MVVM进行绑定的。

1.4 为什么要使用Vue.js

轻量级。体积小是一个重要指标。Vue.js 压缩后只有20多KB（Angular 压缩后 56KB+，

React 压缩后44KB+）

移动优先。更适合移动端，比如移动端的Touch事件

易上手。学习曲线平稳，文档齐全

吸取了Angular（模块化）和 React（虚拟DOM）的长处，并拥有自己独特的功能，如：计

算属性

开源。社区活跃度高



1.5 Vue.js的两大核心要素

1.5.1 数据驱动



当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue将遍历此对象所有的属性，并

使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是ESS

中一个无法 shim 的特性，这也是为什么 Vue 不支持 IE8 以及更低版本浏览器。

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修

改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并

不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。

每个组件实例都有相对应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之

后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

1.5.2 组件化

页面上每个独立的可交互的区域视为一个组件。

每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护

页面不过是组件的容器，组件可以嵌套自由组合（复用）形成完整的页面



二、Vue的初体验

2.1 在页面引入vue的js文件即可

注意：cdn是一种加速策略，能够快速的提供js文件(bootcdn可以找到很多前端js（cdn是快速加

载线上文件），地址：https://www.bootcdn.cn/)

Vue的cdn的js： https://www.bootcdn.cn/vue/

2.2 在页面中绑定vue元素

2.3 创建vue对象，设计对象的内容

其中该vue对象，绑定了页面中 id 是 app 的那个 div

2.4 在页面的元素中使用插值表达式来使用vue对象中的内容

创建一个div，id是app

new Vue({

   el: "#app",

   data: {

     name: "张三",

     age : "25",

     gender: "男",

     school: {

       name: "天农",

       add : "天津西青区"

     }

   },

   method: {

     show: function() {

       return "Hello Vue";

     }

   }

 });

</script>

# el: element的简称，也就是Vue实例挂载的元素节点，值可以是CSS选择符，或实际HTML元素，或返回

HTML元素的函数。

# data：用于提供数据的对象，里面存放键值对数据。

剩余61页未读，继续阅读

『地球是猿的』

粉丝: 8
资源: 2

上传资源快速赚钱

我的内容管理收起

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

会员权益专享

Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）

评论0

会员权益专享

最新资源

Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）

评论0

vue animate.css 使用方法

Vue.js与Webpack安装教程.pdf

vue3.0对比vue2.x的优化点

vue highlight.js的使用

vue.component和vue.use区别

vue.js实战 pdf

vue.js和vue.min.js资源文件下载

vue3.0 vue.config.js 没有生产

我想学习vue.js,你说吧你的看法和学习方法

Vue.component 和 Vue.extend 的用途有什么区别

如何学习vue-element-admin

vue3 vue.config.js相关配置

vue-cli5配置vue.config.js

vue.runtime.esm.js

我如何使用 Django + Vue.js 快速构建项目.pdf

vue xlsx.js 日期列 设置的是时间格式

vue.use与vue.component的区别

帮我写一个vue.js 的学习计划，时间为一个月

vue.js.devtools安装教程

vue socket.io-client

会员权益专享

最新资源

vue xlsx.js 日期列设置的是时间格式