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. Vector | Graph：蚂蚁首个开源Graph RAG框架设计解读

    检索增强生成(RAG:Retrieval Augmented Generation)技术旨在把信息检索与大模型结合,以缓解大模型推理"幻觉"的问题.近来关于RAG的研究如火如荼,支 ...

  2. unity持久化数据之XML和Excel

    unity持久化数据之XML public class XMLDataMananger: Singleton<XMLDataMananger> { protected XMLDataMan ...

  3. 如何将本地的项目，上传到github

    操作步骤: 1.github,创建一个仓库,复制仓库的地址 2.在要上传文件的目录,点击选择git bash here 3.输入[git clone],粘贴刚复制的仓库地址,clone成功后,会将仓库 ...

  4. ETL服务器连接GaussDB(DWS)集群客户端配置

    问题描述:给ETL的服务器上安装gsql的工具,用来连接GaussDB(DWS)集群,做数据抽取用 DWS:GaussDB(DWS) 8.2.1-ESL 1.获取软件包 登录FusionInsight ...

  5. ARM＋DSP异构多核——全志T113-i＋玄铁HiFi4核心板规格书

    核心板简介 创龙科技SOM-TLT113是一款基于全志科技T113-i双核ARM Cortex-A7 + 玄铁C906 RISC-V + HiFi4 DSP异构多核处理器设计的全国产工业核心板,ARM ...

  6. GaussDB(DWS)性能调优，解决DM区大内存占用问题

    本文分享自华为云社区<GaussDB(DWS)性能调优:DM区优化案例--维度表关联条件存在会计期>,作者: O泡果奶~. 当前DM(P1.P3.CBGDM)存在维度表与主表关联时使用会计 ...

  7. Java常见问题-基础

    JDK版本新特性: JDK1.4 正则表达式,异常链,NIO,日志类,XML解析器,XLST转换器 JDK1.5 自动装箱.泛型.动态注解.枚举.可变长参数.遍历循环 JDK1.6 提供动态语言支持. ...

  8. bean的二次加工-Spring5.X后置处理器BeanPostProcessor

    什么是BeanPostProcessor 是Spring IOC容器给我们提供的一个扩展接口 在调用初始化方法前后对Bean进行额外加工,ApplicationContext会自动扫描实现了BeanP ...

  9. C# 日期帮助类

    using System; using System.Data; namespace Erp.Ship.Tool { [Serializable] public enum DateInterval { ...

  10. axios和AJAX的区别

    axios和ajax的区别 Axios和Ajax都是用于处理网络请求和与服务器进行通信的技术,但它们之间存在一些关键的区别:12 一.技术基础:Ajax(Asynchronous JavaScript ...