Vue简述

一、 Vue概述

Vue：渐进式 JavaScript 框架

官网：https://cn.vuejs.org/v2/guide/

声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建

• 易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue
• 灵活：在一个库和一套完整框架之间自如伸缩
• 高效： 20kB 运行大小，超快虚拟 DOM

二、基本使用

传统开发模式对比

原生js：

<div id="msg">div>

<script type="text/javascript"> 
	var msg = 'Hello Word';
	var div = document.getElementById('msg');
	div.innerHTML = msg;
script>

jQuery:

<div id="msg">div>

<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript" > 
	var msg = 'Hello';
	$('#msg').html(msg);
script>

Vue:

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

<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript" > 
	new Vue({
		el: '#app',
		data: {
			msg : HelloWorld
		}
	})
script>

1.实例参数分析

• el ：元素的挂载位置（值可以是 CSS 选择器或者 DOM 元素）
• data ：模型数据（值是一个对象）

2.插值表达式用法

• 将数据填充到HTML标签中
• 插值表达式支持基本的计算

3. Vue代码运行原理分析

• 概述编译过程的概念（vue语法→原生js）

vue框架

vue代码

vue代码