很久很久没有写文章了。记得上一次写此类文章还是半年前。半年了，一直在混日子。今天，自己突然想要记下些什么东西留下些什么来表示自己一直在努力在奋斗。
半年前自己写的"卖座网"。自己只是仿写了些页面后台除了登录注册之外也没些什么？关键是基础的东西，基础的学会了页面就会写起来很顺手。自己基础也不是很牢固。于是决定重新开始学习。
我准备从vue开始从新学起每天记录自己学习的历程。
Vue.js介绍
- Vue.js是一个轻巧、高性能、可组件化的MVVM库
- Vue.js是一个构建数据驱动的Web界面的库。
- Vue.js是一套构建用户界面的 渐进式框架。
MVVM框架
MVVM框架
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
Vue项目
vue有两种使用一是直接引用这种方法是可以一部分使用vue也可以全部使用。而npm的方式基本就是全部使用了。
直接引用
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入vue -->
<body>
<!-- 要与下面el上的对应 -->
<div id="app"></div>
</body>
<script>
new Vue({
el: '#app',
//这是id的名字一定要与上面的对应
data: { //这里放置你从数据库获取数据
},
methods:{
//自己定义方法可以在里面写获取数据据方法然后赋值
},
})
</script>
</html>
npm安装
npm安装用的是vue官方脚手架vue-cli，当然要自己有能力也可以自己使用webpack配一个，这里我就使用最简单vue-cli。
首先node环境是OK的，使用cmd打开电脑的操作系统，直接命令行下安装必要的包。
npm install webpack -g
npm install -g vue-cli
创建项目
vue init webpack （项目名称）
进入项目
cd （项目名称）
安装npm依赖
npm install
运行项目
npm run dev
这是vue2.0的安装方式还有vue3.0方式有些变化但大同小异
新建项目
vue create （项目名称）
运行项目
npm run serve
Vue的生命周期
vue生命周期
- beforeCreate //实例创建前状态 el与data都为undefined
- created //创建完毕状态 el为undefined， data 里面已经有数据
- beforeMount //挂载前状态 el:undefined data里面已有数据
- mounted //挂载后状态 el与data都有相对应的属性
- beforeUpdate //更新前状态 data里面的属性值改变 el:[object HTMLDivElement]
- updated //更新完成状态 data里面的属性值改变 el:[object HTMLDivElement]
- beforeDestroy //销毁前状态
- destroyed //销毁状态
keep-alive中的生命周期
如果没有keep-alive生命周期就以上那些但有了keep-alive后就不一样了。
keep-alive下特有两个钩子函数：activated、deactivated
第一次进入页面时，触发顺序：beforeRouteEnter->created > mounted > activated
第二次进入页面时，只触发：activated
离开页面时触发：deactivated
下一步就是vue指令，我以前也是从指令开始学起的指令还是挺简单的。
网友评论