【01】Vue 之hello wolrd

1.1. Vue简介

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

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对象,具体你应该懂吧。



其他详情请参考:http://aicoder.com/vue/preview/all.html

转载地址:http://www.cnblogs.com/fly_dragon/p/6218551.html

时间: 2024-10-15 13:00:53

【01】Vue 之hello wolrd的相关文章

01.Vue初步学习

1.什么是Vue? Vue:一个可以帮助你实现前端MVVM的简单框架,易于上手. 2.入门使用 声明式渲染方式,使用{{}}标记占位符 <div id="app"> <p> <span>{{message}}</span> </p> </div> <script> var app = new Vue({ el:"#app", data:function(){ return {mess

vue.js精讲01

笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mvp mvvm mvx(mv*) vue 和 ag 的区别. 不用纠结什么好,项目适合什么就用什么. vue 简单 中文文档 指令: v-xxx 例子: html + json + vue实例 维护: 个人 适合: 移动 ag 上手难 英文文档 指令: ng-xxx 例子: 把所有属性和方法挂到 $s

关于Vue vuex vux 文档

01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vuejs.org/zh-cn/intro.html 03. vux  ------>>基于vue 和 we_ui<<----------- https://vuxjs.gitbooks.io/vux/content/ ps: 最近一直在用vux 写微信项目,虽然目前可以熟练的使用vux ,

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

自学Java后端开发,发现14 微服务电商[乐优商城]实战项目,在介绍完SpringCloud后就要肝前端基础知识ES6和Vue. 所以本篇入门Vue练习记录的过程,目的是供自学后端Java遇到Vue使用需求的时候加强一下Vue基本使用的能力. vue语法和生命周期与ajax异步请求 1.Vue的快速入门2.Vue的语法 插值表达式 事件的绑定 数据的显示 逻辑判断和循环输出3.Vue的生命周期 8个生命周期的执行点 4个基本的 4个特殊的4.axios的ajax异步请求 它和jquery的aj

Web前端+移动端全套视频教程

Web前端+移动端全套视频教程|12.小程序|01.小程序.rar|11.Vue|05.Vue实战练习.rar|04.Vue UI框架Element-UI.rar|03.Vue路由.rar|02.Vue网络请求.rar|01.Vue基础.rar|10.React|06.React网络请求Fetch.rar|05.React UI框架Antd.rar|04.React路由4.x.rar|03.React路由3.x.rar|02.React环境搭建.rar|01.React基础.rar|09.前端构

Vuex的引入及其仓库store的配置

以下是Vuex全局状态管理,数据共享具体操作: 官网:https://vuex.vuejs.org/zh/installation.html <!-- 以下是调用(获取/设置)共享数据的页面:01.vue --> <template> <div> <h3> Vuex全局状态管理,数据共享: 1,可以查看vuex官网:https://vuex.vuejs.org/zh/installation.html 2,引入vuex有两种方式: a,直接下载保存vuex.

我喜欢减肥我们来减肥吧

http://www.ebay.com/cln/honus.jyw4mvptb/cars/158313278016/2015.01.28.html http://www.ebay.com/cln/honus.jyw4mvptb/cars/158313282016/2015.01.28.html http://www.ebay.com/cln/honus.jyw4mvptb/cars/158313289016/2015.01.28.html http://www.ebay.com/cln/usli

百度回家看沙发沙发是减肥了卡斯加积分卡拉是减肥

http://www.ebay.com/cln/hpryu-caw8ke/cars/158056866019/2015.01.31 http://www.ebay.com/cln/xub.50x2l7cj/cars/158445650015/2015.01.31 http://www.ebay.com/cln/xub.50x2l7cj/cars/158445674015/2015.01.31 http://www.ebay.com/cln/xub.50x2l7cj/cars/1584456790

巢哑偕倥乇椭煞谙暗逞帕俸

IEEE Spectrum 杂志发布了一年一度的编程语言排行榜,这也是他们发布的第四届编程语言 Top 榜. 据介绍,IEEE Spectrum 的排序是来自 10 个重要线上数据源的综合,例如 Stack Overflow.Twitter.Reddit.IEEE Xplore.GitHub.CareerBuilder 等,对 48 种语言进行排行. 与其他排行榜不同的是,IEEE Spectrum 可以让读者自己选择参数组合时的权重,得到不同的排序结果.考虑到典型的 Spectrum 读者需求