Vue.js框架学习笔记之二

Vue.js中的样式绑定

class和style是HTML元素的属性，用于设置元素的样式，我们可以通过v-bind来设置样式属性,可绑定一个数据属性或者对象。
v-bind:class="..."
v-bind:style="..."

class实例：

style实例：

	
hello-vue

v-bind:style对象虽然看上去非常像CSS，但其实是一个JS对象，需要在Vue实例中定义，或者可以直接绑定到一个样式对象里。

...
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

样式绑定中的数组语法

示例代码来自RUNOOB.COM

对于v-bind:class和v-bind:style，都可以使用数组语法，将多个样式对象应用到同一元素上。

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

条件语句 v-if

条件语句

var vue = new Vue({
  el:'#vue',
  data:{
    seen:true
  }
  })

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。这表明我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。

同样的，也可以v-else指令和v-else-if给v-if添加一个else块，可以多次使用。

条件语句

元素显示 v-show

v-show指令用法与v-if指令大致一样。

Hello!

不同的是，带有v-show的元素始终会被渲染并保留在DOM中，只是简单地切换元素的CSS属性display。

v-ifVSv-show

v-if会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。有更高的切换开销。
v-show只是简单的基于CSS进行切换，有更高的初始渲染开销。

综上，如果一个元素需要非常频繁的切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好

循环语句 v-for

  

    

        { {item.message} }
    
  

或使用模板输出

v-for指令使用item in items的语法，其中items是原数据数组，item是数组元素迭代的别名。

循环迭代的参数可以不止一个，可以使对象中的各个元素(对象迭代)。

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

事件处理器 v-on:(event)

v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

  
    
    
    
  
  
    

      
时间处理器
      
      OK
      
    
  
  

输出结果

其中：

• INPUT和BUTTON为元素的标签名
• txtName和btnOk为元素id
• 在input组件中没有内嵌内容，所以只输出空格，key为每次键盘键入的内容
• 在button组件中内嵌内容为Ok，没有key元素

v-on指令可以使我们

• 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
• 因为无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
• 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。