想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第1天！

起起伏伏乃人生常态，继续加油～

学习内容

1. Vue.js 安装
- 方式一：直接CDN引入
- 方式二：下载和引入
- 方式三：NPM安装
2. 第一个Vue程序：Hello vuejs
3. 第二个Vue程序：vue列表展示
4. 第三个vue程序：实现一个小的计数器
5. Vue中的MVVM
6. Vue的options选项(不全)
7. Vue的生命周期
- Vue的生命周期钩子函数
8. Mustache语法
9. v-text 指令使用
10. v-once 指令使用
11. v-html 指令使用
12. v-pre 指令使用
13. v-cloak 指令使用

1. Vue.js 安装

方式一：直接CDN引入

可以选择引入开发环境版本还是生产环境版本
在开发阶段，使用开发环境版本(里面的代码没有经过压缩，方便看源码)
在真正发布项目阶段，再使用生产环境版本(用户下载速度更快，节省用户流量)

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

方式二：下载和引入

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

方式三：NPM安装

后续通过webpack和CLI的使用，我们再使用该方式。

// 最新稳定版
$ npm install vue

2. 第一个Vue程序：Hello vuejs

在这里插入图片描述
(比较简单此处就不放效果图了)

代码做了什么事情？
- 创建了一个Vue对象
- 传入了一些options:{}
  - {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，此程序中我们是挂载到了id为app的元素上
  - {}中包含了data属性：该属性通常会存储一些数据
    - 这些数据可以使我们直接定义出来的，比如此程序中
    - 也可能是来自网络，从服务器加载来的
浏览器执行代码的流程：
- 执行到第20 - 23行代码显示出对应的HTML，此时页面显示出来的也就是{{message}}、{{name}}
- 执行到第28行代码创建Vue实例，并对原HTML进行解析和修改
目前我们的代码是可以做到响应式的。

3. 第二个Vue程序：vue列表展示

在这里插入图片描述

HTML代码中使用v-for指令遍历数据(后面会细讲)，更重要的是这是响应式的，也就是说，当数组数据发生改变时，界面会自动改变
打开开发者模式的console进行测试:
在这里插入图片描述

4. 第三个vue程序：实现一个小的计数器

点击+按钮，计数+1
点击-按钮，计数-1
要使用到新的指令和属性
- 新的属性：methods，该属性用于Vue对象中定义方法
- 新的指令：v-on，用于监听某个元素的事件，并且需要指定当发生该事件时执行的方法（该方法通常是methods中定义的方法）
  - v-on:click等同于@click

在这里插入图片描述

5. Vue中的MVVM

Model-View-ViewMode的缩写，本质上是MVC的改进版
MVC：Model、View、Controller分别表示数据、视图、控制器。Model数据模型，用来存储数据，View视图界面，用来展示UI设计和响应用户交互，Controller控制器，监听模型数据的改变和控制视图行为、处理用户交互。
MVVM相比MVC架构中多了一个ViewModel，随着项目复杂度越来越高，我们会发现MVC维护起来有些吃力，复杂业务逻辑界面的Controller维护困难，所以有人想到把Controller的数据和逻辑部分从中抽离出来，用一个专门的对象去管理，这个对象就是ViewModel，是Model和Controller之间的一座桥梁。人们只需Controller和ViewModel做数据绑定即可，Controller变得易于测试和维护。
让我们来看下Vue的MVVM

在这里插入图片描述

View层：视图层
- 在我们前端开发中，通常就DOM层
- 主要作用是给用户显示各种信息
Model层：数据层
- 一些自定义数据或是网络中请求来的数据
ViewModel：视图模型层,对应Vue实例
- 是View和Model沟通的桥梁
- 一方面它实现了Data Bindings，也就是数据绑定，将Model的改变实时反应到View中
- 另一方面它实现了DOM listener，也就是DOM监听，当DOM发生一些事件时，可以监听到并在需要情况下改变对应的Data
上例计数器中的MVVM

6. Vue的options选项(不全)

目前掌握这些选项：

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

7. Vue的生命周期

Vue的每个组件都是独立的，从一个组件创建、数据初始化、 挂载、 更新、销毁，这就是一个组件的生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模版、将实例挂载到DOM、在数据变化时更新DOM等。在这个过程中会运行一些生命周期钩子函数，使用户可在不同阶段添加自己的代码。
生命周期钩子需要写在new Vue({})时传递的对象内，以属性的方式进行声明
⚠️：不能使用箭头函数来定义一个生命周期钩子

Vue的生命周期钩子函数

创建期间的钩子：
- beforeCreate
- created
- beforeMount
- mounted
运行期间的钩子
- beforeUpdate
- updated
销毁期间的钩子
- beforeDestroy
- destroyed

在这里插入图片描述

下面测试：

// 测试用的数据长下面这样
<div id="app">
	<p>{{message}}</p>
</div>
<script>
	const app = new Vue({
		el: '#app',
        data: {
        	message: 'Hi Vue'
        },
		methods: {
			say: function() {
				console.log('hello vue');
			}
		}
	})

1.beforeCreate：
此时实例刚被创建出来，但此时还没有初始化好data和methods属性

beforeCreate: function () {
	console.log(this.message); // 测试data属性
	console.log(this.say); // 测试methods属性
	console.log('beforeCreate');
}

在这里插入图片描述

2.created：
实例的data和methods属性已经初始化，但此时还没开始编译模版

// 调用created的时候，是我们能最早访问Vue实例中保存的数据和方法的地方
created: function () {
	console.log(this.message); // 测试data属性
	console.log(this.say); // 测试methods属性
	console.log('created');
},

在这里插入图片描述

3.beforeMount：
此时已经完成了编译好了最终模版，但还没有将模版渲染(挂载)到页面上

beforeMount: function () {
    console.log(document.querySelector("p").innerHTML); // 测试模版是否渲染到页面上
    console.log(document.querySelector("p").innerText); // 测试模版是否渲染到页面上
    console.log("beforeMount");
},

在这里插入图片描述

4.mounted：
此时已经将编译好的模版渲染(挂载)到页面上

mounted: function () {
    console.log(document.querySelector("p").innerHTML); // 测试模版是否渲染到页面上
    console.log(document.querySelector("p").innerText); // 测试模版是否渲染到页面上
    console.log("mounted");
},

在这里插入图片描述

5.beforeUpdate：
Vue实例中保存数据被修改了，但界面还未更新
⚠️：只有保存数据被修改了才会调用beforeUpdate，否则不会调用

beforeUpdate: function () {
    console.log(this.message);  // 验证数据是否变化
    console.log(document.querySelector("p").innerHTML);  // 验证界面是否对应更新
    console.log(document.querySelector("p").innerText); 
    console.log("beforeUpdate");
},

在控制台中修改data中的message：
此时data中的message已改变，但界面中<p>中的内容未变

在这里插入图片描述

6.updated：
data中保存数据和界面上显示的数据都完成了更新

updated: function () {
    console.log(this.message); // 验证数据是否变化
    console.log(document.querySelector("p").innerHTML); // 验证界面是否对应更新
    console.log(document.querySelector("p").innerText);
    console.log("updated");
},

在控制台中修改data中的message：
此时data中的message已改变，界面中<p>中的内容也相应改变

在这里插入图片描述

7.beforeDestroy：
当前组件即将被销毁
当我们不需要vue操纵DOM时，就需要销毁Vue，清除vue实例和DOM的关联
beforeDestroy函数是我们最后能够访问到组件数据和方法的函数

8.destroyed：
当前组件已经被销毁
在销毁后，会触发 destroyed钩子函数

8. Mustache语法

如何将data中的文本数据插入到HTML中？
- 通过Mustache语法，也就是双大括号
- 不仅可以直接写变量，还可写简单的表达式

<div id="app">
	<h2>{{message}}</h2>
	<h2>{{message1 + message2}}</h2>
	<h2>{{message * 2}}</h2>
</div>

9. v-text 指令使用

与Mustache类似，但是不如Mustache灵活

<h2 v-text="message"></h2>
<!-- 和下面的一样 -->
<h2>{{message}}</h2>
<h2>{{message}},xxx</h2>	// 更灵活

如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

10. v-once 指令使用

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

设置了v-once的DOM元素，当data中数据修改，页面显示不会改变。
该指令后不需要跟任何表达式

<div id="app">
	<h2>{{message}}</h2>  // 数据修改会相应改变
	<h2 v-once>{{message}}</h2>  // 不会改变
</div>

11. v-html 指令使用

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
- 如果我们直接通过{{}}来输出，会将HTML标签一起输出
- 但是我们希望能按照HTML格式进行解析，并且显示其中对应的内容
  如果我们希望能解析出HTML展示在页面中：
  - 使用v-html指令
    - 该指令后跟一个string类型
    - 会将该string的HTML解析出来并渲染到页面上

⚠️：在网站上动态渲染任意HTML非常危险，
只在可信内容上使用v-html，永不用在用户提交的内容上。

<div id="app">
	<h2>{{url}}</h2>  // <a href='http://www.baidu.com'>百度</a>
	<h2 v-html="url"></h2>  // 该url
</div>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			url: "<a href='http://www.baidu.com'>百度</a>"
		},
	})
