一、vue.js是什么
Vue（读音类似于View）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或者既有项目整合。
二、起步
注意：官方指南假设你已经了解关于HTML、CSS和JavaScript的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意，还是掌握好基础知识再来学习吧！
尝试Vue.js最简单的方法是使用Hello World例子。你可以在浏览器新标签页中打开它。跟着学习基础用法。或者你也可以创建一个.html文件，然后通过如下的方式引入vue：
(1)、开发环境版本，包含了有帮助的命令警告
<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
(2)、生产环境版本，优化了尺寸和速度
<script src=“https://cdn.jsdelivr.net/npm/vue”></script>
二、声明时渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
<div id=”app”>{{message}}</div>
<!– 使用Vue –>
<script>
var app = new Vue({
el:”#app”,
data:{
message:”Hello World！”
}
})
</script>
这样我们就创建成功了第一个我们自己的Vue应用！看起来这跟渲染一个字符串模板非常类似，但是vue在背后做了大量的工作。现在数据和DOM已经建立了联系，所有东西都是响应式的。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
除了文本插值，我们还可以像这样来绑定元素 attribute：
<div id=”app-2″>
<span v-bind:title=”message”>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el:”#app-2″,
data:{
message:’页面加载于 ‘ + new Date().toLocaleString()
}
})
这里我么遇到一点新东西。你看到的v-bind attribute被称为指令。指令带有前缀v-，表示他们是vue提供的特殊attribute。可能你也已经猜到了，他们会在渲染的DOM上应用特殊的响应式行为。在这里，该指令的意思是“将这个元素点的的title attribute和vue实例的message 保持一致。”
最后是交流公众号，大家可以关注一下
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/119168.html
