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. php递归无限查询上级或者下级

    $this->get_array($user['uid'],1); function get_array($user_id,$top=0){ $sql = 'SELECT * FROM ' . ...

  2. ctf-工具-binwalk

    binwalk在玩杂项时是个不可缺的工具.1.最简单的,在玩隐写时,首先可以用它来找到其中的字符串例如:在铁人三项,东北赛区个人赛中,有一道题它直接给了一个文件,没有后缀,不知道是什么文件先binwa ...

  3. 精益求精！Spring Boot 知识点全面回顾，带你重新细读源码！

    约定优于配置 Build Anything with Spring Boot:Spring Boot is the starting point for building all Spring-bas ...

  4. 如何用EasyRecovery恢复受损的SD卡？

    SD卡的主要功能是拓展便携式设备.包括:数据相机.手机及其他的多媒体播放器等的存储空间,缓解设备本身的存储压力.即便是在产品内存已经逐渐增加的情况下,还是拥有一大批的忠实用户. 很多用户反应,SD卡使 ...

  5. 使用Camtasia来给视频或者图片调色

    喜欢摄影和制作视频的朋友可能知道,一张好看的照片或一段精美视频的构成要素很多,取景本身就是很重要的条件,相机的硬件水平也是一个重要因素,接下来的就是后期的编辑和处理了,而在后期处理过程中调色是十分重要 ...

  6. MacOS Big Sur11.0升级后Eclipse启动报错

    本次升级MacOS Big Sur11.0.1之后,开启Eclipse时报空指针,打开页面空白,之后卸掉, 再次安装时提示加载不到libserver.dylib 或 Could not create ...

  7. LeetCode 040 Combination Sum II

    题目要求:Combination Sum II Given a collection of candidate numbers (C) and a target number (T), find al ...

  8. Django的下载及命令

    安装 命令行 pip3 install django==1.11.11 测试是否安装成功 django-admin 创建django项目 django-admin startproject 项目名称( ...

  9. JDK(JDK8,JDK11)高速下载

    JDK(JDK8,JDK11)高速下载 oracl 需要登陆才能下载,网速还贼慢. 华为云各版本高速下载通道:https://repo.huaweicloud.com/java/jdk/

  10. Spring Cloud Alibaba 初体验(六) Seata 及结合 MyBatis 与 MyBatis-Plus 的使用

    一.下载与运行 本文使用 Seata 1.1.0:https://github.com/seata/seata/releases Windows 环境下双击 bin/seata-server.bat ...