vue02模板语法

已于 2022-09-02 20:27:37 修改
阅读量693 收藏
点赞数
文章标签： vue.js javascript 前端
于 2022-09-02 20:26:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67465673/article/details/126666592
版权

目录

一、插值

1.文本        {{msg}} 

 2.html  

 使用v-html指令用于输出html代码

3.属性 

 4.表达式

5. class 绑定

6.style 绑定 

二、指令 

核心指令

1.v-if/v-else/if/v-else 

2. v-show 与 v-if 的区别

3. v-for

4.v-model 是 数据的双向绑定

v-bind 是 绑定属性

v-on 是 绑定事件

三、过滤器 

过滤器的串联

 过滤器的传参

四、计算属性与监听属性 

1.计算属性 

2.监听属性 

五、购物车案例 

 六、总结

 1.插值

2.指令 

3.过滤器 

 4.计算属性与监听属性

一、插值

1.文本        {{msg}} 

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!'
				}
			}
		})
	</script>
</html>

运行结果如图所示：

 2.html  

 使用v-html指令用于输出html代码

代码演示：

 

运行结果如图所示： 

  

所以我们要用到v-html指令输出html代码 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			{{msg}}
			<p>html页面转义</p>
			<div v-html="htmlstr"></div>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'<span style="color:red">文本内容</span>'
				}
			}
		})
	</script>
</html>

 运行结果如图所示:

3.属性 

 HTML属性中的值应使用v-bind指令

运行结果： 

所以说我们要用v-bind 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			{{msg}}
			<p>html页面转义</p>
			<div v-html="htmlstr"></div>
			<p>v-bind 属性绑定</p>
			<input value="值" />
			<input v-bind:value="valuestr" />
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'<span style="color:red">文本内容</span>',
					valuestr:'vue值'
				}
			}
		})
	</script>
</html>

  

运行结果如图所示： 

 4.表达式

Vue 提供了完全的JavaScript 表达式支持

 {{str.substr(0,6).toUpperCase()}}

{{number  + 1}}        {{ok ? 'YES' : 'NO'}}

<li v-bind:id="'list' + id">我的id是js动态生成的</li>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			{{msg}}
			<p>html页面转义</p>
			<div v-html="htmlstr"></div>
			<p>v-bind 属性绑定</p>
			<input value="值" />
			<input v-bind:value="valuestr" />
			<input :value="valuestr" />
			<p>vue 中可以对变量进行二次处理或可以使用js的语法</p>
			{{str.substring(0,4)}}<br/>
			{{num + 4}}<br>
			{{ok ? '1' : '0'}}<br>
			<!-- 通过:去绑定属性 -->
			<span :id="idstr+'id'">书籍信息</span>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					msg:'hello vue!!!',
					htmlstr:'<span style="color:red">文本内容</span>',
					valuestr:'vue值',
					str:'hello world',
					num:6,
					ok:false,
					idstr:'book_'
				}
			}
		})
	</script>
</html>

  

 运行结果如图所示：

5. class 绑定

 使用方式：v-bind：class="expression"

expression 的类型：字符串、数组、对象 

第一个方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		<style type="text/css">
			.a{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>class 绑定</p>
			<span class="a">文本内容</span>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
				
				}
			}
		})
	</script>
</html>

 第二种方式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
		<style type="text/css">
			.a{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>class 绑定</p>
			<span :class="classStr">文本内容</span>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					classStr:'a'
				}
			}
		})
	</script>
</html>

运行结果都是一样的： 

6.style 绑定 

v-bind:style="expression"

expression 的类型：字符串、数组、对象 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>style 绑定</p>
			<span :style="styleStr">文本内容</span>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					styleStr:'color:blue;'
				}
			}
		})
	</script>
</html>

运行结果如图所示： 

二、指令 

 指令指的是带有 “v-” 前缀的特殊属性

核心指令

 (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

 v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

  v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

  v-for：类似JS的遍历，

 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

  v-bind  ：绑定属性 

  v-on  ：绑定事件

  v-model：数据的双向绑定

v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   

v-for/v-model一起绑定[多选]复选框和单选框  

1.v-if/v-else/if/v-else 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-if</p>
			<!-- 输入分数：60分一些为不及格，60-70分为合格，70-80为良，80-90为优秀，90-100为优+ -->
		请输入分数：<input v-model="score" />
		对应的结果：
		<span v-if="score<60">不及格</span>
		<span v-else-if="score<70">及格</span>
		<span v-else-if="score<80">良</span>
		<span v-else-if="score<90">优秀</span>
		<span v-else-if="score<=100">优+</span>
		<span v-else="">输入格式不正确</span>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					score:0
				}
			}
		})
	</script>
