【vue2.x(二)】vue模版语法(上)_在template上面写vuex的变量 vue2-CSDN博客

本文链接：https://blog.csdn.net/zhanyu1/article/details/123539004

文章目录

1. vue实例
2. vue模版语法

1. vue实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue实例介绍</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- dom元素，也叫vue模版 -->
		<div id="app">
			<p>{{msg}}</p>
			<button type="button" @click="showInfo">点击修改</button>
		</div>
		<script type="text/javascript">
			//创建vue实例
			const app = new Vue({
				el:'#app',  //将vue实例与id=app的div进行绑定
				data:{      //定义数据对象供dom元素（vue模版）使用
					msg:'程序员战羽'
				},
				methods:{   //定义方法
					showInfo(){
						console.log('函数showInfo被调用了')
						this.msg = '关注微信公众号【程序员战羽】哦'  //this指向Vue实例本身
					}
				}
			})
		</script>
	</body>
</html>

在vue实例中：

el：将vue实例与dom元素（vue模版）进行绑定

data：定义数据对象供dom元素（vue模版）使用

methods：定义vue实例中的方法，其方法中的this指向Vue实例本身

2. vue模版语法

模版语法：html 中包含了一些 JS 语法代码，语法分为两种，分别为插值与指令。

2.1. 插值

双大括号表达式：{{xxx}}，其xxx为变量或js 表达式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue插值语法</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 文本插值 -->
			<p>姓名：{{username}}</p>
			<!-- js表达式运算 -->
			<p>{{number + 1}}</p>
			<p>{{ok ? 'YES' : 'NO'}}</p>
			<p>{{message.split('').reverse().join('')}}</p>
			<p :id="'list-' + id">xxx</p>
			<p>{{user.name}}</p>
		</div>
		<script type="text/javascript">
			//创建vue实例
			const app = new Vue({
				el: '#app', //将vue实例与id=app的div进行绑定
				data: {
					username: "程序员战羽",
					// 数值
					number: 20,
					// 布尔值
					ok: true,
					// 字符串
					message: 'EFG',
					// id 值
					id: 10,
					// 用户的信息对象
					user: {
						name: '微信公众号【程序员战羽】',
					}
				}
			})
		</script>
	</body>
</html>

2.2. 常见指令

常见指令如下：

命令	含义
v-bind	单向数据绑定，可以省略
v-mode	双向数据绑定
v-on	监听事件，简写为@
v-text	更新元素的 textContent
v-html	更新元素的 innerHTML
v-for	列表渲染
v-if	条件渲染
v-show	通过控制 display 样式来控制显示/隐藏

2.3. 指令介绍

v-bind

单向数据绑定，可以简写为冒号：

语法：v-bind:参数 =“xxx” 或简写为 :参数=“xxx”；

特点：数据从 data 流向dom元素（页面）。

v-model

双向数据绑定

语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”；

特点：数据既能从 data 流向dom元素（页面），也能从dom元素（页面）流向 data。常用在表单元素上，如input、textarea等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind/v-model</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h4>{{msg}}</h4>
			<!-- 常规写法 -->
			<!-- 单向数据绑定：<input type="text" v-bind:value="msg"><br/>
				双向数据绑定：<input type="text" v-model:value="msg"><br/> -->
			<!-- 简写 -->
			单向数据绑定：<input type="text" :value="msg"><br /><br />
			双向数据绑定：<input type="text" v-model="msg"><br />
		</div>
		<script type="text/javascript">
			//创建vue实例
			const app = new Vue({
				el: '#app', 
				data: { 
					msg: '程序员战羽'
				}
			})
		</script>
	</body>
</html>

Class与Style绑定

绑定样式：

class样式
:class=“xxx” xxx可以是字符串、对象、数组。
字符串写法：class="normal"
对象写法：class="{normal:false,font:true}"
数组写法：class="[‘normal’,‘font’]"
style样式
:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式绑定</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.basic {
				width: 500px;
				height: 100px;
				border: 2px solid red;
			}
			.normal {
				background-color: #9ACD32;
			}
			.font {
				font-size: 30px;
			}
			.good {
				background-color: gray;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="basic" v-bind:class="strClass" @click="changeStyle">1、{{name}}</div><br><br>
			<div class="basic" v-bind:class="objClass">2、{{name}}</div><br><br>
			<div class="basic" v-bind:class="arrClass">3、{{name}}</div><br><br>
			<!-- fontSize只能写成驼峰形式，样式生效后会自动转换成font-size -->
			<div class="basic" v-bind:style="{color:activeColor,fontSize:fSize}">4、{{name}}</div><br><br>
			<div class="basic" v-bind:style="objStyle">5、{{name}}</div><br><br>
			<div class="basic" v-bind:style="arrStyle">6、{{name}}</div><br><br>
		</div>
		<script type="text/javascript">
			let app = new Vue({
				el: '#app',
				data: {
					name: '微信公众号：程序员战羽',
					strClass: 'normal',
					objClass: {
						normal: false,
						font: true,
					},
					arrClass: ['normal','font'],
					activeColor:'red',
					fSize:'30px',
					objStyle: {
						fontSize: '30px',
						color: 'gray',
					},
					arrStyle: [{
						fontSize: '30px',
						color: 'blue'
					},{
						
					}]
				},
				methods: {
					changeStyle() {
						const arr = ['good', 'font']
						// 随机取一个样式
						const index = Math.floor(Math.random() * 2)
						console.log(index)
						this.strClass = arr[index]
					}
				}
			})
		</script>
	</body>
</html>