自学vue.js,从零开始

作者: 啥啥啥娜娜 | 来源:发表于2017-09-19 14:28 被阅读145次

    介绍

    Vue.js 是什么

    Vue.js (读音 /vjuː/,类似于view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

    起步

    官方指南假设你已有 HTML、CSS 和 JavaScript 中级前端知识。如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来!之前有其他框架的使用经验对于学习 Vue.js 是有帮助的,但这不是必需的。

    引入方式:

    引入方式1:cdn引入,直接在页面引入链接

    引入方式2:下载引入,下载vue.js在本地

    (1)声明式渲染

    页面代码:

    页面输出:

    v-bind

    页面代码:

    页面输出:

    (2)条件与循环

    页面代码:

    v-if

    页面输出

    如果改成seen:false就看不到文字了

    v-for

    页面代码:

    输出效果:

    (3)处理用户输入:

    为了让用户和你的应用进行互动,我们可以用v-on指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法:

    v-on

    页面输出:

    点击按钮,文字发生颠倒

    注意在reverseMessage方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,你编写的代码不需要关注底层逻辑。

    v-model

    页面代码:

    页面输出:

    表单上方文字会跟随输入框改变

    (4)组件化应用构建


    相关文章

      网友评论

        本文标题:自学vue.js,从零开始

        本文链接:https://www.haomeiwen.com/subject/xambsxtx.html