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. 关于Lecture2建立一个Git远程仓库的补充

    Smiling & Weeping ---- 心之何如,有似万丈迷津, 遥亘千里. 其中并无舟子可渡人, 除了自渡,他人爱莫能助. Git 远程仓库(Github) Git 并不像 SVN 那 ...

  2. 06-Python类与对象

    什么是类 百度百科: 类是对象的抽象,对象是对客观事物的抽象. 用通俗的话来说: 类是类别的意思,是数据类型. 对象是类别下的具体事物. 也就是说: 类是数据类型,对象是变量. 比如: 自定义一种数据 ...

  3. Java面试知识点（二）super 和 this 关键字

    this this 是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this 的用法在 java 中大体可以分为 3 种: 普通的直接引用 这种就不用讲了,this 相当于是指向 ...

  4. 【Playwright+Python】手把手带你写一个自动化测试脚本

    ​ 如何使用代理方式打开网页 在 playwright.chromium.launch() 中传入 proxy 参数即可,示例代码如下: 1.同步写法: 1 from playwright.sync_ ...

  5. Freertos学习：03-任务

    --- title: rtos-freertos-03-任务 EntryName: rtos-freertos-03-task date: 2020-06-20 09:15:07 categories ...

  6. unp.h的安装以及第一个程序的运行

    unp.h的安装以及第一个程序的运行 源代码下载以及编译 点击此处下载源代码 解压到本地文件夹,如果访问不了GitHub的话就用我搬到gitee的仓库吧 git clone https://gitee ...

  7. P7687 题解

    考场上数组开大了直接 MLE 了,气. 考虑把 A,B 两种服务分开算,一个边双连通分量内的点如过有一个有服务,那么整个联通分量就都有服务. 然后按边双联通分量缩点后原图变成树,一条边是关键路线当且仅 ...

  8. 羊城杯初赛部分misc

    羊城杯初赛部分misc Ez_misc i春秋刚考过的CVE,win11截图漏洞CVE-2023-21036(acropalypse) https://github.com/frankthetank- ...

  9. Curve 替换 Ceph 在网易云音乐的实践

    Curve 块存储已在生产环境上线使用近三年,经受住了各种异常和极端场景的考验,性能和稳定性均超出核心业务需求预期 网易云音乐背景 网易云音乐是中国领先的在线音乐平台之一,为音乐爱好者提供互动的内容社 ...

  10. ffmpeg一些笔记： 代码调试数据

    1.AAC,MP3他的解码数据格式不支持,程序中给的是这个AV_SAMPLE_FMT_FLTP,  Screen-Cpature-Recoder的codec-id为AV_CODEC_RAW_VIDEO ...