自学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,从零开始

    介绍 Vue.js 是什么 Vue.js (读音 /vjuː/,类似于view) 是一套构建用户界面的渐进式框架。...

  • Vue.js完全自学手册

    阿里云大学免费课程:Vue.js完全自学手册 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue....

  • 想从零开始学JAVA,应该怎么学?

    想从零开始学java的同学,无论你是想自学,还是参加培训,或者通过自学+上课的方式,以下几点我觉得应该都适用。 从...

  • 一:Vue中的join(),reverse()与 split()

    Java自学的网站Java全栈工程师 | 以实例驱动学习 | how2j.cn Html: Vue.js: 1、s...

  • XPosed框架中的方法运用

    从零开始自学了半年Android逆向反编译,XPosed框架中的几个常见的反射方法 一、对Class类的HOOK反...

  • 从零开始搭建vue.js

    第一步、先安装node.js 第二步、安装vue.js 使用NPM安装 NPM: NPM是随同NodeJS一起安装...

  • vue.js自学 Day1

    对vue.js这个前端框架的基本了解 作者 :尤雨溪2014年2月开源了vue.js,vue.js 的核心是一个允...

  • 自学简笔画第2周

    今天呆在家里整理第二周自学简笔画的作品:自己喜欢做的事,即使从零开始,持之以恒的坚持,会慢慢的找到感觉...

  • 别怕,就这样玩转Excel办公

    本书从零开始,完全从“读者自学”的角度出发,力求解决初学读者“学得会”与“用得上”,并且还要“玩得转”3个关键问题...

  • 【同人插画】 探险时光的角色哪个是你眼熟的呢?

    画师 ji-hum 如有侵权请私信,我们及时删除处理 想练习更多绘画创作技巧,从零开始自学画画,掌握更多绘画的基础...

网友评论

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

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