初始vue、常用指令、{{ }}插值语法

小白-ynysjysg

已于 2022-05-18 20:45:37 修改

阅读量299

点赞数

文章标签： vue.js javascript 前端

于 2022-05-18 20:44:14 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59707151/article/details/124846479

版权

本文详细介绍了Vue.js的基本使用，包括初始化Vue、常用指令如v-bind、v-if、v-for、v-on、v-model等，以及{{ }}插值语法的应用，帮助读者掌握Vue的数据绑定和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、初始vue

<div id="app">
	<h2>{{msg}}</h2>
	<h2>{{name}}</h2>
	<h2>{{age.myage}}</h2>
</div>

<script src="../../vue.js"></script>
<script type="text/javascript">
	const app=new Vue({//声明Vue实例化对象
		el:'#app',//挂载元素  el:element
//data方式一
		// data:{//页面存放的数据
		    // 	msg:'初始Vue',
		    // 	name:'张三',
		    // 	age:{
		    // 		myage:30
	    	// 	}
		// }
//data方式二
		// data:function(){//this是vue实例对象
			// 	return{
			// 		msg:'初始Vue',
			// 		name:'张三',
			// 		age:{
			// 			myage:30
			// 		}
			// 	}
		// }
//data方式三
			data(){
				return{
					msg:'初始Vue',
					name:'张三',
					age:{
						myage:30
					}
				}
			}
		})
</script>

二、常用指令

1. v-bind绑定属性 v-bind可省略简写成:title='msg' 单向数据绑定

<div id="app">
    <span v-bind:title='msg'>
	<!-- <span :title='msg'> -->
		鼠标悬停提示
	</span>
</div>

<script src="../../vue.js"></script>
<script>
	//const app = new Vue({
    new Vue({
		el:'#app',
		data(){
			 return {
				msg:'页面加载于 ' + new Date().toLocaleString()
			 }
		}
	})
</script>

2. v-if 控制元素消失出现

<div id="app">
	<p v-if="seen">学生</p>
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				//seen:true
				seen:false
			 }
		}
	})
</script>

3. v-for指令循环列表 for in

<div id="app">
	<ul>
		<li v-for="item in county">{{item}}</li>
	</ul>	
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				county:["中国","美国","德国","日本"]
			 }
		}
	})
</script>

4. v-on 监听事件的变化简写@click

<div id="app">
	<h1>{{num}}</h1>
	<!-- <button type="button" v-on:click="add">增加</button> -->
    <button type="button" @click="add">增加</button>		
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			return {
			    num:1
			}
		},
		methods:{
			add(){
			    this.num++//this代表vue的实例，所有需要从data中获取的数据都需要加this
			}
		}
	})
</script>

5. v-modle 实现双向数据绑定只用于表单类元素 v-modle：value可简写为v-modle

<div id="app">
	<h2>{{msg}}</h2>
	<input type="text" v-model="msg"/>		
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				msg:'数据双向绑定'
			 }
		}
	})
</script>

6. v-html 可识别html标签

<div id="app">
	<p>{{url}}</p>
	<h3 v-html="url"></h3>		
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				url:"<a href='http://www.baidu.com'>百度一下</a>"
			 }
		}
	})
</script>

7. v-text 覆盖dom元素中的数据

<div id="app">
	<p>你也好</p>
	<p v-text="msg">你也好</p>		
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				msg:'你好'
			 }
		}
	})
</script>

8. v-once该dom元素只渲染一次不被改变

<div id="app">
	<h2 v-once>{{msg}}</h2>	
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				msg:'你好'
			 }
		}
	})
</script>

9. v-pre 打印字符串{{msg}}

<div id="app">
	<h2 v-pre>{{msg}}</h2>	
</div>

10. v-cloak 隐藏刷新时出现的{{msg}}

<style type="text/css">
	[v-cloak]{
	    display: none;
	}
</style>

<div id="app" v-cloak>
	<h2>{{msg}}</h2>	
</div>

三、{{ }}插值语法

`{{ }}`不仅可以直接写变量，还可以写简单表达式。

<div id="app" v-cloak>
	<h2>{{firetname+lastname}}</h2>
	<h2>{{firetname+'-'+lastname}}</h2>
	<h2>{{firetname}}{{lastname}}</h2>
	<h2>{{count*3}}</h2>	
</div>

<script src="../../vue.js"></script>
<script>
	new Vue({
		el:'#app',
		data(){
			 return {
				firetname:'张',
				lastname:'三',
				count:2
			 }
		}
	})
</script>