VueNote

vue

---

声明式渲染

元素的id和el属性绑定
==作为全局的dom元素，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统==

  
{{ message }}

Vue.js 模板语法

---

插值

---

文本

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

Html

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

属性

HTML 属性中的值应使用 v-bind 指令。

  修改颜色
  


  

    "v-bind:class 指令"
  

    

表达式支持

Vue.js 完全JavaScript 表达式支持。

指令

指令是带有 v- 前缀的特殊属性。

参数

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

    
First try

    

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

修饰符

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

用户输入

input 有 v-model 指令来实现双向数据绑定
v-model 指令用来在 ==input、select、textarea、checkbox、radio== 等表单控件元素上创建双向数据绑定

    
{{ message }}
    

    

过滤器

自定义过滤器
常见的文本格式化。由"管道符"指示

  {{ message | capitalize }}

    

过滤器可以串联,过滤器是 JavaScript 函数，因此可以接受参数

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

缩写

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

基础语法

---

v-if v-else v-if-else v-for
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

  

    

      {{ site.name }}
    
  

 

数组下标，key，value

  

    

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

v-for 迭代整数

  

    

     {{ n }}
    
  

compute vs method

我们可以使用 methods 来替代 computed，效果上两个都是一样的,但是

1.computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

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

 

2.computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter

  
{{ site }}

watch监听属性

==$watch('属性',function(newValue,oldValue))==

    
计数器: {{ counter }}
    点我

样式绑定

用 v-bind 来设置样式属性(class 与 style)
表达式的结果类型除了字符串之外，还可以是对象或数组
==我们可以为 v-bind:class 设置一个对象，从而动态的切换 class==

==我们也可以在对象中传入更多属性用来动态切换多个 class==

==也可以传入数组==

==我们还可以使用三元表达式来切换列表中的 class==

==Vue.js style(内联样式)==

    
菜鸟教程

//style对象

  
菜鸟教程

//v-bind:style 可以使用数组将多个样式对象应用到一个元素上

  
菜鸟教程

事件处理器(v-on)

直接v-on事件

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

 

封装方法调用

   
  Greet

 

事件修饰符

...

...

按键修饰符

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

==enter,esc,space等==

Vue.js 表单

用 v-model 指令在表单控件元素上创建双向数据绑定。

avatar

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

复选框

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

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

  选择的值为: {{ checkedNames }}