</html>

运行结果如图所示：   输入什么就对应的什么 

 

2. v-show 与 v-if 的区别

 v-show是通过display=none去隐藏了这个标签，而v-if 连这个标签的没有了

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
		<p>v-show</p>
		请输入结果：<input v-model="showflag" />
		<span v-show="showflag">show：展示与否</span>
		<span v-if="showflag">if:展示与否</span>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					showflag:false
				}
			}
		})
	</script>
</html>

运行结果如图所示：

3. v-for

注意：下拉框是写在里面， 复选框是写在外面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-for</p>
			<select>
				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
			</select>
			<br />
			<div v-for="l in likes">
				<input type="checkbox" :value="l.id"/>{{l.name}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el: '#app',
			// 变量区
			data() {
				return {
					likes: [{
							id: 1,
							name: '军旗'
						},
						{
							id: 2,
							name: '桌球'
						},
						{
							id: 3,
							name: '乒乓球'
						},
						{
							id: 4,
							name: '篮球'
						}
					]
				}
			}
		})
	</script>
</html>

运行结果如图所示：

4.v-model 是 数据的双向绑定

v-bind 是 绑定属性

v-on 是 绑定事件

Ctrl+k是格式化代码，重新对齐               上面整合的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-if</p>
			<!-- 输入分数：60分一些为不及格，60-70分为合格，70-80为良，80-90为优秀，90-100为优+ -->
			请输入分数：<input v-model="score" />
			对应的结果：
			<span v-if="score<60">不及格</span>
			<span v-else-if="score<70">及格</span>
			<span v-else-if="score<80">良</span>
			<span v-else-if="score<90">优秀</span>
			<span v-else-if="score<=100">优+</span>
			<span v-else="">输入格式不合法</span>
			<p>v-show</p>
			请输入结果：<input v-model="showflag" />
			<span v-show="showflag">show：展示与否</span>
			<span v-if="showflag">if:展示与否</span>
			<p>v-for</p>
			<select>
				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
			</select>
			<br />
			<div v-for="l in likes">
				<input type="checkbox" :value="l.id"/>{{l.name}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el: '#app',
			// 变量区
			data() {
				return {
					score: 0,
					showflag: false,
					likes: [{
							id: 1,
							name: '军旗'
						},
						{
							id: 2,
							name: '桌球'
						},
						{
							id: 3,
							name: '乒乓球'
						},
						{
							id: 4,
							name: '篮球'
						}
					]
				}
			}
		})
	</script>
</html>

三、过滤器 

 一般会使用全局过滤器

Vue.filter('filterName', function (value) {

 // value 表示要过滤的内容

});

局部过滤器

new Vue({

 filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

<!-- 在两个大括号中 -->

{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联     

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

过滤器：时间格式，翻译，多一个点0，时间的处理，数据的处理都可以通过过滤器来处理 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- 变量 -->
			{{msg|strSplit}}
		</div>
	</body>
	<script type="text/javascript">
		// 前端的打断点
		// debugger;
		// strSplit:过滤器的名字
		Vue.filter('strSplit',function(value){
			// value:处理的变量
			console.log(value);
			return value;
		})
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					msg:'hello vue!!!'
				}
			}
		})
	</script>
</html>

运行结果如图所示： 

运行的结果如图所示：​​​​​​​ 

过滤器的串联

 过滤器的传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- 变量 -->
			<!-- {{msg|strSplit}} -->
			<!-- 过滤器的串联 -->
			{{msg|strSplit|strSplit2}}
			<!-- 过滤器的传参 -->
			{{msg|strSplit3(2,5)}}
			{{msg|strSplit3(1,4)}}
		</div>
	</body>
	<script type="text/javascript">
		// strSplit:过滤器的名字
		Vue.filter('strSplit',function(value){
			// 前端的打断点
			// debugger;
			// value:处理的变量
			console.log(value);
			return value.substring(0,5);
		})
		Vue.filter('strSplit2',function(value){
			// value:处理的变量
			console.log(value);
			return value.substring(3,5);
		})
		Vue.filter('strSplit3',function(value,a,b){
			// value:处理的变量
			console.log(value);
			return value.substring(a,b);
		})
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return{
					msg:'hello vue!!!'
				}
			}
		})
	</script>
