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

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

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

---

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