Vue入门第一天-----Vue概述及基本使用

一、Vue概述

Vue是国产框架，尤雨溪是Vue.js的创建者。2014年2月，Vue.js正式发布；2015年10月27日，正式发布1.0.0版本；2016年4月27日，发布2.0的预览版本。

Vue:渐进式JavaScript框架

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

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

二、Vue基本使用

步骤：

1. 需要提供标签用于填充数据

<div id="app">
			
</div>

var vm = new Vue({
     
	
		
	})

2. 引入vue.js库文件

    在vue官网上找到找到下面的图标，点安装
   

会出现两个版本，一个是开发版本，另一个是生产版本，我们使用生产版本就行，点击下载，之后把下载好的文件引入到你的项目里即可。

在你的.html文件里引入vue.min.js文件

<script src="js/vue.min.js"></script>

3. 可以使用vue的语法做功能了

var vm = new Vue({
     
	el:'#app',
	data:{
     
		msg:'Hello Vue',
		msg1:'
HTML
'
		}
	})

4. 把vue提供的数据填充到标签里面

<div id="app">
		<div>{
     {
     msg}}</div>
		<div>{
     {
     3*5}}</div>
</div>

//{
     {}}是插值表达式

实例参数分析

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

插值表达式用法

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

vue代码运行原理分析

概述编译过程的概念（Vue语法–>原生语法）
Vue代码------------Vue框架-------->原生js代码