【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
【01】Vue 之hello wolrd的更多相关文章
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- vue.js及项目实战[笔记]— 01 vue.js
一. vue基础 1. 历史介绍 angular 09年,年份较早,一开始大家是拒绝的 react 2013年,用户体验较好,直接拉到一堆粉丝 vue 2014年,用户体验较好 前端框架与库的区别 j ...
- 01: vue.js安装
1.1 vue.js安装与基本使用 官网:https://cn.vuejs.org/ 1.使用之前,我们先来掌握3个东西是用来干什么的 1. npm: Nodejs下的包管理器. 2. webpack ...
- 01.VUE学习一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- （生鲜项目）01. Vue环境搭建
第一步: nodejs安装 https://nodejs.org/en/download/ 说明安装成功 第二步: cnpm 由于npm需要很多的依赖包,这些包下载都很慢,所以就有了cnpm : ht ...
- 01 vue入门
vue简介 官网上有介绍,这里粘出来 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...
- 01.vue数据绑定
Vue特点 渐进式: 渐进, 可以理解成一步一步的. 在使用Vue的时候, 我们不需要把整个Vue框架的东西都用上, 可以一步一步的根据需要慢慢的替换之前的代码. 自底向上逐层应用: 由底层开始, 把 ...
- 01 . Vue简介,原理,环境安装
简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立的功能或库 ...
- 01.Vue前端路由学习目标
路由的基本概念与原理 vue-router的基本使用 vue-router嵌套路由 vue-router动态路由匹配 vue-router命名路由 vue-router编程式导航 基于vue-rout ...
随机推荐
- 前端异常日志监控 - 使用Sentry
背景 现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题.当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题.在此前,听过一次鹅厂的前端人员,他们对QQ里面的网 ...
- iOS开发——应用间跳转
iOS开发过程中,我们经常碰到应用间跳转的情景: 1.使用第三方用户登录,跳转到需授权的App或跳转到分享app的对应页面 *需要用户授权,还需要"返回到调用的程序,同时返回授权的用户名.密 ...
- jquery的ajax请求
加载页面内容,如果不加选择器,会加载整个页面内容 加选择器会获取选择器内容 例如: <script> //可以获取json格式的文件 $.ajax({ type:"get&quo ...
- js时间转换
1. 将时间戳转换成日期格式 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己拼接起来就好了 ...
- 14.2-ELK 经典用法—企业自定义日志收集切割和mysql模块
本文收录在Linux运维企业架构实战系列 一.收集切割公司自定义的日志 很多公司的日志并不是和服务默认的日志格式一致,因此,就需要我们来进行切割了. 1.需切割的日志示例 2018-02-24 11: ...
- 2.在Cisco Packet Tracer里交换机默认网关的配置（实现跨网段telnet)
我们将在此拓扑图的基础上进行实验 大多命令都可用tab键位来补齐 1.分别给pc机设置好ip地址 pc2为:192.168.1.1 pc3为:192.168.2.1 两台计算机处在不同的网段之中 2. ...
- tp3.2框架中使用volist输出混乱的一点发现
在tp框架中,volist真的是一样很好用的东西,但是要是不注意,用起来也会有问题的 在Controller层中,将数据assign到页面 $this->assign('vo',$news); ...
- php中关于empty（）函数是否为真的判断
<?php// $a = 0; ==> 符合empty,empty($a)为true// $a = '0'; ==> 符合empty,empty($a)为true// $a = ...
- Ubuntu12.04下YouCompleteMe安装教程（部分）
1.通过源码编译安装VIM 开发中使用的是Ubuntu 12.04 LTS,通过sudo apt-get install vim安装的版本较低,不支持YCM,所以,用源码编译并安装最新的Vim. 卸载 ...
- 自定义token,保存到客户端的cookie中,
自定义token #原理自定义token,放入cookie中,不用存数据库 #token定义方式 >>>>> "加密字符串"|登陆用户id|用户登陆时 ...