</html>

运行结果如图所示： 

四、计算属性与监听属性 

这些写就会拼接起来    

 如图所示：

1.计算属性 

 监听属性：是你输入的两个值直接影响到这个结果   单方面的影响

 代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>计算属性</p>
			请输入第一个数<input v-model="x" /><br>
			请输入第二个数<input v-model="y" /><br>
			结果为：{{addFlag}}
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el:'#app',
			// 变量区
			data(){
				return {
					x:0,
					y:0
				}
			},computed:{
				// 计算属性
				addFlag:function(){
					return parseInt(this.x) + parseInt(this.y)
				}
			}
		})
	</script>
</html>

 运行结果如图所示：

2.监听属性 

 监听属性：是相互之间印象

 代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>计算属性</p>
			请输入第一个数<input v-model="x" /><br>
			请输入第二个数<input v-model="y" /><br>
			结果为：{{addFlag}}
			<p>监听属性</p>
			请输入千米：<input v-model="km" /><br>
			请输入米：<input v-model="m" /><br>
		</div>
	</body>
	<script type="text/javascript">
		// 创建实例
		new Vue({
			// 挂载实例
			el: '#app',
			// 变量区
			data() {
				return {
					x: 0,
					y: 0,
					km:0,
					m:0
				}
			},
			computed: {
				// 计算属性
				addFlag: function() {
					return parseInt(this.x) + parseInt(this.y)
				}
			},
			watch:{
				km:function(v){
					// :之前对应的是被监听的属性,v指的是被监听属性的值
					// 当v对应的值发生变化的时候,会执行这个方法
					//  v代表的是千米
					this.m = parseInt(v)*1000;
				},
				m:function(v){
					this.km =  parseInt(v)/1000;
				}
			}
		})
	</script>
</html>

运行结果如图所示： 

五、购物车案例 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>购物车</p>
			<table>
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>帽子</td>
					<td>{{maoziDanJia}}</td>
					<td>
						<input v-model="maoziShuLiang" />
					</td>
					<td>{{maoziXiaoJi}}</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>{{yifuDanJia}}</td>
					<td>
						<input v-model="yifuShuLiang" />
					</td>
					<td>{{yifuXiaoJi}}</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>{{kuziDanJia}}</td>
					<td>
						<input v-model="kuziShuLiang" />
					</td>
					<td>{{kuziXiaoJi}}</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="2"></td>
					<td>{{zojia}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					maoziShuLiang:1,
					yifuShuLiang:1,
					kuziShuLiang:1,
					maoziDanJia:20,
					yifuDanJia:3000,
					kuziDanJia:700
				}
			},
			computed:{
				// 因为数量 会影响小计,小计不会影响数量,所以使用计算属性
				maoziXiaoJi:function(){
					return parseInt(this.maoziDanJia) * parseInt(this.maoziShuLiang);
				},
				yifuXiaoJi:function(){
					return parseInt(this.yifuDanJia) * parseInt(this.yifuShuLiang);
				},
				kuziXiaoJi:function(){
					return parseInt(this.kuziDanJia) * parseInt(this.kuziShuLiang);
				},
				zojia:function(){
					return parseInt(this.maoziXiaoJi + this.yifuXiaoJi + this.kuziXiaoJi);
				}
			}	
		})
	</script>
</html>

 运行结果如图所示：

 六、总结

 1.插值

 {{文本}}

v-html

v-bind        绑定属性

2.指令 

 v-if/v-else-if/v-else

v-show  & v-if   的区别

 v-show是通过display=none去隐藏了这个标签，而v-if 连这个标签的没有了

v-for

3.过滤器 

 定义：Vue.filter（'filterName',function(value){}）

串联过滤器

过滤器传参

 4.计算属性与监听属性

计算属性是 一方依赖于另一方

监听属性是   相互依赖，相互影响

