Vue .js 的官方文档中是这样介绍它的。
简单小巧的核心，渐进式技术拢，足以应付任何规模的应用。
简单小巧是指 vue.js 压缩后大小仅有 17k 。所谓渐进式（Progressive ），就是你可以
步、有阶段性地来使用 Vue.js ，不必一开始就使用所有的东西。随着本书的不断介绍，你会深刻感
受到这一点 ，这也正是开发者热爱vue.js的主要原因之一。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简
高效、实用， 至今仍有不少开发者在使用 。不过随着项目的扩大和时间的推移，出现了更复杂
的业务场景，比如 SPA （单页面富应用〉 组件解稍等。为了提升开发效率，降低维护成本，传
统的前端开发模式己不能完全满足我们的需求，这时就出现了如 Angular React 及我们要介绍
的主角 Vue.js
el:
更多参考官方api
https://cn.vuejs.org/v2/api/#data
 
Data: 实例的数据对象

完整代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>Vue 实例</title>

	</head>

	<body>

		<div id="app">

			<ul>

				<li v-for="book in books">{{ book.name }}</li>

			</ul>

		</div>

		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

		<script>

			new Vue({

				el: '#app',

				data: {

					books: [

						{ name: '《如何让富婆爱上我》'},

						{ name: '《如何让富婆练活儿》'},

						{ name: '《如何让富婆练更带劲》'},

					]

				}

			})

		</script>

	</body>

</html>

　　

Data binding and First application of Vue

学习任何一 种框架，从 Hello World 应用开始是最快了解该框架特性的途径，我们先从段简单的 HTML 代码开始，感受 Vue. 最核心的功能。
 

完整代码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>Vue 实例</title>

	</head>

	<body>

		<div id="app">

			<!-- <ul>

				<li v-for="book in books">{{ book.name }}</li>

			</ul> -->

			<input type="text" v-model ="name" placeholder="your name" />

			<h1>Hello, {{ name}}</h1>

		</div>

		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

		<script>

			new Vue({

				el: '#app',

				data: {

					// books: [

					// 	{ name: '《如何让富婆爱上我》'},

					// 	{ name: '《如何让富婆练活儿》'},

					// 	{ name: '《如何让富婆练更带劲》'},

					// ]

					name: ''

				}

			})

		</script>

	</body>

</html>

　　实例与数据

Vue 的生命周期钩子与之类似，比较常用的有：

• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。

需要初始化处理一些数据时会比较有用，后面章节将有介绍．

• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始

• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

这些钩子与 el data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它
Vue 实例：
 

插值与表达式

使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑
定的数据实时显示出来，例如：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>Vue 实例</title>

	</head>

	<body>

		<div id="app">

			<!-- <ul>

				<li v-for="book in books">{{ book.name }}</li>

			</ul> -->

			<!-- {{ date }} -->

			<!-- <span v-html="link"></span>

			<br>

			<span v-pre>{{this text not to be transaction}}</span> -->

			<!-- <input type="text" v-model ="book in books" placeholder="your name" />

			<h1>Hello, {{ books}}</h1>

			<h2></h2> -->

			<!-- {{ number /10}}

			<br>

			{{ isOk ? '确定' : '取消'}}

			<br>

			{{ text.split(',').reverse().join(',')}} -->

			<!-- {{ date | formatDate }} -->

			<p v-if="show"> 显示这段文本</p>

		</div>

		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

		<script>

			// var myData = {

			// 	a: '21'

			// }

			var padDate = function(value) {

				return value < 10 ? '0' + value : value;

			};

			var app  = new Vue({

				el: "#app",

				data: {

					// date: new Date()

					show: true

				}

				// filters:{

				// 	// value 是要过滤的数据

				// 	formatDate: function (value) {

				// 		var date = new Date(value);

				// 		var year = date.getFullYear();

				// 		var month = padDate(date.getMonth() + 1);

				// 		var day = padDate(date.getDate());

				// 		var hours = padDate(date.getHours());

				// 		var minutes = padDate(date.getMinutes());

				// 		var seconds = padDate(date.getSeconds());

				// 		// return data

				// 		return year +'-'+ month +'-'+ day  +'' +hours +':' + minutes +':' + seconds;

				// 	}

				// },

				// mounted:function(){

				// 	var _this = this;

				// 	this.timer = setInterval(function() {

				// 		_this.date = new Date(); // 修改数据date

				// 	},1000);

				// },

				// beforeDestroy:function(){

				// 	if(this.timer){

				// 		clearInterval(this.timer); // 实例销毁前清除定时器

				// 	}

				// }

				// data: {

				// 	number: 100,

				// 	isOk: false,

				// 	text: '123,321'

				// }

				// el: '#app',

				// /* data: {

				// 	name: ''

				// } */

				// data:{

				// 	/* books: [

				// 		{ name: '《如何让富婆爱上我》'},

				// 		{ name: '《如何让富婆练活儿》'},

				// 		{ name: '《如何让富婆练更带劲》'},

				// 	] */

				// 	date: new Date (),

				// 	link: '<a href="#"> this is link </a>'

				// },

				// mounted:function(){

				// 	var _this = this; // 生命变量指向Vue实例this，

				// 	this.timer = setInterval(function() {

				// 	_this.date = new Date(); // 修改数据date

				// 	}, 1000);

				// },

				// beforeDestroy:function(){

				// 	if(this.timer) {

				// 		clearInterval(this.timer);// Vue实例销毁清除定时器

				// 	}

				// }

				/* data: {

					a: 2

				},

				created:function(){

					console.log(this.a);

				},

				mounted:function(){

					console.log(this.$el)

				} */

			})

			/* console.log(app.a);

			app.a = 2;

			myData.a = '1'

			console.log(app.a + 123); */

		</script>

	</body>

