1.Vue:

定义:渐进式JavaScript框架

渐进式:

定义:声明渲染 组件系统 客户端路由 集中式状态管理 项目构建

2.MVVM

定义
M Model（服务器上的业务逻辑操作）
V View（页面）
MV ViewModel（Model与View之间核心枢纽，比如Vue.js）

3.指令: 指令的本质是自定义属性

4.闪动

问题产生：出现模版语法{{msg}}

解决思路：使用v-cloak指令

解决问题原理：先隐藏，替换好值之后在显示

demo

code

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<div id="app">

		<div v-cloak>

			{{msg}}

		</div>

		</div>

		<style type="text/css">

			[v-cloak]{display: none;}

		</style>

		<script type="text/javascript" src="js/vue.js">

		</script>

		<script type="text/javascript">

			var vu = new Vue({

				el:"#app",

				data:{

					msg:"hello  vue"

				},

			});

		</script>

	</body>

</html>

5.数据绑定指令

v-text:填纯文本,属于html片段

v-html:填写html,属于完整html

v-bind:填写属性,属于html片段

v-pre:如果原始数据,跳过编译

v-once:如果显示的信息后续不需要再修改，使用v-once，这样可以提高性能。

demo:

code

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<div id="app">

		<div v-text="msg"></div>

		<div v-html="html"></div>

		<a v-bind:href="link1">这是v-bind</a>

		<div v-pre>{{preInfo}}</div>

		<div v-once>{{onceInfo}}</div>

		</div>

	</body>

	<script type="text/javascript" src="js/vue.js"></script>

	<script type="text/javascript">

		var vm = new Vue({

			el:"#app",

			data:{

				link1:"https://www.cnblogs.com/MDD-Blog/",

				img:"./img/logo.png",

				msg:"这是v-text",

				html:"<h1>这是v-html</h1>",

				preInfo:"这是v-pre",

				onceInfo:"这是v-once"

			},

		});

	</script>

</html>

6.双向数据绑定

原理：v-model ----> vue ----> data{k:v,}

demo

code

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div class="app">

			<div v-text="msg"></div>

			<input type="text" v-model="msg"/>

		</div>

		<script type="text/javascript" src='js/vue.min.js'></script>

		<script type="text/javascript">

			 var vm = new Vue({

				 el:".app",

				 data:{

					  msg : "hello world",

					  message: "hello vue",

					 },

			 });

		</script>

	</body>

</html>

7.事件绑定

v-on:事件名="方法" 事件名：点击: click 移动: mouseenter 双击: dbclick

demo1: 事件函数调用

code:事件函数调用

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div class="app">

			<div> {{num}} </div>

			<button v-on:click="add()">1.加一</button>

			<button v-on:click="reduce">减一</button>

		</div>

		<script type="text/javescript" src='js/vue.min.js'>

		</script>

		<script type="text/javascript">

			 var vm = new Vue({

				el:".app", /* 元素的挂载位置 */

				data:{

					  num:15,

					 }, /* 模型数据(值是一个对象) */

				methods:{

					add:function(){

						this.num++

					},

					reduce:function(){

						this.num--

					}

				}

			 });

		</script>

	</body>

</html>

demo2: 事件函数传参

code:事件函数传参

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div class="app">

			<div> {{num}} </div>

			<button v-on:click="add">1.加一</button>

			<button v-on:click="reduce(2, $event)">减二</button>

		</div>

		<script type="text/javescript" src='js/vue.min.js'>

		</script>

		<script type="text/javascript">

			 var vm = new Vue({

				el:".app", /* 元素的挂载位置 */

				data:{

					  num:15,

					 }, /* 模型数据(值是一个对象) */

				methods:{

					add:function(event){

						//  这里 this 是 vue 的实例对象

						console.log(event.target.innerHTML)

						this.num++

					},

					reduce:function(num2, e){

						this.num-=num2

					}

				}

			 });

		</script>

	</body>

</html>

注意：

  <button v-on:click="reduce(2, $event)">减二</button>  // $event为事件参数必须放到末尾

v-if

