vue在html使用

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

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>
posted @ 2020-12-02 11:51  萌新_python  阅读(786)  评论(0)    收藏  举报