敢敢130
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2模板语法
m0_62460586的博客
03-28 388
vue2模板语法
vue2项目模板
08-12
框架：vue2 webpack edp mock bootstrap3 vue2单页面框架，适用于快速搭建spa后台系统
Vue模板语法
李公子的博客
07-25 241
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。 ...
vue2代码 --elementUI后台框架
m0_56983341的博客
03-26 252
【代码】vue2代码 --elementUI后台框架。
Vue模板语法（二）
what_to的博客
08-01 384
Vue模板语法（二）插值指令过滤器计算属性和监听属性的区别两者的区别 插值 v-bind:与v-model的区别？ v-model是做数据双向绑定的指令 v-bind:是指将对应的值给填写到指定属性中 列如：v-bind:Value简单来说就是将值填写到value="" 然后value的值发生改变，并不会影响Vue实列中变量值 <!DOCTYPE html> <html> ...
vue2中的模板语法
骆小洛
10-11 76
举例：v-bind:href="xxx"，简写为 :href="xxx" ,其中xxx同样为js表达式，而且可以直接读取data和computed中的属性；写法：{{xxx}} ，其中xxx是js表达式，且可以直接读取到data和computed中的所有属性；备注：vue中有很多指令，其形式都为v-?，例如v-on v-if v-for等等；功能：用于解析标签（包括：标签属性，标签体内容，绑定事件等）功能：用于解析标签体的内容；差值语法{{}} 和 指令语法。
Vue 3模板语法.pdf
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
vue模板语法-插值详解
08-31
主要介绍了vue模板语法-插值，非常不错，具有参考借鉴价值，需要的朋友参考下
02-Vue模板基础语法.zip
最新发布
04-06
【技术分析】 ... CSS，可以帮助把网页外观做得更加美观； JavaScript，是一种轻量级的解释型编程语言； ... Bootstrap 是快速开发 Web 应用程序的前端工具包。...AJAX，创建交互式网页应用的网页开发技术。...
Vue.js的模板语法详解
10-15
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
vue2模板写法
陈先生的博客
09-27 753
【代码】vue2模板写法。
Vue基础语法
qq_52262541的博客
04-10 1094
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
Vue2 模板的使用
每一个不曾起舞的日子，都是对人生的辜负。
01-30 557
示例一 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script type="text/javascript" src="Vue-v2.5.22.js"&gt;&lt;/script&amp
vue2模板编译
weixin_43845059的博客
10-24 819
我们都了解VNode，那么VNode是怎样生成的那？
Vue 2. 模板语法
xj89959853的博客
03-25 146
在前面，我们介绍了 Vue 一个最核心的功能，数据和 DOM 元素进行绑定，数据一旦改变，DOM 元素也会重新进行渲染。 本文中，我们就一起来看一下在数据不变的情况下，在页面中的不同渲染方式。 本文主要包含以下知识点： 插值 文本 原始 HTML 特性 动态参数 使用 JavaScript 表达式 缩写 v-bind 缩写 v-on 缩写 插值 1. 文本 文本插值是最基本的渲染方...
Vue2基础篇-03-模板语法
Alan0517
12-07 186
Vue 模板语法有2大类：1. 插值语法：功能：用于解析标签体内容。写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性；2. 指令语法：功能：用于解析标签(包括：标签属性，标签体内容，绑定事件...)举例：V-bind:href='xxx' 或简写为 :href='xxx',xxx同时要写js表达式，且可以直接读取到data中的所有属性；备注：Vue中有很多指令，且形式是：v-????此处外面只是拿v-bind举个列子；
vscode 最全vue2 模板
liyaodong1234的博客
07-03 957
【代码】vscode 最全vue2 模板。
Vue2.0学习--基础--2--模板语法
Small_sesame的博客
07-04 244
（day3） 插值、指令、缩写 前面两天已经学到了Vue 核心的四个基本功能：声明式渲染、条件和循环、处理用户输入、组件化的创建应用。这里面讲到了v-开头的一些指令，以及在HTML中声明同JavaScript中的Vue实例之间的数据绑定。 另外一个就是Vue实例，我们知道了一个Vue应用，就是从创建根Vue实例开始，加上各个可嵌套的组件组成。我们了解到了Vue实例中的选项对象的各种选项，以及$前缀的实例属性和实例方法， 在选项对象中定义的Vue实例创建过程中各个生命周期的钩子函数，通过钩子函数加入我们
vue2模板解析
qq_42880714的博客
06-17 1710
vue2模板解析
Vue 的模板语法来实现上面的效果
05-26
可以使用 Vue 的 v-for 指令结合模板语法实现循环输出，代码如下： ```html <template> <div> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { list: ['item1', 'item2', 'item3'] } } } </script> ``` 其中，v-for 指令接受一个数组 list，将数组中的每个元素循环输出到 li 标签中。其中，item 表示数组中的每个元素，index 表示元素的索引。:key="index" 是为了给每个 li 标签指定一个唯一的 key 值，以便 Vue 进行高效的更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值