Vue语法简介（入门推荐）

原创已于 2022-03-05 10:15:39 修改 · 3.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-03-01 14:43:25 首次发布

web前端总结专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了Vue.js中的核心指令和特性，包括Mustache语法、v-once、v-html、v-text、v-pre、v-cloak、v-bind、v-on、v-show、v-if、v-for、v-model及其各种修饰符的用法，以及计算属性和事件处理。通过实例展示了如何在实际开发中应用这些指令，帮助读者深入理解Vue.js的双向数据绑定和条件、循环逻辑。

1.Mustache（双大括号）:

2.v-once：该指令后面不需要跟任何表达式（v-for后面接表达式）,该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

3.v-html：v-html会将数据当html标签解析后输出。

4.v-text：<h2 v-text="message"></h2>等效于<h2>{{message}}</h2>，但相比于Mustache，它不够灵活。

5.v-pre：如<h3 v-pre>{{message}}</h3>，标签显示结果就是它标签本身的内容，即{{message}}。

6.v-cloak：解决屏幕闪动的好方法。

7.v-bind：基本属性绑定和动态绑定（对象或数组），将对应的图片或地址等数据放入data中，使用v-bind将数据引用到对应的标签中，如<img v-bind:src="imgUrl" />，其中data数据如下：

v-bind语法糖（简写方式）：<img v-bind:src="imgUrl" />可写为<img :src="imgUrl" />。

8.计算属性：其本质就是属性，包含setter和getter，下面是两种操作实例：

<body>标签的内容：

对应vue代码：

一般为只读属性，所以可以省略set，写成如下形式：

9.v-on（缩写：@）：绑定事件监听器。一些处理事件的修饰符（可混合使用）：

（1）.stop阻止冒泡事件的发生

（2）.prevent阻止默认事件的发生，如不用.prevent,下面标签的submit指令会调用方法后直接提交服务器，即控制台显示的数据会闪过

（3）.{keycode|keyAlias}特定键盘键触发回调

（4）.once只触发一次回调

10.v-show:判断属性。

与v-if区别：v-if在条件为false时，包含v-if指令的元素不会出现在dom中；v-show在条件为false时，只是给元素添加一个行内样式：display:none，元素仍然在dom里面；

注意：当需要在显示与隐藏之间切换频率较高的时候，应该使用v-show（性能更高），当次数较少时通常使用v-if。

11.v-for:循环遍历操作。语法：

（1）遍历数组：v-for="(m,index) in movies" //m是新定义的变量名称，index是对应数组的下标，movies是已有的数组名。Index可省略。

（2）遍历对象：<li v-for=”(value,key) in moive”>{{item}}</li> //如果只获取一个值，那么取得的值是value，key可以省略。

12.v-model：实现双向绑定（等同于v-on和v-bind一起使用，实现实时显示）。

双向绑定的使用案例：

<body>
		<div id="app">

	<!-- 基础案例 -->

			<!-- <input type="text" v-model="message"/>{{message}} -->
			<!-- 当界面产生一个事件，浏览器会生成一个event对象，内部就包含当前输入的值 -->
			<input type="text" :value="message" @input="change" /><br />
			<h2>文本框输入内容：{{message}}</h2>
			<br />

	<!-- 单选框 -->

			<span>
				<label for="male">
					<input type="radio" id="male" value="男" v-model="sex" />男
				</label>
				<label for="female">
					<input type="radio" id="female" value="女" v-model="sex" />女
				</label>
				<h2>你选择的性别是：{{sex}}</h2>
			</span>

	<!-- 单击选择 -->

			<label for="agree">
				<input type="checkbox" id="agree" v-model="info" /><span title="点击同意进入下一步">同意协议&nbsp;&nbsp;</span>
				<button :disabled="!info" @click="notice()">next</button>
				<br />
				<h2 v-if="info==true">你已经同意相关协议</h2>

			</label>
			<br />

	<!-- 复选框 -->

			<label>
				<input type="checkbox" value="羽毛球" v-model="hobbies" />羽毛球
				<input type="checkbox" value="篮球" v-model="hobbies" />篮球
				<input type="checkbox" value="足球" v-model="hobbies" />足球
				<input type="checkbox" value="乒乓球" v-model="hobbies" />乒乓球
				<h2>你的爱好是：{{hobbies}}</h2>
			</label>
			<!-- v-model:select  分为复选框和单选框 -->

	<!-- 单选框 -->

			<select name="abc" v-model="fruit">
				<option value="西瓜">西瓜</option>
				<option value="橘子">橘子</option>
				<option value="香蕉">香蕉</option>
				<option value="哈密瓜">哈密瓜</option>
			</select>
			<h2>你选择的水果是：{{fruit}}</h2>

	<!-- 多选框 -->

			<select multiple="multiple" name="xyZ" v-model="stars" size="5">
				<option disabled="disabled">ctrl+单击可复选</option>
				<option value="刘德华">刘德华</option>
				<option value="梁朝伟">梁朝伟</option>
				<option value="黎明">黎明</option>
				<option value="库里">库里</option>
			</select>
			<h2>你选择的明星是：{{stars}}</h2>

			<!-- 值绑定 (动态绑定v-model)-->
			<label v-for="item in orginHobbies">
				<input type="checkbox" :value="item" />{{item}}
			</label>

	<!-- 修饰符 -->

			<!-- 1.修饰符：lazy 敲回车时进行绑定-->
			<div>
				<input type="text" v-model.lazy="message" />
				<h2>{{message}}</h2>
			</div>
			<!-- 2.修饰符：number转换数据类型 -->
			<div>
				<input type="number" v-model.lazy.number="numberBind" />
				<h2>{{numberBind}}-{{typeof numberBind}}</h2>
			</div>
			<!-- 3.修饰符：trim除左右两边空格    -->
			<div>
				<input type="text" v-model.lazy="name" />
				<h2>你输入的名字是：{{name}}</h2>
			</div>
		</div>
		<script src="../js/v2.6.10/vue.js"></script>
		<script>
			let app = new Vue({
				el: '#app',
				data: {
					message: 'hello!!',
					sex: '男',
					info: false,
					orginHobbies: ['橄榄球', '高尔夫球', '乒乓球'],
					hobbies: [],
					fruit: '橘子',
					stars: [],
					numberBind: '',
					name: ''
				},
				methods: {
					change(event) {
						this.message = event.target.value;
					},
					notice() {
						alert('感谢你同意协议');
					}
				}
			})
		</script>
	</body>