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

本是古典何须时尚 2023-07-07 08:03 14阅读 0赞

## 一、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({ 
    	
    		
    	})

1.  引入vue.js库文件
    
        在vue官网上找到找到下面的图标，点安装

![在这里插入图片描述][20200223144244219.png]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]  
在你的.html文件里引入vue.min.js文件

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

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

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

<div id="app">
    		<div>{ { msg}}</div>
    		<div>{ { 3*5}}</div>
    </div>
    
    //{ {}}是插值表达式

**实例参数分析**

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

**插值表达式用法**

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

**vue代码运行原理分析**

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

[20200223144244219.png]: https://img-blog.csdnimg.cn/20200223144244219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200223144258979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0,size_16,color_FFFFFF,t_70