Vue入门第2天-------Vue模板语法(一)

小鱼儿 2023-07-07 12:41 54阅读 0赞

## 一、Vue模板语法 ##

### 1.1前端渲染 ###

**前端渲染**

把数据填充到HTML标签中

**前端渲染方式**

*  原生js拼接字符串
 *  使用前端模板引擎
 *  使用Vue特有的模板语法

### 1.2指令 ###

**什么是指令？**

> 自定义属性就是指令  
> **指令的格式**：以v-开始（比如：v-cloak）

**v-cloak指令的用法**

1.  提供样式

[v-cloak]{ 
     	display:none;
     	}

1.  在插值表达式所在的标签中添加v-cloak指令

使用v-cloak是因为插值表达式存在闪动问题。

> **解决问题的原理**：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

### 数据绑定指令 ###

*  v-text 填充纯文本  
    相比插值表达式更加简洁
 *  v-html 填充HTML片段  
    存在安全问题  
    本网站内部数据可以使用，来自第三方的数据不可以用
 *  v-pre 填充原始信息  
    显示原始信息，跳过编译过程（分析编译过程）

### 数据响应式 ###

*  如何理解响应式  
    html5中的响应式（屏幕尺寸的变化导致样式的变化）  
    数据的响应式（数据的变化导致页面内容的变化）
 *  什么是数据绑定  
    数据绑定：将数据填充到标签中
 *  v-once只编译一次  
    显示内容之后不再具有响应式功能  
    **v-once的应用场景：** 如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提供性能。

### 双向数据绑定 ###

**什么是双向数据绑定？**

> 用户去修改页面中的表单输入域中的内容会影响数据中的内容变化；数据中的内容变化会影响页面中数据绑定的内容的变化。

**双向数据绑定分析：**

*  v-model指令用法:

**MVVM设计思想**

1.  M(model)----提供数据
2.  V(view)----提供页面展示效果
3.  VM(View-Model)----实现控制逻辑，把两者结合在一起

### 事件绑定 ###

**Vue如何处理事件？**

*  v-on指令用法

*  v-on简写形式

**事件函数的调用方式**

*  直接绑定函数名称

<button v-on:click='say'>Hello</button>

*  调用函数

**例子：**

<div id="app">
    			<div>{ { num}}</div>
    			<div>
    				<button v-on:click="num++">点击1</button>
    				<button @click="num++">点击</button>
    				<button @click="handle">点击2</button>
    				<button @click="handle()">点击3</button>
    			</div>
    		</div>
    		<script src="js/vue.min.js"></script>
    		<script>
    			var vm = new Vue({ 
    				el: '#app',
    				data:{ 
    					num:0
    				},
    				methods:{ 
    					handle:function(){ 
    						//这里的this是Vue的实例对象
    						this.num++;
    					}
    				}
    			})
    		</script>

注意：函数必须得定义在methods当中，这里的this是Vue的实例对象。

**事件函数参数传递**

*  普通参数和事件对象

> 注意：
> 
> 1.  如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
> 2.  如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

**事件修饰符**

*  .stop阻止冒泡

*  .prevent阻止默认行为

> *还有一些其它的事件修饰符，可以看官网之后练一下！*

**按键修饰符**

*  .enter回车键

*  .delete删除键

> *还有一些其它的按键修饰符，可以看官网之后练一下！*

**自定义按键修饰符**

*  全局config.keyCodes对象

Vue.config.keyCodes.f1 = 112

规则：自定义按键修饰符名字是自定义的，但是对应的值必须的按键对应event.keyCode值

## 二、简单计算器案例 ##

**需求** ：实现简单的加法计算，分别输入数值a和数值b，点击计算按钮，结果显示在下面。

**思路：**

1.  通过v-model指令实现数值a和数值b的绑定
2.  给计算按钮绑定事件，实现计算逻辑
3.  将计算结果绑定到对应位置

**代码：**

<div id="app">
    			<h1>简单计算器</h1>
    			<div>
    				<span>数值A</span>
    				<span>
    					<input type="text" v-model="a"/>
    				</span>
    			</div>
    			<div>
    				<span>数值B</span>
    				<span>
    					<input type="text" v-model="b"/>
    				</span>
    			</div>
    			<div>
    				<button v-on:click="handle">计算</button>
    			</div>
    			<div>
    				<span>计算结果:</span>
    				<span v-text="result"></span>
    			</div>
    		</div>
    		<script src="js/vue.min.js"></script>
    		<script>
    			var vm = new Vue({ 
    				el:'#app',
    				data:{ 
    					a:'',
    					b:'',
    					result:''
    				},
    				methods:{ 
    					handle:function(){ 
    						//实现计算逻辑
    						this.result=parseInt(this.a)+parseInt(this.b);
    					}
    				}
    			})
    		</script>