Vue学习（一）挂载点、模板与实例
Vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue的官方文档很全面的。
Vue两大核心思想，组件化和数据驱动，组件化就是将一个整体合理拆分为一个一个小块（组件），组件可重复使用，数据驱动是前端的未来发展方向，释放了对DOM的操作，让DOM随着数据的变化自然而然的变化（尤神原话），不必过多的关注DOM，只需要将数据组织好即可。
打开：https://cn.vuejs.org官网
找到学习下面的教程,然后选择安装
选择版本
我要用的是HBuilder,如果没有可以下载一个。
新建一个工程，引入我们下载好的Vue.js。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName" />
<div>{{fullName}}</div>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:''
},
computed:{
fullName:function(){
return this.firstName + ' '+ this.lastName
}
}
})
</script>
</html>挂载点
el就是挂载点，element元素的意思，它的就是告诉实例要找页面上节点id为root的元素来插入替换；
模板
template 模板，就是插入到页面的内容，就是准备好的页面内容； 一般在工作中template是不写在实例里面，因为不好写，页面上id为root的div包含的内容默认就是template;
实例
new Vue() 创建出来一个实例，就是一个vue的组件；
大家可以看到挂载点，模板是写在实例里面，是实例的属性；
data,实例上的一些数据；
methods 实例上的方法；
改变data里的数据项this.xxx
vue的好处就是可以不要管dom,开发者可以把精力放在业务逻辑上面。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-05-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读