<div id="app">

    <div v-if="name === 'a'">

      a

    </div>

    <div v-else-if="name === 'b'">

      b

    </div>

    <div v-else-if="name === 'c'">

      c

    </div>

    <div v-else>

                不是a或b或c

    </div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    name: 'c'

  }

})

</script>

v-show

code:

<h1 v-show="ok">Hello!</h1>

v-if和v-show的区别

v-if :每次都会重新删除或者创建元素

v-show:每次不会重新进行DOM元素的删除和创建操作，只是切换了元素的 display:none 样式

v-for

demo:



code:

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

	</head>

	<body>

		<div id="app">

			<div >

				<label>ID:

					<input type="text" v-model="id" />

				</label>

				<label>NAME:

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

				</label>

				<input type="button" v-on:click="add" value="添加"/>

			</div>

			<p v-for="item in infos" v-bind:key="item.id">

				<input type="checkbox" />

				{{ item.id }}

			</p>

		</div>

	</body>

	<script type="text/javascript" src='js/vue.js'></script>

	<script type="text/javascript">

		var vm = new Vue({

			el:"#app",

			data:{

				id:"",

				name:"",

				infos:[

					{id:1,name:"11"},

					{id:2,name:"22"},

					{id:3,name:"33"},

					{id:4,name:"44"},

				],

			},

			methods:{

				add:function(){

					// 列表尾部添加

					// this.infos.push({id:this.id, name:this.name})

					// 列表头部添加

					this.infos.unshift({id:this.id, name:this.name})

				},

			}

		})

	</script>

</html>

vue在html使用的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

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

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

  7. 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  8. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

随机推荐

  1. python-网络安全编程第五天（爬虫模块BeautifulSoup）

    前言 昨晚学的有点晚 睡得很晚了,今天早上10点多起来吃完饭看了会电视剧就瞌睡了一直睡到12.50多起来洗漱给我弟去开家长会 开到快4点多才回家.耽搁了不少学习时间,现在就把今天所学的内容总结下吧. ...

  2. sqlilab less28 less28a

    less-28  less-28a 二者相差不大 单引号小括号包裹,黑名单过滤--,#,空格,union空格select(不区分大小写) less-28的黑名单 less-28a的黑名单 %a0,不被 ...

  3. 去年去阿里面试，被问到java 多线程，我是这样手撕面试官的

    1.多线程的基本概念 1.1进程与线程 程序:是为完成特定任务,用某种语言编写的一组指令的集合,即一段静态代码,静态对象. 进程:是程序的一次执行过程,或是正在运行的一个程序,是一个动态的过程,每个程 ...

  4. 推荐一款比迅雷下载速度快的mac下载器

    Folx和迅雷是2款支持在Mac系统上进行文件资源下载的工具,两者都支持BT种子资源的下载和直链下载,但Folx还另外支持了下载计划的自定义和智能限速功能.本文主要是为了比较Folx和迅雷在下载同一资 ...

  5. Math对象-JavaScript

    Math 是一个内置对象,它拥有一些数学常数属性和数学函数方法.Math 不是一个函数对象. Math 用于 Number 类型. Math 的所有属性与方法都是静态的. 属性 Math.E 欧拉常数 ...

  6. jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....

     $.ajax() $.Callbacks() $.Deferred() .then() $.when() ---------------------------------------------- ...

  7. Django踩坑记录2

    错误如下 OperationalError no such table 解决方法: 首先执行: python manage.py makemigrations 再执行 python manage.py ...

  8. 自动化运维工具之Puppet常用资源（二）

    前文我们了解了部分puppet的资源的使用,以及资源和资源的依赖关系的定义,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14071459.html:今天我们继 ...

  9. Python中repr(变量)和str(变量)的返回值有什么区别和联系

    Python中repr(变量)和str(变量)都返回一个描述对象的字符串,二者有关联又有不同.由于Python3.0后都是新式类,我们的分析也是基于新式类进行的.基于object派生的新式类中二者之间 ...

  10. Python中str类型的字符串写入二进制文件时报TypeError错的处理方式

    在用二进制模式打开文件情况下,写入一个str对象时报错:TypeError: a bytes-like object is required, not 'str' 出现该问题是因为Python严格区分 ...