认识vue

ggks

已于 2022-05-19 19:36:44 修改

阅读量206

点赞数 1

文章标签： vue.js javascript

于 2022-05-19 16:50:56 首次发布

本文链接：https://blog.csdn.net/bh510055858/article/details/124864737

版权

本文概述了Vue.js的特性，包括其简洁易用、组件化设计、轻量级性能和数据驱动。通过实例展示了v-bind指令、v-if条件渲染、v-for循环以及核心指令v-model和v-on的使用。还介绍了v-cloak和v-html的区别。

摘要由CSDN通过智能技术生成

vue的特点：简洁，组件化，轻量，快速，简单

可拓展的数据绑定机制，原生对象即模型，简洁明了的API，组件化ul，多个轻量库搭配使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<div>{{msg}}</div>
		<div>{{name}}</div>
		<div>{{age.myage}}</div>
		</div>
		<script src="vue.js">
			
		</script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data(){
					return {
						msg:'vue学习中',
						name:'张三',
						age:{
							myage:30
						}
					}
				}
			})
		</script>
	</body>
</html>

vue 的常用指令v-bind

v-bind是vue中的一个指令主要用于绑定一个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<span :title="msg">放置查看绑定的信息</span>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			const app =new Vue({
				el:"#app",
				data(){
					return{
						msg:'页面加载' + new Date().toLocaleString()
					}
				}
			})
			
		</script>
	</body>
</html>

v-if 让元素消失

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-if="seen">我在写博客</p>
		</div>
		<script src="vue.js"></script>
		<script type="text/javascript">
			const app =new Vue({
				el:"#app",
				data(){
					return{
						seen:false
					}
				}
			})
		</script>
	</body>
</html>

v-for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item of county">{{item}}</li>
			</ul>
		</div>
		<script src="vue.js">
			
		</script>
		<script type="text/javascript">
			const app =new Vue({
				el:"#app",
				data(){
					return{
						county:['拆呢','漂亮','毛子']
					}
				},
			})
		</script>
	</body>
</html>

v-on用于监听事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{num}}</h1>
			<button type="button" @click="add()">增加</button>
		</div>
		<script src="vue.js">
			
		</script>
		<script type="text/javascript">
			const app =new Vue({
				el:"#app",
				data(){
					return{
						num:1
					}
				},
				methods:{
					add:function(){
						this.num++
					}
				}
			})
		</script>
	</body>
</html>

v-model 输入框文字实时变换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
           <h2>{{msg}}</h2>
		   <input type="text" v-model="msg"/>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data(){
					return {
						msg:"我们都是很努力的人"
					}
				},
				methods:{
                 
				}
			})
		</script>
	</body>
</html>

mustache语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
           <h2>{{firstName+lastName}}</h2>
		   <h2>{{firstName +'-'+lastName}}</h2>
		   <h2>{{firstName}}{{lastName}}</h2>
		   <h2>{{count*3}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						firstName:'zhang',
						lastName:'san',
						count:1
					}
				}

			})
		</script>
	</body>
</html>

v-once 只会渲染一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
          <h2 v-once>{{msg}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						msg:'中国'
					}
				}
			})
		</script>
	</body>
</html>

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
          <h2>{{url}}</h2>
		  <h2 v-html="url"></h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						url:"<a href='http://www.baidu.com'>百度一下</a>"
					}
				}
			})
		</script>
	</body>
</html>

v-text是用于操作纯文本它会替代显示对应的数据对象上的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<h2 v-text="message">你也好</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						message: "你好啊"
					}
				}
			})
		</script>
	</body>
</html>

v-cloak的作用是防止页面加载时出现闪烁问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
         <style>
			 [v-cloak]{
				 display: none;
			 }
		 </style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h2>{{msg}}</h2>
		</div>
		<script src="vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data() {
					return {
						msg: "张三"
					}
				}
			})
		</script>
	</body>
</html>

ggks

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识vue

vue的特点：简洁，组件化，轻量，快速，简单可拓展的数据绑定机制，原生对象即模型，简洁明了的API，组件化ul，多个轻量库搭配使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div>{{msg}}<
复制链接

扫一扫