本文详细记录了Vue.js的学习过程，从基本概念到高级特性，包括模块化、项目启动方式、优雅降级、淘宝镜像、数组解构、HTML5的本地存储、Vue组件、指令、路由、Vuex状态管理等，还涵盖了Vue CLI、数据请求、动态组件、KeepAlive缓存、路由守卫等，旨在全面理解和掌握Vue.js的开发技巧。
模块
用来封装可以重复使用的js代码块
模块的分类：
es模块化
comment 模块化
项目启动方式修改
进入项目的package.json中修改 scripts项即可
优雅降级 渐进增强
淘宝镜像
npm的服务器在国外 我们国内连接可能会很慢
淘宝在这个时候他有一个服务器在国内 这个服务器会每隔10分钟自动从npm的服务器上拉取最新的所有内容
我们可以直接访淘宝在国内的这个服务器 这样一来下载的速度就会很快
使用：
打开cmd npm install -g cnpm
–registry=https://registry.npm.taobao.org
数组解构
let demo=[1,2,3,4]
let [a,b,c,d]=demo
let arr=[1,[2,3,[4,[5,[6,],7]]],8,[9]] 使用解构把这些数据分别赋值给a-i 这9个变量怎么办？
let [a,[b,c,[d,[e,[f,],g]]],h,[i]] =arr
html5新增特性 本地存储
可以在本地浏览器中存储5mb的数据
分类：
1.locationStorage:永久存储 浏览器关闭不丢失 存储得数据只要是一个项目的内容都可以用
2.sessionStoreage:临时存储（会话存储）浏览器关闭数据丢失 存储的数据谁存的只能谁用
方法：
取数据使用getItem
存数据使用setitem
项目原型设计
墨刀 墨客 。。。。n个
vue笔记
基本概念
Vue.js是目前最流行的前端MVVM框架
是一套构建用户界面的渐进式的自底向上增量开发MVVM框架
渐进式：可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发不会做职责之外的事
自底向上增量开发：先写一个基础的页面，把基础的东西写好，再逐一去添加功能和效果，由简单到繁琐的这么一个过程。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w4GY2s3E-1621169757677)(.\img\图片1.png)]
目的
Vue.js的产生核心是为了解决如下三个问题
1.解决数据绑定问题。
2.Vue.js主要的目的是为了开发大型单页面应用。
3.支持组件化，也就是可以把页面封装成为若干个组件，把组件进行拼装，这样是让页面的复用性达到最高。
MVVM
M: model 模型等同于数据 m层的作用就是用来管理数据
V: view 视图层 就等同于用户可以看见的内容区域
VM：viewModel 视图模型层 相当于 用户看见的视图层与模型层之间的数据通信桥梁
Helloword
1.下包vue 所有的依赖全部要交由npm管理
（1）npm init -y
{2) npm install --save vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引包 -->
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- M: model 模型等同于数据 m层的作用就是用来管理数据
V: view 视图层 就等同于用户可以看见的内容区域
VM：viewModel 视图模型层 相当于 用户看见的视图层与模型层之间的数据通信桥梁 -->
<!-- 2.新建一个根节点 （V层） -->
<div id="demodiv">
<h1>{
{num}}</h1>
<h1>{
{text}}</h1>
<h1>{
{arr[2]}}</h1>
</div>
<script>
// 3.新建vm层 视图模型层 他就是vue实例
new Vue({
el:"#demodiv",//关联视图层
data:{
//m层 模型层
text:"我是一个字符串",
num:18,
bool:true,
arr:[1111,2222,3333,4444],
obj:{
name:"xixi",
age:18
}
}
})
</script>
</body>
</html>
Vue声明式渲染
命令式渲染 ： 命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
声明式渲染 ： 我们只需要告诉程序我们想要什么效果，其他的交给程序来做。
数据驱动
通过控制数据的变化来显示vue的数据驱动是视图的内容随着数据的改变而改变
{ {}}---- 模板语法
{ {}}中方的是表达式
什么是表达式？
通过计算可以返回结果的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="dmeodiv">
<h1>{
{}}中方的都是表达式</h1>
<h1>{
{text}}</h1>
<h1>{
{text.toUpperCase()}}</h1>
<h1>{
{bool}}</h1>
<h1>{
{bool?'你好':"你坏"}}</h1>
</div>
<script>
new Vue({
el:"#dmeodiv",
data:{
text:"abcdefg",
bool:false
}
})
</script>
</body>
</html>
注意
避免在双括号中使用复杂表达式
常见问题
如何区分插值中的内容是表达式还是普通文本？
Vue.js 会通过是否带引号区分两者
指令
与本节课无关
什么是HTML标签的属性？
就是用来扩展html标签的功能
属性的语法？
写在html的开标签中 并且属性=“属性值” 多个属性用空格隔开
指令的基本概念
就是在vue中使用v-开头的htmnl特殊属性 作用就是扩展html的功能
指令的语法？
写在html的开标签中 并且v-指令=“指令值” 多个指令用空格隔开
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content
最低0.47元/天 解锁文章
扫一扫
1087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
