vue(一)
标签(空格分隔): 前端笔记
vues是一套用于构建用户界面的渐进式框架。与其他大型框架的不同的是,vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用。vue也完全能够为复杂的单页应用提供驱动。
1、 vue基础
1.1 历史介绍
-
angular:2009年,
-
react:用户体验好
-
vue:2014年,
1.2 前端框架和库的区别
-
jquery库 --> dom操作+ 请求
-
art-template库:模板引擎
-
框架:全方位功能齐全
-
KFC的是世界里,库就是一个小套餐,框架就是全家桶
-
代码上的不同
-
一般使用库的代码,是调用某个函数,我们自己把控库的代码
-
一般使用框架,其框架在帮我们运行我们编写好的代码
-
1.3 vue 起步
-
引包
-
创建实例对象
-
绑定数据
<div>
<!--vue的模板语法 {{}} 双大括号 (插值表达式)-->
<p> {{msg}} </p>
<p> {{1+1}} </p>
<p> {{isTrue}} </p>
<p> {{str.split(' ').reverse().join(' ')}} </p>
<p> {{1>2?'真的':'假的'}} </p>
</div>
<script src="vue.js"></script>
<script>
//创建实例对象
//如果template中定义了内容,那么优先加载template,如果没有定义内容那么加载的是#app的模板
var app = new Vue({
el:"#app",
data:{
//数据属性,既可以是一个对象,也可以是一个函数
msg:"黄瓜",
isTrue:1==1,
str:"hello vue"
},
template:""
});
//除了数据属性 vue实例还暴露了一些有用的实例属性和方法,他们都有前缀$
console.log(app);
console.log($el);
console.log($data);
</script>
网友评论