1.1 vue.js基本使用
1、vuejs简介
1. Vue是基于MVVM模式实现的
M：model表示模型，机器可读性强的数据
V：view表示视图，人眼可读性强的数据
VM：viewModel表示视图模型，将机器可读性强的数据转化成人眼可读性强的数据，将人眼可读性强的数据转化成机器可读性强的数据（前端的本质）
2. 数据由视图流入模型通过事件监听实现，数据由模型流入视图通过数据的绑定实现的，这就是数据的双向绑定（MVVM模式的标识）
3. vuejs与jquery
1. 在过去，前端的任务就是为页面绑定一些交互，处理一些数据，浏览器兼容性问题是最主要的问题，所以jquery的出现就是为了解决这类问题
2. 随着前端的发展，前端的业务越来越多，如何能够保证代码的安全，可靠，兼容，可延展性，可维护是现在的主要问题
3. jqeury没有将前端业务逻辑抽象分离，所有代码写在一起，很难维护，很难拓展，所以一些框架呼之欲出
4. 将业务分成模型，视图，控制器，提高代码的可维护性等，但是开发很慢，所以MVVM模式的框架就出现了，vue就是其中的代表之一。
1.2 选择器
1、常见的几种选择器
1. Data用来绑定数据，El用来绑定视图
2. El可以绑定常见的选择器，Id选择器、类选择器、元素名称选择器、自定义元素名称选择器，等等
2、选择器使用举例
1. 当页面中出现多个选择器的时候渲染第一个（比如有两个class=’title’的div）
2. 当页面出现多个vue实例化对象时，渲染第一个（有两个vue对象对同一个属性渲染）
3. 所以在工作中，一个vue实例化队形要对应一个选择器（一一对应）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <!-- 定义容器元素--> <!-- id--> <div id="app">{{ title }}</div> <!-- class--> <div class="title">{{ title }}</div> <!-- 有两个class属性相同的，只有前面一个生效--> <div class="title">{{ title }}</div> <!-- 元素名称--> <h1>{{ title }}</h1> <!-- 自定义元素名称--> <ickt>{{ title }}</ickt> <script type="text/javascript" src="vue.js">{{ title }}</script> <script type="text/javascript"> // 定义模型数据 var data = { title:'爱创课堂' }; // 一：实例化第一个vue var app = new Vue({ // 绑定视图 // el:'#app', // 1. id选择器 el:'.title', // 2. 类选择器 // el:'h1', // 3. 元素名称选择器 // el:'ickt', // 4 . 元素名称选择器 //绑定数据 data:data }); // 二：实例化第二个vue（这两个vue对象都针对.title,只有第一个生效，把第一个删除第二个才能生效） new Vue({ // 绑定视图 el:'.title', // 2. 类选择器 data:{ 'title':'前端培训' } }); </script> </body> </html>