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. 插件Spire.PDF帮你高效搞定PDF打印

    Spire.PDF介绍 Spire.PDF是一个专业的PDF组件,能够独立地创建.编写.编辑.操作和阅读PDF文件,支持 .NET.Java.WPF和Silverlight.Spire.PDF的PDF ...

  2. CorelDRAW常用工具之渐变工具

    我们在进行宣传单页或者LOGO等等各种平面设计时,颜色的使用是极为重要的一方面.有些新手可能还不知道怎么填充多种颜色的渐变,有的背景色不止2个颜色渐变,而是由多种颜色调成的. 我们在画布上画两个图形, ...

  3. ABBYY FineReader 15 中保存和导出PDF文档的小细节

    运用ABBYY FineReader OCR文字识别软件,用户能将各种格式的PDF文档保存为新的PDF文档.PDF/A格式文档,以及Microsoft Word.Excel.PPT等格式.在保存与导出 ...

  4. 理解go语言的shellcode加载器

    序言 本文假设你知道unsafe包常见函数的用法,若否,请查看 https://books.studygolang.com/gopl-zh/ch13/ch13-01.html  第13章. 例子和代码 ...

  5. C语言讲义——结构体struct

    结构体是一种变量类型,可以包含多个变量(变量类型不必相同). 结构体的关键字是struct也是一种值类型. 例:设计一个表示"书本"的结构体: structBook { chari ...

  6. Java多线程中的wait/notify通信模式

    前言 最近在看一些JUC下的源码,更加意识到想要学好Java多线程,基础是关键,比如想要学好ReentranLock源码,就得掌握好AQS源码,而AQS源码中又有很多Java多线程经典的一些应用:再比 ...

  7. 跟随杠精的视角一起来了解Redis的主从复制

    不想弹好吉他的撸铁狗,都不是好的程序猿 虽然说单机的Redis性能很好,也有完备的持久化机制,那如果你的业务体量真的很大,超过了单机能够承载的上限了怎么办?不做任何处理的话Redis挂了怎么办?带着这 ...

  8. 微信小程序 下拉刷新

    <scroll-view class='scroll-view-container' scroll-y="true" bindscrolltolower='scrollToL ...

  9. cookie 与session

    Django 操作cookie,session HTTP协议四大特性: 1.基于TCP.IP作用与应用层的协议 2.基于请求响应 3.无连接 4.无状态 无状态的意思是每次请求都是独立的,它的执行情况 ...

  10. Python基础知识学习随笔

    Python学习随笔:PyCharm的错误检测使用及调整配置减少错误数量 Python学习随笔:获取当前主机名和用户名的方法 博客地址:https://blog.csdn.net/LaoYuanPyt ...