跟着网上学Vue之插值

冷不防 2023-07-20 12:12 44阅读 0赞

## 插值 ##

1.  **文本插值**

*  数据绑定最常见的形式就是使用 `{ {...}}（双大括号）`的文本插值

**以下内容在body标签中**

//vue引用
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    //Html
    <div id="hv">
    			<h1>{ { title}}</h1>
    			<h3>{ { message}}</h3>
    			<h5>{ { way()}}</h5>
    			
    		</div>

Vue 实例提供了一些有用的实例属性与方法。**它们都有前缀 $，以便与用户定义的属性区分开来。**

运行结果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NjA1MTQ1_size_16_color_FFFFFF_t_70]

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

代码演示：

效果图：  
![在这里插入图片描述][20200401152529741.png]

1.  v-bind（属性）

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

代码演示：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<style type="text/css">
    			.class1{ 
    				background-color: aqua;
    				
    			}
    		</style>
    	</head>
    	<body>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="test">
    			
    			<label>颜色修改</label><input type="checkbox" v-model="mess"/>
    			<div id="" v-bind:class="{'class1':mess}">
    				这是演示框
    			</div>
    			<script type="text/javascript">
    				var v = new Vue({ 
    					el:'#test',
    					data:{ 
    						mess:false
    					}
    				});
    			</script>
    		</div>
    	</body>
    </html>

效果图：  
![在这里插入图片描述][20200401160320207.png]  
![在这里插入图片描述][20200401160331591.png]  
其中`v-bind:class="{'class1':mess}`可以缩写成：`:class="{'class1':mess}`  
4. 表达式

**body标签内写**

![在这里插入图片描述][20200401161225586.png]  
![在这里插入图片描述][20200401161243540.png]

1.  指令  
    指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NjA1MTQ1_size_16_color_FFFFFF_t_70 1]  
可修改saw值查看变化。

1.  参数

*  参数在指令后以冒号指明

点击文字便会跳转到我的博客（嘻嘻嘻~~~）  
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

1.  修饰符

*  修饰符是以半角句号`.`指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

`v-on:click`可以缩写为：`@click`

## 补充——循环 ##

*  v-for 指令可以绑定数组的数据来渲染一个项目列表

效果图：  
![在这里插入图片描述][20200401165422199.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NjA1MTQ1_size_16_color_FFFFFF_t_70]: /images/20230528/0b3f69185dbb403ba73aa30fca933765.png
[20200401152529741.png]: /images/20230528/bc295764c7bf46768afa6daa1a12bc2d.png
[20200401160320207.png]: /images/20230528/97616024b751450f83519603dfb6a97e.png
[20200401160331591.png]: /images/20230528/348473cbaf724a30afe0f9c88b32b84d.png
[20200401161225586.png]: /images/20230528/8ab9b83a7a0d4e7e87fe3fdf22c0774d.png
[20200401161243540.png]: /images/20230528/edb98c960958454d901e57d159503a2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NjA1MTQ1_size_16_color_FFFFFF_t_70 1]: /images/20230528/388d43d445eb4270a20cc91e938ee94e.png
[20200401165422199.png]: /images/20230528/5927192f786041fc9c3348f1afa330cf.png