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：安装Bio库不成功，出现ModuleNotFoundError: No module named 'Bio'

    Bio库的安装并不是pip install bio,而是biopython. ./anaconda3/bin/pip3 install biopython -i https://pypi.douban ...

  2. PVE简单迁移虚拟机

    工作中有2台PVE节点,但是没有做集群,如果有集群可以很方便的进行迁移.本次迁移的目的是: 目前有一台PVE1节点装的虚机资源使用较多,想迁移某台虚机到另一台PVE2. 1 备份 备份在web页面操作 ...

  3. jQuery 第四章 实例方法 DOM操作_基于jQuery对象增删改查相关方法

    .next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...

  4. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  5. selenium如何处理H5视频

    selenium处理H5视频主要使用的是javascript,javascript函数有内置的对象叫arguments,arguments包含了调用的参数组,[0]代表取第一个值. currentSr ...

  6. VMW14.x虚拟机安装Mac10.13系统教程

    之前虚拟机安装Mac经常出问题,所以这次又重新安装Mac,为了加深映像和之后回忆方便,特写下此次安装教程. 一 工具的准备: 首先准备教程的软件和包 1,虚拟机VMW    下载地址:https:// ...

  7. dubbo协议之请求头编码器

    开局一张图,内容全靠XXXXX.... 如图是dubbo协议的格式 encodeRequest进来会先去channel对象中取url的Parameters的"serialization&qu ...

  8. EF Core 执行SQL语句和存储过程

    无论ORM有多么强大,总会出现一些特殊的情况,它无法满足我们的要求.在这篇文章中,我们介绍几种执行SQL的方法. 表结构 在具体内容开始之前,我们先简单说明一下要使用的表结构. public clas ...

  9. 小白也能看懂的mySQL进阶【单表查询】

    目录 1.查询基础 SELECT语句基础 列的查询 为列设定别名 常数的查询 过滤表中重复数据 根据WHERE语句来选择记录 注释的书写方法 算术运算符和比较运算符 算术运算符 需要注意NULL 比较 ...

  10. moviepy音视频剪辑：视频剪辑基类VideoClip的属性及方法详解

    ☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...