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. css3系列之属性选择器

    Attribute Selectors(属性选择器) E[attr ~="val"] E[attr |="val"] E[attr ^="val&qu ...

  2. 关于Java中的内存屏障

    如何打破双亲委派机制 继承ClassLoader类后重写loadClass方法 如何指定自定义ClassLoader中的parent 默认parent是appClassLoader,可以通过Class ...

  3. 系统提供的dispatch方法

    h1, h2, h3, h4, h5, h6, p, blockquote { margin: 0; padding: 0 } body { font-family: "Helvetica ...

  4. cocoslua3.17 android机器上播放音效不全

    开发过程中遇到一个问题,一个8秒的音效,在android机器上播放不完就结束了:网上说是由于android播放音效的内存限制的:原因知道了,那怎么解决呢? 通过各种搜索查找发现还是解决不了问题,然后自 ...

  5. JQuery案例：暖心小广告

    暖心小广告 写一个页面,每隔3秒显示小广告,再过3秒自动关闭. <head> <meta charset="UTF-8"> <title>暖心广 ...

  6. Java数组作业

    1 //输入一组数(10个),找出最大值,并给出最大值的位置 2 package test; 3 4 public class test1_1 { 5 public static double max ...

  7. Python爬虫入门（二）之Requests库

    Python爬虫入门(二)之Requests库 我是照着小白教程做的,所以该篇是更小白教程hhhhhhhh 一.Requests库的简介 Requests 唯一的一个非转基因的 Python HTTP ...

  8. 上传视频到七牛云Django后端实现

    1.上传视频到七牛云django端实现 1.1 获取七牛云秘钥 https://portal.qiniu.com/user/key 1.2 在syl/settings.py中配置七牛云上传 参考官方 ...

  9. 使用Verilog搭建一个单周期CPU

    使用Verilog搭建一个单周期CPU 搭建篇 总体结构 其实跟使用logisim搭建CPU基本一致,甚至更简单,因为完全可以照着logisim的电路图来写,各个模块和模块间的连接在logisim中非 ...

  10. 2019 ACM/ICPC North America Qualifier G.Research Productivity Index(概率期望dp)

    https://open.kattis.com/problems/researchproductivityindex 这道题是考场上没写出来的一道题,今年看看感觉简单到不像话,当时自己对于dp没有什么 ...