vue入门

调用

    
site : {{site}}
    
url : {{url}}
    
{{details()}}

属性调用

        
site : {{site}}
        
url : {{url}}
        
    

HTML属性v-html

v-html="message"

表达式

    {{5+5}}

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

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

    

用户输入 v-model

    
{{ message }}
    

    

过滤器由"管道符 |"指示

  {{ message | capitalize }}

    

//过滤器可以串联：
{{ message | filterA | filterB }}

缩写

v-on 缩写

条件判断

v-if

    
现在你看到我了
    

v-else-if

    

      A
    
    

      B
    
    

      C
    
    

      Not A/B/C
    

    

v-else

    

      Sorry
    
    

      Not sorry
    

    

v-show

    
Hello!

    

循环语句

v-for

  

    

      {{ site.name }}
    
  

 

v-for 迭代对象

  

    

    {{ value }}
    
  

 

第二个的参数为键名：

  

    

    {{ key }} : {{ value }}
    
  

第三个参数为索引：

  

    

     {{ index }}. {{ key }} : {{ value }}
    
  

v-for 迭代整数

  

    

     {{ n }}
    
  

计算属性

们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

div id="app">
  
原始字符串: {{ message }}
  
计算后反转字符串: {{ reversedMessage }}

computed setter

  
{{ site }}

样式绑定

class 属性绑定v-bind:class

数组语法

内联样式

    
菜鸟教程

事件处理器

  增加 1
  
这个按钮被点击了 {{ counter }} 次。

调用函数
v-on:click="greet"

  Say hi
  Say what

事件修饰符

.stop
.prevent
.capture
.self
.once










...

...

按键修饰符

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

表单

输入框

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

复选框

  
单个复选框：
  
  {{ checked }}
    
  
多个复选框：
  
  Runoob
  
  Google
  
  taobao
  

  选择的值为: {{ checkedNames }}

select 列表

  
    选择一个网站
    Runoob
    Google
  
 
  

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

修饰符
.lazy,改变之后才执行，默认是立即

.number 转为 Number 类型
.trim自动过滤用户输入的首尾空格

全局组件

Vue.component(tagName, options)
调用组件

局部组件

Prop

prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"

动态 Prop