一、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基本使用
步骤:
- 需要提供标签用于填充数据
<div id="app">
</div>
var vm = new Vue({
})
-
引入vue.js库文件
在vue官网上找到找到下面的图标,点安装
会出现两个版本,一个是开发版本,另一个是生产版本,我们使用生产版本就行,点击下载,之后把下载好的文件引入到你的项目里即可。
在你的.html文件里引入vue.min.js文件
<script src="js/vue.min.js"></script>
- 可以使用vue的语法做功能了
var vm = new Vue({
el:'#app',
data:{
msg:'Hello Vue',
msg1:'<h1>HTML</h1>'
}
})
- 把vue提供的数据填充到标签里面
<div id="app">
<div>{{msg}}</div>
<div>{{3*5}}</div>
</div>
//{{}}是插值表达式
实例参数分析
- el:元素的挂载位置(值可以是CSS选择器或者DOM元素)
- data:模型数据(值是一个对象)
插值表达式用法
- 将数据填充到HTML标签中
- 插值表达式支持基本的计算操作
vue代码运行原理分析
概述编译过程的概念(Vue语法–>原生语法)
Vue代码------------Vue框架-------->原生js代码