vue.js 基础
vue (读音 /vju/, 类似于 view) 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用. Vue 的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合. 另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动.
起步
假设你已了解关于 html,CSS 和 JavaScript 的中级知识. 如果你刚开始学习前端开发, 将框架作为你的第一步可能不是最好的主意 -- 掌握好基础知识再来吧! 之前有其它框架的使用经验会有帮助, 但这不是必需的.
尝试 Vue.JS 最简单的方法是使用 JSFiddle 上的 Hello World 例子. 你可以在浏览器新标签页中打开它, 跟着例子学习一些基础用法. 或者你也可以创建一个 .HTML 文件, 然后通过如下方式引入 Vue:
或者:
如果你喜欢交互式的东西, 你也可以查阅这个 Scrimba 上的系列教程, 它揉合了录屏和代码试验田, 并允许你随时暂停和播放.
声明式渲染
在 Scrimba 上尝试这节课
Vue.JS 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.
- {{ message }}
- var App = new Vue({
- el: '#App',
- data: {
- message: 'Hello Vue!'
- }
- })
- Hello Vue!
我们已经成功创建了第一个 Vue 应用! 看起来这跟渲染一个字符串模板非常类似, 但是 Vue 在背后做了大量工作. 现在数据和 DOM 已经被建立了关联, 所有东西都是响应式的. 我们要怎么确认呢? 打开你的浏览器的 JavaScript 控制台 (就在这个页面打开), 并修改 App.message 的值, 你将看到上例相应地更新.
处理用户输入
在 Scrimba 上尝试这节课
为了让用户和你的应用进行交互, 我们可以用 v-on 指令添加一个事件监听器, 通过它调用在 Vue 实例中定义的方法:
{{ message }}
逆转消息
- var app5 = new Vue({
- el: '#App-5',
- data: {
- message: 'Hello Vue.JS!'
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
- }
- }
- })
- Hello Vue.JS!
与自定义元素的关系
你可能已经注意到 Vue 组件非常类似于自定义元素 -- 它是 web 组件规范的一部分, 这是因为 Vue 的组件语法部分参考了该规范. 例如 Vue 组件实现了 Slot API 与 is 特性. 但是, 还是有几个关键差别:
Web 组件规范仍然处于草案阶段, 并且未被所有浏览器原生实现. 相比之下, Vue 组件不需要任何 polyfill, 并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致. 必要时, Vue 组件也可以包装于原生自定义元素之内.
Vue 组件提供了纯自定义元素所不具备的一些重要功能, 最突出的是跨组件数据流, 自定义事件通信以及构建工具集成.
我们刚才简单介绍了 Vue 核心最基本的功能 -- 本教程的其余部分将涵盖这些功能以及其它高级功能更详细的细节, 所以请务必读完整个教程!
来源: https://www.2cto.com/kf/201809/779199.html