Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
我的第一个Vue项目
使用Vue.js需要提前下载Vue.js文件
Vue.js官网.
注意事项:Vue.js是带警告的版本,体积稍大,一般用于开发环境,上线环境推荐使用Vue.min.js
体积更小且不包含警告提示。
准备工作完成现在开始第一个Vue页面
- 导入Vue.js文件,这里我使用的本地导入,也可以网络导入,具体方法查看官网的开发手册。
<script src="../js/vue.js"></script>
- 创建一个Vue的对象,设置根节点名称用于绑定组件
<script type="text/javascript">
//Vue.config.productionTip=false表示设置Vue的配置文件里的提示为否,不然一直报警告
Vue.config.productionTip=false;
//创建Vue实例
new Vue({
//el 用于绑定Vue实例的那个对象
el:'#root',
//data 代表当前Vue实例绑定的组件可以直接读取的值
data:{
name:'玛卡巴卡'
}
})
</script>
- 盒子ID跟根节点el相绑定
<div id="root">
<h1>
Hello,{{name}}
</h1>
</div>
{{}}双括号代表取data里同名的参数,若未找到会在页面上把他当字符输出。