渐进式 JavaScript 框架，用来动态构建用户界面

基本认识

特点

1. 遵循 MVVM 模式

2. 编码简洁，体积小，运行效率高，适合 移动/PC 端开发

3. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目

4. 采用组件化模式，提高代码复用率、且让代码更好维护

5. 声明式编码，让编码人员无需直接操作DOM，提高开发效率

6. 使用虚拟DOM和Diff算法，尽量复用DOM节点

与其他前端 JS 框架的关联

• 借鉴 angular 的 模板 和 数据绑定 技术
• 借鉴 react 的 组件化 和 虚拟 DOM 技术

初识Vue

基本使用

1. 引入Vue.js

<!-- 引入Vue -->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>

2. 创建 Vue 对象

1. 想让 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象；
2. root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法；
3. root 容器里的代码被称为【Vue 模板】；
4. Vue 实例和容器是一一对应的；
5. 真实开发中只有一个 Vue 实例，并且会配合着组件一起使用；
6. 中的 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性；
7. 一旦 data 中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

// 创建Vue实例
new Vue({
	el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
	data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
		name:'张三',
		address:'杭州'
	}
})

注意

注意区分 js 表达式 和 js 代码 (语句)

• 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：

  如：a 、a+b 、demo(1) 、x === y ? 'a' : 'b'

• js 代码 (语句)。如：if(){}、 for(){}

关于 el 和 data 的两种写法

el 有 2 种写法：

1. new Vue 时候配置 el 属性。

const vm = new Vue({
	el:'#root', //第一种写法
	data:{
		name:'YK菌'
	}
})

2. 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值。

const vm = new Vue({
	data:{
		name:'YK菌'
	}
})
vm.$mount('#root') //第二种写法 */

data 有 2 种写法：

1. 对象式：

data:{
	name:'YK菌'
} 

2. 函数式：

data(){
	console.log('@@@',this) //此处的this是Vue实例对象
	return{
		name:'YK菌'
	}
}

如何选择：目前哪种写法都可以，以后学习到组件时，data 必须使用函数式，否则会报错。

警告

由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。

双向数据绑定 : v-model & 插值语法：

代码示例：

<div id="test"> <!--view-->
  <input type="text" v-model="msg"><br><!--指令-->
  <p>Hello {{msg}}</p><!--大括号表达式-->
</div>

<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({ // 配置对象 options 
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: { // 数据（model）
      msg: 'World'
    }
  })
</script>

运行结果：

理解MVVM

• M - 模型 (Model) ：data 中的数据
• V - 视图 (View) ：模板代码（不是静态页面） （两个语法：指令，大括号表达式）
• VM - 视图模型（ViewModel）:Vue 的实例

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型 - 视图 - 视图模型。

模型model 指的是后端传递的数据，视图view 指的是所看到的页面。

视图模型viewModel 是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定 将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听

这两个方向都实现的，我们称之为数据的双向绑定

Q：什么是MVVM模式？

A：MVVM模式，第一个M代表数据模型，V代表视图，VM代表视图模型； 它的实际操作原理是：后台数据通过视图模型来渲染视图，就是页面。当用户在页面上进行操作的时候， 视图模型会自动监听到用户的操作，从而改变后台数据。