Vuejs01

最新推荐文章于 2024-05-20 10:06:54 发布

Dreamer635

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量74

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_59142649/article/details/121142709

版权

一、Vue初体验

（一）Hello Vuejs初体验

1.创建了一个Vue对象

2.创建Vue对象的时候，传入一些opptions:{}

e1属性：该属性决定了Vue对象挂载到哪一个元素上，这里是挂载到了id为app的元素上

data属性：该属性中通常会存储一些数据，数据可以是直接定义的也可以来自网络，从服务上加载

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue初体验1</title>
</head>
<body>
	<div id="app">
		<h2>Hello {{name}}</h2>
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				name:"Vuejs",
			}
		})
	</script>
</body>
</html>

（二）Vue列表展示初体验

使用v-for指令来遍历列表

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue初体验2</title>
</head>
<body>
	<div id="app">
		<ul>
			<li v-for="item in movies">{{item}}</li>//遍历列表
		</ul>
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:"Hello",
				movies:['星际穿越','大话西游','八佰','阿甘正传']
			}
		})
	</script>
</body>
</html>

（三）计数器体验

1.methods属性：用于Vue对象中定义方法

2.v-on（@click）:该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常为methods中定义的方法）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue初体验2</title>
</head>
<body>
	<div id="app">
		<h2>当前计数：{{counter}}</h2>
		<button v-on:click="add">+</button>//v-on:可以用@代替
		<button v-on:click="sub">-</button>
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				counter:0,
				
			}
			methods:{
				add:function(){
					console.log('add被执行');
					this.counter++
				},
				sub:function(){
					console.log('sub被执行');
					this.counter--
				}
			}
		})
	</script>
</body>
</html>

二、创建Vue实例传入的options

1.el:

类型：string | HTMLElement

作用：决定之后Vue实例会管理哪一个DOM

2.data:

类型：Object | Function（组件中data必须是一个函数）

作用：Vue实例对应的数据对象

3.methods:

类型：{[key:string:Function]}

作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

三、插值操作----mustache语法（双大括号）

<div id="app">
		<h2>Hello {{name}}</h2>//插入到标签中
		<h2>{{firstname} {lastname}}</h2>//使用了两个Mustache
		<h2>{{counter * 2}}</h2>//表达式
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				name:'Vuejs',
				firstname:'coder',
				lastname:'why',
				counter:100,	
			}
		})
	</script>

1.直接插入到标签中

2.可以使用多个双大括号

3.也可以为表达式

四、插值操作----其他指令的使用

（一）v-once

1.该指令后面不需要跟任何表达式

2.该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

<div id="app">
		<h2 v-once>{{message}}</h2>//使用v-once指令
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello',	
			}
		})
	</script>

（二）v-html

1.该指令后面往往会跟上一个string类型

2.会将string的html解析出来并进行渲染

<div id="app">
		<h2 v-html='url'></h2>//使用v-html指令
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello',
				url:'<a href="http://www.baidu.com">百度一下</a>'	
			}
		})
	</script>

（三）v-test

1.v-test和Mustache比较相似：都是用于将数据显示在界面中

2.v-test通常情况下，接受一个string类型

<div id="app">
		<h2 v-test='massage'></h2>//使用v-test指令
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello'	,
			}
		})
	</script>

（四）v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

<div id="app">
		<p>{{message}}</p>
		<p v-pre>{{message}}</p>
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello'	,
			}
		})
	</script>

1.第一个h2元素中的元素会被编译解析出来对应的内容

2.第二个h2元素中会直接显示出{{message}}

（五）v-cloack

直接显示出未编译的Mustache标签

<div id="app" v-cloak>
		{{message}}
	</div>
	<script stc="../js/vue.js"></script>//引入Vue
	<script>
		setTimeout(function (){
			const app = new Vue({
			e1:'#app',//用于挂载要管理的元素
			data:{//定义数据
				message:'Hello'	,
			}
		})
		},1000)
	</script>