Vue-(2)模板语法

前言

• 文本
• Html
• 属性
• 表达式
• 指令
• 参数
• 用户输入
• 过滤器
• 修饰符

示例：

结果如下：

image.png

一：文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值
Vue的使用举例1：

    
    
    


    

        
标题 : {{site}}
        
路径 : {{url}}
        
说明 : {{details()}}
    
    

结果如下：

image.png

上面的代码作简要说明：

data：用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods： 用于定义的函数，可以通过return 来返回函数值。
{{ }}：用于输出对象属性和函数返回值。

Vue的使用举例2：
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

    
    
    


    

        
site : {{site}}
        
url : {{url}}
        
Alexa : {{alexa}}
    
    

结果如下：

image.png

Vue的使用举例3：
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

    
    
    



    

        
site : {{site}}
        
url : {{url}}
        
Alexa : {{alexa}}
    
    

结果如下：

image.png

二：Html

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

    

   
{{message}}

    

运行如果：

image.png

三：属性

HTML 属性中的值应使用 v-bind指令。
以下实例判断use的值，如果为 true 使用 class1 类的样式，否则不使用该类：

  修改颜色
  


  

    v-bind:class 指令
  

    

运行如果：

image.png

四：表达式

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

    {{5+5}}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}
    
菜鸟教程

    

运行结果：

10
YES
BOONUR
菜鸟教程

五：指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

    
现在你看到我了
    

    

运行结果：

image.png

六：参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

    
菜鸟教程

    

v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：

运行结果：

image.png

七：用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

    
{{ message }}
    

    

运行结果：

image.png

v-model 指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用v-on监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：

    
{{ message }}
    反转字符串

    

v-on 缩写
Vue.js为两个最为常用的指令提供了特别的缩写：

运行结果：

image.png

八：过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

{{ message | capitalize }}

过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：

  {{ message | capitalize }}

    

运行结果：

image.png

过滤器可以串联：

{{ message | filterA | filterB }}

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

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

九：修饰符

1、事件修饰符

.stop阻止事件继续传播
.prevent阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive告诉浏览器你不想阻止事件的默认行为

...



...







...

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent只会阻止对元素自身的点击。

2，v-model的修饰符

<1> .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<2> .number
自动将用户的输入值转化为数值类型

<3> .trim
自动过滤用户输入的首尾空格

3，键盘事件的修饰符
在我们的项目经常需要监听一些键盘事件来触发程序的执行，而Vue中允许在监听的时候添加关键修饰符：

对于一些常用键，还提供了按键别名：

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

修饰键：
.ctrl
.alt
.shift
.meta

Do something

与按键别名不同的是，修饰键和keyup事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发keyup.ctrl，必须按下ctrl时释放其他的按键；单单释放ctrl 不会引发事件。

4，element的修饰符 (面试回答加分)
对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。