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. CNN --入门MNIST识别

    Smiling & Weeping ---- 下次你撑伞低头看水洼, 就会想起我说雨是神的烟花. 简介:主要是看刘二大人的视频讲解:https://www.bilibili.com/video ...

  2. UITableView的使用样例（简易向）

    功能实现 构建一个UITableView,并使其默认显示a,b,c--.. 构建一个按钮,点击后列表变为英文字母 构建一个按钮,点击后列表变为数字 基本概念 实现前头文件需要签订协议(如何签订向后看) ...

  3. Nuxt3 的生命周期和钩子函数（二）

    title: Nuxt3 的生命周期和钩子函数(二) date: 2024/6/26 updated: 2024/6/26 author: cmdragon excerpt: 摘要:本文深入介绍了Nu ...

  4. python基础-集合set { }

    集合的定义和操作 集合的特性: 元素数量 支持多个 元素类型 任意 下标索引 支持 重复元素 不支持 可修改性 支持 数据有序 否 使用场景 不可重复的数据记录场景 # 定义集合 my_set = { ...

  5. win11添加开机自启动

    方法1 win + R 打开运行,输入 shell:startup 会打开一个文件夹 将想要启动的程序快捷方式放进文件夹 在设置里面搜索"启动",可以看到开机启动项,确认已经打开. ...

  6. .Net Core 全局捕获异常-中间件

    1.代码版本 .Net Core 版本 2.2 2.目录结构 3.定义中间件 新建一个类 CustomerExceptionMiddleware.cs /// <summary> /// ...

  7. 随机数据下 Sqrt Tree 的平替实现

    原理 在随机数据下,把原序列分成 \(\sqrt n\) 个块,维护每个块的前缀后缀最大值,那么,在随机询问下,对于在一个块中的询问,暴力查询. 复杂度 概率 $ n ^ {-\frac{1}{2}} ...

  8. MySQL与Redis数据双写一致性工程落地案例

    复习-面试题 多个线程同时去查询数据库的这条数据,那么我们可以在第一个查询数据的请求上使用一个 互斥锁来锁住它. 其他的线程走到这一步拿不到锁就等着,等第一个线程查询到了数据,然后做缓存. 后面的线程 ...

  9. 全新发布！桌面端效率工具RunFlow

    RunFlow是一款跨平台的生产力工具,可以启动应用程序和搜索文件等,类似于Windows平台的Wox和PowerToys,同样也类似于Mac平台的Alfred和Raycast.但我们并不与这些工具相 ...

  10. redis基本数据结构-集合set

    redis基本数据结构-集合set 特性 一个集合键最多存储 2^32 - 1 个字符串值 元素在集合内无序(哈希表-链地址法解决冲突) 元素在集合内唯一 向集合添加元素 sadd key value ...