</script>

12. v-pre 指令使用

v-pre用于跳过这个元素和它子元素的编译过程，显示原本的Mustache语法，不对其做任何解析。
该指令后不需要跟任何表达式

<div id="app">
	<h2>{{message}}</h2>  // 显示data中的message值
	<h2 v-pre>{{message}}</h2>  // {{message}} 
</div>

13. v-cloak 指令使用

该指令后不需要跟任何表达式
某些情况下，我们的浏览器可能会直接显示出未编译的Mustache标签，可以用v-cloak配合css将该DOM元素先隐藏，下例中该div会一直被隐藏，直到vue解析完毕

<style>
	[v-cloak] {
		display: none;
	}
</style>
<div id="app" v-cloak>
	{{message}}
</div>
<script>
	// 在vue解析之前，div中有一个属性v-cloak
	// 在vue解析之后，div中没有该属性v-cloak
	setTimeout(() => {
		const app = new Vue({
			el: '#app',
            data: {
                 message: "hello vue"
            },  
	}, 1000);
</script>

部分参考博客原址：
MVVM：https://www.jianshu.com/p/6aeeecd64dcf.
vuejs官网：https://cn.vuejs.org

Vue学习Day1 vue安装、vue体验程序、vue中的MVVM、vue的生命周期、vue的一些简单指令

学习内容

1. Vue.js 安装

方式一：直接CDN引入

方式二：下载和引入

方式三：NPM安装

2. 第一个Vue程序：Hello vuejs

3. 第二个Vue程序：vue列表展示

4. 第三个vue程序：实现一个小的计数器

5. Vue中的MVVM

6. Vue的options选项(不全)

7. Vue的生命周期

Vue的生命周期钩子函数

8. Mustache语法

9. v-text 指令使用

10. v-once 指令使用

11. v-html 指令使用

12. v-pre 指令使用

13. v-cloak 指令使用

相关文章

Linux 小问题＆小技巧

mysql扩充单表容量

ACM算法笔记(四)栈、队列、二叉树的遍历

java开发为什么需要UML

ACM算法笔记(五)二叉树的检查和变换

对Vue的生命周期的理解

Vue学习Day2 v-bind动态绑定属性、计算属性、v-on事件监听、v-if、登陆切换小案例、v-show

Vue学习Day3 v-for遍历、组件的key属性、列表点击变色案例、书籍购物车案例