一、Vue简介
1、Vue是什么
一套用于构建用户界面的渐进式JavaScript框架
渐进式:可以自底向上逐层的应用
简单应用:只需一个轻量小巧的核心库
复杂应用:引入各式各样的Vue插件
2、Vue特点
1、组件化模式,便于维护,复用
2、声明式编码,无需直接操作DOM
3、在数据与页面DOM之间实现虚拟DOM,适应数据的变化(diff算法优化页面的变化)
二、初识Vue:
1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3、root容器里的代码被称为【Vue模板】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>001</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
初识Vue:
1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2、root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3、root容器里的代码被称为【Vue模板】
-->
<!--准备一个容器-->
<div id="root">
<h1>{{name}} and {{age}}</h1>
</div>
<script type="text/javascript" >
//阻止启动时的提示
Vue.config.productionTip = false
//创建Vue实例
new Vue({
el:'#root',//el用于指定实例为那个容器服务
data:{//data中存储数据,数据供el所指的容器使用
name:'001',
age:19
}
})
</script>
</body>
</html>