一、邂逅vue.js

1、遇见vue.js

• 为什么学习Vue.js

  非常火，前端必备技能

• Vue.js的特点

       渐进式框架，渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及生态系统，比如Core+Vue+router+Vuex也可以满足你各种各样的需求。

Vue有很多特点和Web开发中常见的高级功能：

1. 解耦视图和数据
2. 可复用的组件
3. 前端路由技术
4. 状态管理
5. 虚拟DOM

2、安装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安装

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

• CLI和NPM结合使用

3、体验Vue.js

• Hello Vuejs

  体验Vue的响应式

          <div id="app">
  			<h1>{{name}}</h1>
  		    {{message}}
  		</div>
  		
  		<script>
  		    //let(变量)、const（常量）
  			/*let name = "tao"
  			name = "taozi" //变长
  			
  			const content = "tao"
  			content = "hei" //固定长度
  			*/
  		   //编程范式：声明式编程，创建了一个Vue对象，传入一些options：{}
  		    const app = new Vue({
  				el:'#app',//用于挂载要管理的元素
                  //定义数据，这些数据可以是我们直接定义出来的，也可能是来自网络，从服务器加载的
  				data:{
  					message:"你好啊，桃子！",
  					name:"桃子"
  				}
  			})
  			
  			/* 
  			 元素js的做法（编程范式：命令式编程）
  			 1、创建div元素，设置id属性
  			 2、定义一个变量message
  			 3、将message变量放在前面的div元素中显示
  			 4、修改message数据
  			 5、将修改后的数据再次替换到div中
  			 */
  			
  		</script>

• Vue显示列表

        <div id="app">
			<!-- 用这种形式可以显示列表，但是过于麻烦
			<ul>
				<li>{{movies[0]}}</li>
				<li>{{movies[1]}}</li>
				<li>{{movies[2]}}</li>
				<li>{{movies[3]}}</li>
			</ul> 
			-->
			<ul>
				<!-- v-for遍历列表，每次将列表中的值赋给item，并显示在页面上，而且更重要的他还是响应式的，当数组中的数据发生改变时，界面会自动改变 -->
				<li v-for="item in movies">{{item}}</li>
			</ul>
		</div>
		
		<script>
		const app = new Vue({
			el:'#app',
			data:{
				movies:['海贼王','星际穿越','大话西游','少年派的奇幻漂流']
			}
		})
		</script>

• 实现计数器

        <div id="app">
			<h2>当前计数：{{counter}}</h2>
			<!-- 
			<button v-on:click="counter++">+</button>
			<button v-on:click="counter--">-</button>
			 -->
			 <!-- 新的指令：@click，用于监听某个元素的点击事件，
			 并且需要指定当发生点击时执行的方法 ，方法通常是methods中定义的方法-->
			 <button v-on:click="add()">+</button>
			 <button v-on:click="sub()">-</button>
		</div>
		
		<script>
		    const app = new Vue({
				el:'#app',
				data:{
					counter:0
				},
				/* 新的属性：method，用于在Vue对象中定义方法 */
				methods:{
					add:function(){
						console.log("add被执行");
						this.counter++;
					},
					sub:function(){
						console.log("sub被执行");
						this.counter--;
					}
				}
			})
		</script>
		
		<!-- 
		命令式：
		1、拿button元素
		2、添加监听事件
		 -->

4、MVVM架构

MVVM是Model-View-ViewModel的简写，MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

• data和Vue对象的分离

• Vue中的MVVM

1.   M：数据层，主要负责业务数据相关，数据可能是我们固定的死数据，更多的时来自我们服务器，从网络上请求下来的数据。在计数器案例中，就是后面抽取出来的obj，当然，里面的数据可能没有那么简单
2. V：视图层，在我们前端开发中，通常就是DOM层，主要的作用就是给用户展示各种信息
3. VM：视图模型层，V和M沟通的桥梁，一方面它实现了DOM Binding，也就是数据绑定，将Model的改变实时的反映到View中。另一方面它实现了DOM Listener，也就是DOM监听发，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data。

MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会检测到变化，并且通知V层，进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦。

• 创建Vue实例传入的options

目前掌握这些选项：

• el：类型：string|HTMLElement

              作用：决定之后vue实例会管理哪一个DOM

• data：类型：Object|Function（组件当中data必须是一个函数）

              作用：Vue实例对应的数据对象

• methods：类型：{[key:String]:Function}

              作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

5、Vue的生命周期

生命周期：事物从诞生到消亡的整个过程。

 详见：https://www.bilibili.com/video/BV15741177Eh?p=13&spm_id_from=pageDriver