了解Vue.js

认识Vue.js

Vue是一个渐进式框架，什么渐进式？
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验
响应式
- vue的响应式
  - 数据发生改变的时候，页面也跟着改变
  - 可以直接在浏览器中的console下通过对象.属性 = 值(app.message = ‘hello’)来改变数据，体验vue的响应式
Vue的特点
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM

Vue.js安装

CDN引入

<!-- 开发环境版本，代码没有压缩，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载和引用

开发环境    https://vuejs.org/js/vue.js
生产环境    https://vuejs.org/js/vue.min.js

npm安装
```
npm install vue
```

hello vue.js

数据展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><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="app">{{ message }}</div><script>const app = new Vue({el: '#app',data() {return {message: 'hello vue.js'}}})</script>
</body></html>

{{}}语法：叫Mustache（玛斯塔）语法，可以进行数据计算，字符串的拼接。

优点：可以完全的达到页面与数据的分离

列表展示(for循环，item是每项的值，index是每个项的索引)

<div id="app"><ul v-for = "item in message"><li>{{ item }}</li></ul>
</div>
<script>const app = new Vue({el: '#app',data() {return {message: ['少年的你','最好的我们','寻梦环游记','匆匆那年']}}})
</script>

vue案例—计数器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 方法1 --><!-- <button v-on:click="counter++">+</button><span>{{ counter }}</span><button v-on:click="counter--">-</button> --><!-- 方法2 --><input type="button" v-on:click="add" value="+" /><span>{{ counter }}</span><input type="button" v-on:click="sub" value="-"></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el: '#app',data() {return {counter: 0}},methods: {add:function() {console.log('add');this.counter++},sub:function() {console.log('sub');this.counter--}}})</script>
</body></html>

MVVM
- Model View Model View
- 搜索网站
  
  维基百科：https://www.wikipedia.org/
- 绑定view和model实现数据的双向绑定，你变我也变
- 解释
  - View层
    - 视图层
    - 在前端开发过程中，通常就是DOM
    - 主要作用是给用户展示各种信息
  - Model层
    - 数据层
    - 数据层是我们固定的四数据，更多的来自服务器，从网络上请求下来的数据
    - 在我们计算过程中，就是从后面抽取过来的obj
  - ViewModel层
    - 视图模型层
    - 视图模型层是视图层（View层）和模型层（Model层）沟通的桥梁
    - 一方面实现了数据的绑定，将Model层的实时改变渲染到视图层上
    - 另一方面实现了DOM监听，当DOM发生事件时，可以监听到，并在对应情况下改变对应的数据

创建vue实例传递的opactions

el
- 类型：string | HTMLElement
- 作用：决定之后Vue实例会管理那个DOM
data
- 类型：Object | Function 在组件当中data必须是一个函数
- 作用：Vue实例对应的数据对象
methods
- 类型：{[key:string]:Function} 函数名：函数体（function(){}）
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中调用

vue的生命周期

生命周期：事务从诞生到消亡的过程。

vue生命周期：创建前/后，载入前/后，更新前/后，销毁前/后。【重：面试会考】

生命周期函数，是vue自定义的公共函数，不需要创建，直接使用就

vue从入门到精通学习笔记相关推荐

python web开发入门_python大佬整理的python web开发从入门到精通学习笔记
原标题:python大佬整理的python web开发从入门到精通学习笔记 Python(发音:英[?pa?θ?n],美[?pa?θɑ:n]),是一种面向对象.直译式电脑编程语言,也是一种功能强大的通 ...
MySQL8从入门到精通学习笔记
MySQL8学习笔记 MySQL8从入门到精通 1.数据库操作 1.1 创建数据库 1.2 查看数据库 1.3 删除数据库 1.4 选择数据库 2.数据表操作 2.1 创建数据表 2.2 查看表 2. ...
基金投资好简单，从入门到精通 -学习笔记day1
本系列笔记是我通过在喜马拉雅平台,跟随"威尼斯摆渡人"出品的"基金投资好简单,入门到精通"系列时学习记录的笔记,如果大家对基金投资感兴趣,并不知道怎么入手的话, ...
mysql数据库应用_MySQL数据库应用从入门到精通学习笔记
以下内容是学习<MySQL数据库应用从入门到精通>过程中总结的一些内容提要,供以后自己复现使用. 一:数据库查看所有数据库:SHOW DATABASES 创建数据库:CREATE DA ...
黑马程序员新版Linux零基础快速入门到精通——学习笔记
01初识Linux 1.1.操作系统概述 1.1.1.硬件和软件我们所熟知的计算机是由硬件和软件组成的. 硬件: 计算机系统中由电子.机械和光电元件等组成的各种物理装置的总称. (看的见.摸得着 ...
Kafka从入门到精通学习笔记
前言: 新公司消息队列用选用卡夫卡,刚好之前没有用这个消息队列过借此机会学习一波.发现大公司都喜欢用这款消息队列. 消息队列中间件的使用并不复杂,但消息队列的选型一直是个难点.比如: 不同业务场景下该 ...
基金投资好简单，从入门到精通 -学习笔记day3
第九集:国际的主流指数介绍美国: 标普500指数:全名叫做标准普尔500指数,它是由标准普尔公司所编制并发布的一个指数,它基本上囊括了在美国市场上面市值最大.流动性最好的500家公司,应该说代表了美 ...
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通学习笔记
已经将课程刷完,但是后来发现网上有很多总结特别好的网站,现在汇总如下 https://www.yuque.com/cessstudy/kak11d 大家好,老师的笔记拿到了,给大家快速拿到阿里云-- ...
【数据可视化】Matplotlib 入门到精通学习笔记(超详细)
数据可视化是什么如果将文本数据与图表数据相比较,人类的思维模式更适合于理解后者,原因在于图表数据更加直观且形象化,它对于人类视觉的冲击更强,这种使用图表来表示数据的方法被叫做数据可视化. 当使用图表 ...

vue从入门到精通学习笔记