1、vue是什么?
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。也可以说是一个类库。
- 用于构建用户界面的渐进式框架
声明式渲染–>组件系统–>客户端路由–>集中式状态管理–>项目构建 - vue 的核心库只关注视图层
特别注意,Vue还是一款国产框架,非常难得啊。它的作者–尤雨溪。
Vue诞生于2014年,2015年10月27日才正式发布1.0.0版本。
2、Vue有哪些优点?
- 易用、灵活、高效
- 简单易上手
3、Vue的基本使用
Vue使用的基本步骤:
1、需要提供标签用于填充数据;
注意: 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据
2、引入Vue.js库文件;
注意:一定要先引入Vue文件 再使用Vue语法 因为存在作用域的问题
3、使用Vue的语法做功能;
new Vue() 创建一个Vue的实例;
在构造函数中以对象的形式做一些配置
4、利用Vue将数据渲染到页面上。
数据写在data 里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{mag}}</div>
<div>{{1+2}}</div> <!支持运算>
<script>
var vue = new Vue({
el: "#app",
data: {
mag: "hello vue!"
}
});
</script>
</body>
</html>
4、hello vue细节分析
1、实例参数分析
- el:元素的挂载位置(所谓挂载,就是将数据关联在页面中的某个标签里,值可以是CSS选择器或者是DOM元素)
- data:模型数据(值是一个对象)
2、插值表达式用法(也就是双花括号{{}})
- 将数据填充到HTML标签中;
- 插值表达式支持基本的计算操作;
3、vue代码运行原理分析
- 编译过程(Vue语法为什么能在浏览器中运行?)
- vue代码通过Vue框架才能转换为原生js代码