Vue模板语法——文本插值、指令、缩写

插值

文本（{{}}、v-text）

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本,双大括号会将数据解释为普通文本，或者采用v-text标签

Message: {{ msg }}

js代码：

var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	})

• 标签将会被替代为对应数据对象上 msg property 的值

• msg变化，插值处的内容会跟随更新

• 使用v-once指定一次插值，不再更新

  这个将不会改变: {{ msg }}
  

HTML（v-html）

为了输出真正的 HTML，你需要使用 [v-html]解析对应的html文本，示例如下

Attribute（v-bind）属性

参照：V-bind详细使用_CaseyWei的博客-CSDN博客_v-bind

Mustache {{}}语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令

javascript表达式

，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

注意事项：

1. 每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
2. 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。
3. 你不应该在模板表达式中试图访问用户定义的全局变量。

{{ var a = 1 }}


{{ if (ok) { return message } }}

指令

基本介绍：

1. 指令 (Directives) 是带有 v- 前缀的特殊 attribute，声明形式上很像Dom元素的属性
2. 一般为单个js表达式，v-for除外
3. 当表达式的值改变时，会响应式地作用于Dom元素。

v-if—确定元素是否渲染，用来插入/移除元素

v-show—元素会渲染，但是会通过display控制显示/隐藏

参数

1. 一些指令能够接收一个“参数”，在指令名称之后以冒号表示，比如v-bind、v-on

2. v-bind 指令可以用于响应式地更新 HTML attribute：

   ...
   

3. v-on 指令，它用于监听 DOM 事件

   ...
   

动态参数

2.6.0 新增

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

 ... 

• attributeName ——作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用
• 比如attributeName值为”href“，等价于 v-bind:href。

 ... 

• 动态参数表达式语法约束：

  1. 某些字符，如空格和引号，避免在[]内通过+等符号拼接
  2. 动态参数会被默认为小写

  
  					点我
  

v-on参数：

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

• 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
  • 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
• 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

修饰符

参照：

• Vue提供了修饰符来帮助我们方便的处理一些事件：

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • lazy修饰符：
    • 默认情况下，v-model默认是在input事件中同步输入框的数据的。
    • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
    • lazy修饰符可以让数据在失去焦点或者回车时才会更新：
  • number修饰符：
    • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
    • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
    • number修饰符可以让在输入框中输入的内容自动转成数字类型：
  • trim修饰符：
    • 如果输入的内容首尾有很多空格，通常我们希望将其去除
    • trim修饰符可以过滤内容左右两边的空格

  举两个例子stop和once

  				
  				
  				
  
  					
  					sssss
  				
  				
  				
  
  					嵌套
  				
  

  简化写法

  [v-bind 缩写]

  
  ...
  
  
  ...
  
  
   ... 
  

  [v-on 缩写]

  
  ...
  
  
  ...
  
  
   ... 
  

测试代码：

	
		
		
		
	
	
		

			

				
元素是否渲染
				
元素是否展示
			

				
				

					点击跳转
					点击事件
					
					点我
					
					点击事件1
					
					点击事件2
					
					
				
				
				
				

					
					sssss
				
				
				

					嵌套