01Vue.js快速入门(一)Vue概念及Helloworld

1.1. Vue简介

Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方式都很有创新,另外Vue自身的一些绑定的语法、用法等都非常精炼,很容易上手,而且第三方的插件都非常丰富,社区非常活跃,最新的文档都有中文版本。而且Vue配合官方的和第三方的库可以实现单文件的组件化开发、SPA等现代化前端开发。 详情请参考Vue官网

1.2. Vue的入门demo

Vue

可以直接把它当做一个js库使用,所以它可以很容易的接入到你的项目或者单个页面中。甚至你可以只使用它的双向绑定功能。所以它很容易上手。

比如:我们有一个需求,一个网页上一个Div标签,我们有一个json对象存储数据,把json对象上的数据放到Div上去。

接下来是步骤:

第一步: 创建一个文件夹并创建一个html文件 比如:index.html.
当如你可以选择你自己的编辑器,我就用VSCode。

第二步:引入Vue库
<script src="https://unpkg.com/vue/dist/vue.js"></script>
当然了你可以直接下载Vue的js文件,推荐你直接用上面的cdn即可。

第三步:创建一个Div,给它一个id,比如:app

第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。

最终的代码如下:

<!DOCTYPE html> <!--第一步:创建文件夹及html文件-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门之Helloworld</title>
  <!--第二步:引入Vue库-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <!--第三步:创建一个Div-->
  <div id="app">
    <!--Vue的模板的绑定数据的方法, 类似于很多其他前端的模板,可以用两对花括号进行绑定Vue中的数据对象的属性 -->
    {{ message }}
  </div>

  <!--第四步:创建Vue的对象,并把数据绑定到上面创建好的div上去。-->
  <script>
    var app = new Vue({         // 创建Vue对象。Vue的核心对象。
      el: '#app',               // el属性:把当前Vue对象挂载到 div标签上,#app是id选择器
      data: {                   // data: 是Vue对象中绑定的数据
        message: 'Hello Vue!'   // message 自定义的数据
      }
    });
  </script>
</body>
</html>

最终的结果就是:

Hello Vue!

1.3. Vue的Helloworld总结

  • Vue构造函数的:选项el属性,就是element缩写,当前Vue对象挂载到哪个标签上的语法,支持CSS选择器或者dom对象,一般用id选择器选择当前页面的标签。
  • Vue的选项:data属性是自定义数据。这里我们只是演示了一个message属性,vue会把自定义的数据可以与html的模板数据进行绑定。
  • Vue 数据绑定的方式就是用 {{}},类似于handlebars.
  • 上面这个demo就是演示了Vue的绑定数据的基本模型。注意点,标签先创建好了之后,再创建Vue对象,具体你应该懂吧。

helloworld

联系老马 老马qq: 515154084 老马微信:请扫码

微信:Flydragon_malun

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏岑玉海

使用Ant编译Hadoop工程报错

  在win7用Ant编译hadoop工程的时候,遇到了一个报错,如下:   org.eclipse.core.runtime.CoreException: D...

3324
来自专栏我是攻城师

Hadoop+Hbase集群数据迁移问题

3148
来自专栏林德熙的博客

如何移动 nuget 缓存文件夹 修改链接配置NuGet CacheNuGet Configuration

本文告诉大家如何移动 nuget 缓存文件夹。 因为 nuget 文件夹一般比较大,现在我的 nuget 文件夹有 10 G,默认的 nuget 文件夹是在C盘...

341
来自专栏钟绍威的专栏

浅谈spring security 403机制一、无权限访问二、匿名访问三、有权限访问原因机制指定AccessDeniedHandler指定error-page情景原因结论

403就是access denied ,就是请求拒绝,因为权限不足 三种权限级别 一、无权限访问 <security:http security="none"...

40210
来自专栏星流全栈

先进的React GUI编辑器 — Structor

1412
来自专栏SDNLAB

ODL分布式集群底层实现分析

ODL控制器的分布式集群底层采用raft协议实现,为啥使用raft协议还没有明确说明,但是我们看内存数据库redis的集群也是才raft协议,因为其能够保证re...

4354
来自专栏草根专栏

发布 ASP.NET Core 2.x 应用到 Ubuntu

简单绍一下如何将ASP.NET Core 应用发布到Linux (Ubuntu)服务器上,都是文档的东西。

612
来自专栏Java成神之路

Java程序员常用工具集

我发现很多人没办法高效地解决问题的关键原因是不熟悉工具,不熟悉工具也还罢了,甚至还不知道怎么去找工具,这个问题就大条了。我想列下我能想到的一个Java程序员会用...

723
来自专栏BeJavaGod

权限设计(下) - 细说权限设计

什么是权限管理 一般来说,只要有用户参与的系统,那么都要有权限管理,尤其是一些后台的管理系统, 权限管理可以实现对用户访问系统的控制,按照安全规则或者相关策略的...

3716
来自专栏大闲人柴毛毛

Linux系统服务——Daemon

什么是Daemon? Daemon是Linux的一些系统服务,它们是一些常驻内存的进程。 Daemon分类 Daemon拥有两种分类方式,按照“daemon是...

2914

扫码关注云+社区