专栏首页cwl_JavaVueJS 概述与快速入门

VueJS 概述与快速入门

1.1 VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

官网:https://cn.vuejs.org/

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model) Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,

也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"> {{message}}</div>
<script>
    new Vue({
        el: '#app',
        //表示当前vue对象接管了div区域 
        data: {
            message: 'hello world'
            //注意不要写分号结尾 
        }
    });
</script>
</body>
</html>

1.4 插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。

Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

    <!-- 这是语句,不是表达式 -->
    {
        {
            var a = 1
        }
    }
    <!-- 流控制也不会生效,请使用三元表达式 -->
    {
        {
            if (ok) {
                return message
            }
        }
    }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速学习-视图解析

    cwl_java
  • 快速学习Oracle-视图

    我们尝试着修改视图但是发现是视图所查询的表的字段值被修改了。所以我们一般不会去修改视图。

    cwl_java
  • 快速学习-前端开发模式的发展

    最初的网页以HTML为主,是纯静态的网页。网页是只读的,信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。

    cwl_java
  • 2018 年前端开发五大趋势

    对于开发者而言,2017出奇的高效,不过2018年有望为IT领域带来更多发展。本文中,为了处理项目时紧跟潮流,我们会描述出每个前端编程人都需要关注的2018年J...

    我就是马云飞
  • 教你搞定Android自定义View

    Android所有的控件都是View或者View的子类,它其实表示的就是屏幕上的一块矩形区域,用一个Rect来表示,left,top表示View相对于它的par...

    三好码农
  • Suse 11下多路径及udev配置

        最近给客户基于SuSe 11 SP3下多路径部署Oracle 10g RAC。SuSe 11下用10g,也算一朵奇葩,连篇文档都比较难找,谁叫Oracl...

    Leshami
  • Lync下一代版本Skype for Business上手体验

    Office2016预览版只提供给部分报名参加内测的用户,现在微软已经开放了下载权限,打开https://connect.microsoft.com/direc...

    杨强生
  • 有哪些Java源代码看了后让你收获很多?

    曾经读过Erudika/para的源码,此源码托管在github,大致是2014年前后开源的云计算通用后端框架,基于spring boot体系,...

    慕容千语
  • 王小川:智能硬件走入“互联网化”误区

    王小川在“腾讯共享日”上分享了自己对智能硬件的看法,他认为,硬件创业者不应当迷信“互联网思维”,并提出了未来智能硬件的三个特征。 智能硬件的误区 误区一:免费 ...

    腾讯大讲堂
  • GitHub上有哪些优秀的爬虫项目?

    今天JAP君给大家安利一波福利!GitHub上优秀的爬虫项目大集合!!!大家赶快收藏一波!

    JAVAandPython君

扫码关注云+社区

领取腾讯云代金券