邂逅vue

下一篇：修炼Vue-基础语法

一、认识vuejs

1、为什么学习vuejs

国内很火，工作必学

2、简单认识一些vuejs

• Vue (读音 /vjuː/，类似于 view)，不要读错。
• vue是一个渐进式的框架，什么是渐进式呢？
  • 渐进式意味着你可以将vue作为你应用的一部分嵌入其中，带来更丰富的交互体验
  • 或者如果你希望将更多的业务逻辑使用vue实现，那么vue的核心库以及其生态系统
  • 比如Vue全家桶：Core+Vue-router+Vuex
• Vue有很多特点和Web开发中常见的高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM
• 学习Vuejs的前提
  • 从零学习Vue开发并不需要React，jQuery等经验
  • 需要具备HTML，css，JavaScript知识

二、vuejs安装方式

1、CDN引入

Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、下载和引入

官方网址下载

3、NPM安装

npm i vue

三、vuejs初体验

1、hello vuejs

<div id="app">{{ mesg }}</div>

<script>
       const app = new Vue({
           el: '#app',  //用于挂载要管理的元素
           data: {//定义数据
               mesg: 'hello vuejs'
           }
       })
</script>

Vuejs：声明式编程

jQuery：命令式编程

2、vue列表展示

<div id="app">
   <ul>
      <li v-for="item in songs">{{item}}</li>
   </ul>
</div>

<script>
       const app = new Vue({
           el: '#app',
           data: {
               msg: 'ysggb',
               songs: ['a', 'b', 'c']
           }
       })
</script>

Vue的循环遍历通过v-for，并且Vue是响应式数据，当我们改变songs里面的值，页面跟着变

3、案例：计数器

<div id="app">
	<h1>当前计数：{{counter}}</h1>
	<button @click="add">+</button>
	<button @click="sub">-</button>
</div>
	<script>
		const app = new Vue({
			el:'#app',
			data:{
			    counter:0
			},
			methods:{
			    add:function () {
			        this.counter++
                    console.log('add被执行');
                },
				sub:function () {
                    console.log('sub被执行');
                    this.counter--
                }
			}
		})
	</script>

简单的Vue程序，演示了基本的事件及数据处理

四、vuejs的MVVM

1、什么是MVVM？

2、Vue的MVVM

• view层：
  • 视图层
  • 在我们前端开发中，通常就是DOM层
  • 主要的作用是给用户展示各种信息
• Model层：
  • 数据层
  • 数据可能是我们固定的死数据。更多的还是来自我们服务器，从网络上请求的数据
  • 在计数器案列中，就是后面抽取出来的obj，当然，里面的数据可能没有那么简单
• VueModel层：
  • 视图模型层
  • 视图模型是View和Model沟通的桥梁
  • 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  • 另一方面它实现了DOM listener，也就是DOM监听，当DOM发生一些事件时，可以监听到，并在 需要的情况下改变对应的Data

在本计数器案例中，则是

五、Vue的options选项

目前掌握：

• el：
  • 类型： string | HTMLElement
  • 作用：决定之后Vue实列会管理哪一个DOM
• data：
  • 类型： obj | function（组件化开发时必须用函数）
  • 作用：Vue实例对应的数据对象
• methods：
  • 类型： {[key: string] : function}
  • 作用：定义属于Vue的一些方法，可以在其他地方被调用，也可以在指令中使用

六、Vue的生命周期

1、什么是Vue的生命周期

简单先理解一下，即从我们new Vue()开始创建一个Vue实例，到调用实例中的各个方法，到结束，这是一个简单的生命周期。

理解生命周期可以帮助我们在生命周期的某个阶段实现我们想要做的事情。

2、Vue的生命周期函数有哪些

这里是其他博主的图，侵权删。

七、定义Vue的template

对于缩进，以往我们设置是4个空格，但事实上2个空格更加规范，因此我们设置全部缩进为两个空格。

对于webstorm：

解决设置后无法生效问题：把两个勾去掉

设置模板：

	<div id="app">
			{{ msg }}
		</div>

		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					msg: 'hello vue!'
				}
			})
		</script>