</html>

　　v-bind

v-if

v-on

v-on: - Function

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。
从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
参考：
https://cn.vuejs.org/v2/api/#v-on

VUE learn的更多相关文章

  1. Vue avoid mutating a prop directly since the value will be overwritten

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. React笔记03——React实现TodoList

    1 什么是JSX语法? 原生JS中,要向页面中挂载html标签,标签一定是被引号''包起来的:document.getElementById('root').append('<div>he ...

  3. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

  4. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  5. Vue.js 整理笔记

    以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整 ...

  6. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  7. Vue.js介绍样码

    了解一下,其它的什么SASS,COMPASS,WEBPACK,VUE.JS都看看,了解一下前端开发的一些知识点吧. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. Vue 入门指南

    英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连 ...

  9. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

  10. 使用vue给导航栏添加链接

    如下面的导航栏,使用vue技术给该导航栏增加链接: js代码为: navigation:function(){ new Vue({ el: '#navUl', data: { menuData:{ ' ...

随机推荐

  1. Illegal character ((CTRL-CHAR, code 31))问题排查 gzip接口返回 RestTemplate GET POST请求

    Illegal character ((CTRL-CHAR, code 31))问题排查 gzip接口返回 #接口返回gzip方式 private static final String ENCODI ...

  2. python post or get请求demo

    # python post or get请求demo import requests; import json; headers={ "Content-Type":"ap ...

  3. DotNet Web应用单文件部署系列

    目录 一.    pubxml文件配置 二.    打包wwwroot文件夹 三.    混淆dll文件 四.    csproj文件配置 五.    批处理 六.    Windows服务安装 七. ...

  4. Golang支持重试的http客户端ghttp

    简介 官方仓库:https://github.com/GuoFlight/ghttp 重试的逻辑依赖了github.com/avast/retry-go 入门 client := ghttp.Clie ...

  5. Spring声明事务和分布式事务处理技术

    Spring声明事务的两种方式 方式一.传统的编程式事务管理: 需要手动编写代码在业务层注入事务管理模板(一般不用) 方式二.基于 AOP 技术实现的声明式事务管理: Spring 声明式事务管理在底 ...

  6. yb课堂 订单列表开发，完结 《四十五》

    Order.vue <template> <div class="main"> <!--订单列表--> <div class=" ...

  7. .NET开源、简单、实用的数据库文档生成工具

    前言 今天大姚给大家分享一款.NET开源(MIT License).免费.简单.实用的数据库文档(字典)生成工具,该工具支持CHM.Word.Excel.PDF.Html.XML.Markdown等多 ...

  8. Excel VBA编程常用语句300句

    定制模块行为 1. Option Explicit '强制对模块内所有变量进行声明 Option Private Module '标记模块为私有,仅对同一工程中其它模块有用,在宏对话框中不显示 Opt ...

  9. mysql 忘记root密码怎么办？

    忘记root可以跳过grant table来登录 1.打开命令行输入以下命令 mysqld -nt --grant-skip-tables 2.在打开一个新命令行,输入以下命令可以登录, mysql ...

  10. docker 构建镜像拉取镜像生成实例

    实战tomcat镜像 准备镜像文件 编写dockerfile 首先将tomcat和jdk软件包上传 创建tomcat文件夹,将文件传送到tomcat文件夹 创建Dockerfile(不用加-f指定)文 ...