vue.js常用语法

（注：此笔记较长，提取了vue常用的语法功能，作为工具可搜索关键字查看）

1、文本：使用 {{...}}（双大括号）的文本插值

  
{{ message }}

2、html

　　使用v-html指令输出html的值

3、属性：属性的值使用 v-bind ,可绑定样式等

　　以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

 

    v-bind:class 指令
  

4、表达式：支持js

5、指令：带有 v- 前缀的特殊属性。

      用于在表达式的值改变时，将某些行为应用到 DOM 上。 例子， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

    
现在你看到我了

    

6、参数：在指令后用冒号指明

　　绑定：

    
菜鸟教程

    

  　　监听:

7、修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

8、用户输入

　v-model实现双向绑定，在 input、select、textarea、checkbox、radio 等表单控件元素自动更新绑定的元素的值。

9、按钮的事件可以使用 v-on 监听事件

10、过滤器

{{ message | capitalize }}

 v-bind:id="rawId | formatId">

　　过滤器可以串联：

{{ message | filterA | filterB }}

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

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

11、缩写

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

　　v-bind

　　v-on

12、条件判断

　　v-if

　　v-else

　　v-else-if

　　v-show

Hello!
    
if="type === 'A'">
      A
    
    
else-if="type === 'B'">
      B
    
    
else-if="type === 'C'">
      C
    
    
else>
      Not A/B/C
    

13、循环语句

　　v-for：需要用site in sites 的特殊语法

　　v-for使用方式一

  

    
for="site in sites">
      {{ site.name }}
    
  

 

　　输出结果：

        

　　v-for使用方式二：通过模板使用

　　输出结果：

　　

　　v-for使用方式三：通过对象属性使用

  

    
for="value in object">
    {{ value }}
    
  

 

　　输出结果：

　　　

　　多个参数

  

    
for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    
  

　　输出结果：

　　

　　v-for使用方式四：迭代整数

  

    
for="n in 10">
     {{ n }}
    
  

　　输出结果：

　　

 14、反转字符串：message.split('').reverse().join('')

 

  
原始字符串: {{ message }}
  
计算后反转字符串: {{ reversedMessage }}

 

　　输出结果：

　　

 　　（此处message更新，reversedMessage也会同步更新）

 

  　　另一种写法

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

15、computed 的getter和setter方法：computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('
');
document.write('url: ' + vm.url);

16、监听属性：watch 会监听自身变化的值，实时改变

    
计数器: {{ counter }}
    点我

　输出效果：每点击一次按钮，数据+1，watch会自动监控值的变化并同步做出反应

　watch的第二个案例，米与千米

    千米 : 
    米 : 

　　输出效果：

　　    

 

　　改为10：

　　

17、v-bind 绑定样式有几种方式总结：

　　1）绑定样式名class显示与否控制，可用多个属性来动态显示

　　2）绑定class为数据里的一个对象的方式

　　3）还可以绑定返回对象的属性

　　4）可以把数组传给class

　　5）可以用三元表达式来切换class

　　6）可以直接在v-bind：style直接设置样式

　　7）可以直接绑定一个样式对象

　　8）可以同时绑定多个样式对象

　　此段于https://www.runoob.com/vue2/vue-class-style.html

18、v-on:事件监听

　　事件修饰符

...

...

　　按键修饰符

　　Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

　　记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

　全部的按键别名：

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .meta

　　实例

Do something

19、关于表单的双向数据绑定：v-model

　　input和textarea 元素的数据绑定

  
input 元素：
  
  
消息是: {{ message }}
    
  
textarea 元素：
  
{{ message2 }}
  

 

　　输出效果：改变文本框内容，显示信息同步改变

  

 

 

 　　复选框的数据双向绑定

　　 复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

  
单个复选框：
  
  for="checkbox">{{ checked }}
    
  
多个复选框：
  
  for="runoob">Runoob
  
  for="google">Google
  
  for="taobao">taobao
  

  选择的值为: {{ checkedNames }}

 

　　效果：

选中前   选中后    

 

　　单选框的数据绑定

  
  for="runoob">Runoob
  

  
  for="google">Google
  

  选中值为: {{ picked }}

 

　　效果：

选中第一个                                             选中第二个

                           

 

 

 　　select列表数据绑定

  
    选择一个网站
    Runoob
    Google
  
 
  

      选择的网站是: {{selected}}
  

 

　　效果：

        

 

 

 

 20、v-model的修饰符

　　.lazy:  转变为change事件中同步

　　.number

　　如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

　　.trim

　　自动过滤首尾空格

21、组件

　　组件component是vue.js最强大的功能，几乎所有页面都可以用独立复用组件来组成

　　注册全局组件的语法，tagName 为组件名，options 为配置选项

Vue.component(tagName, options)

　　调用方式

　　全局组件实例

　　局部组件，只能在当前实例使用

　　组件的属性prop，作业是接收父组件传输的数据，需要显式声明

　　动态prop：通过v-bind 实现动态效果

    

    for="item in sites" v-bind:todo="item">
      

 

　　注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

 　　prop验证

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

　　当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

　　type 可以是下面原生构造器：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

　　type 也可以是一个自定义构造器，使用 instanceof 检测。

　　

　　prop的自定义事件

　　父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

　　使用v-on

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

    

      
{{ total }}
      
      
    

 

　　如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on