Vue基础知识2

计算属性

• 模板内的表达式，只用于简单的运算；对于复杂逻辑，应当使用计算属性

• 基础例子

  
  

  Original message:"{{ message }}"

  
  

  Computed reversed message:"{{ reversedMessage}}"

  
  
  
  var vm = new Vue({
  el: "#example",
  data: {
  message: "hello"
  },
  computed: {
  // a computed getter
  reversedMessage: function() {
  //"this" 指向vm实例
  return this.message.split("").reverse().join("")
  }
  }
  })

• Methods

  Reversed message:"{{ reversedMessage()}}"

  
  // in component
  methods: {
  reversedMessage: function() {
  return this.message.split("").reverse().join("")
  }
  }
  Note计算属性与method的最终结果相同，不同的是**计算属性是基于它们的依赖进行缓存的，相比而言，只要发生渲染，method调用总会执行该函数

• Watched属性：观察和响应Vue实例上的数据变动；通常使用computed属性代替

• 计算setter

  computed: {
  fullName: {
  //getter
  get: function() {
  return this.firstName + " " + this.lastName
  },
  //setter
  set: function(newValue) {
  var names = newValue.split(" ")
  this.firstName = names[0]
  this.lastName = names[names.length-1]
  }
  }
  }
  当vm.fullName = "John Doe"时，setter会被调用，vm.firstName和vm.lastName会相应更新

Class与Style绑定：操作元素的class列表和内联样式

绑定HTML Class：传给v-bind:class一个对象，以动态地切换class

<div class="static"
v-bind:class="{ active: isActive, "text-danger": hasError}"

data: {
isActive: true,
hasError:false
}
// 渲染为：

• 数组语法：把一个数组传给v-bind:class，以应用一个class列表

  data: {
  activeClass: "active",
  errorClass: "text-danger"
  }
  // 渲染为：
  

• 用在组件上
  定制组件上的class属性会被添加根元素上，这个元素上已经存在的类不会被覆盖

  Vue.conponent('my-component',{
  template: "

  Hi

  "
  })

  // 渲染为：
  

  Hi

绑定内联样式

• 对象语法：v-bind:style,CSS属性名可以用驼峰式或短横分隔命名

  
  // js
  data: {
  activeColor: "red",
  fontSize: 30
  }

  //直接绑定样式对象
  

  
  //js
  data: {
  styleObject: {
  color: "red",
  fontSize: "13px"
  }
  }

• 数组语法：将多个样式对象应用到一个元素上

• 自动添加前缀：当v-bind:style使用需要特定前缀的CSS属性时，Vue.js会自动侦测并添加相应的前缀

条件渲染 v-if、v-else、v-else-if

A

B

C

Not A/B/C

• 用key管理可复用的元素，声明元素的独立性，不需要复用

  
  

• v-show:根据条件展示元素，切换元素的CSS属性display

列表渲染:v-for指令根据一组数组的选项列表进行渲染

• 
  {{ item.message }}
  

//js
var example1 = new Vue({
el: '#example-1',
data: {
items:[
{message: 'Foo'},
{message: 'Bar'}
]
}
})
//v-for 可接受第二参数

• 
  {{ parentMessage }} - {{ index }} - {{ item.message }}
  

var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo'},
{ message: 'Bar'}
]
}
})

• 对象迭代v-for

  
  
  • 
    {{ value }}
    
  
  
  
  // js
  new Vue({
  el: '#repeat-object',
  data: {
  object: {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
  }
  }
  })
  //第二个参数为键名
  
  
  {{ key }} : {{ value }}
  
  
  //第三个参数为索引
  
  
  {{ index }}.{{ key }}: {{ value }}
  

• v-for with v-if:处于同一节点时，v-for的优先级高于v-if

• 
  {{ todo }}
  

• 显示过滤/排序结果

• {{ n }}

//js
data: {
numbers: [1,2,3,4,5]
},
computed: {
eventNumbers: function() {
return this.number.filter(function(number) {
return number % 2 === 0
})
}
}

事件处理器

• 监听事件：v-on指令监听DOM事件触发一些JavaScript代码

  
  增加1
  

  这个按钮被点击了 {{ counter }}次

  
  
  
  //js
  var example1 = new Vue({
  el: '#example-1',
  data: {
  counter: 0
  }
  })

• 方法事件处理器：v-on接收一个定义的方法来调用

  
  Greet
  
  
  //js
  var example2 = new Vue({
  el: '#example-2',
  data: {
  name: 'Vue.js'
  },
  methods: {
  greet: function(event) {
  alert('hello' + this.name + '!')
  if(event) {
  alert(event.target.tagName)
  }
  }
  }
  })

• 内联处理器方法

  
  Say hi
  Say what
  
  
  //js
  new Vue({
  el: '#example-3',
  methods: {
  say: function(message) {
  alert(message)
  }
  }
  })

• 事件修饰符

  // 阻止单击事件冒泡
  
  // 提交事件不再重载页面
  

  
  // 修饰符可以串联
  
  //只有修饰符
  
  
  // 添加事件监听器时使用事件捕获模式
  
  ...
  
  // 只当事件在该元素本身触发时触发回调
  
  ...

• 键值修饰符 v-on监听键盘事件

  //keycode为13时调用 vm.submit()
  
  //常用键提供别名 v-on可缩写@
  <input @keyup.enter="submit">

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

• 文本

  
  

  Message is:{{ message }}

• 多行文本

  Multiline message is:
  

  {{ message }}

  
  
  
  

• 复选框

  
  {{ checked }}

  // 多个勾选框，绑定到同一数组
  
  Jack
  
  John
  //js
  new Vue({
  el:"...",
  data: {
  checkedName:[]
  }
  })

• 单选按钮

  
  
  One
  
  
  
  Two
  
  
  Picked:{{ picked }}
  
  
  //js
  new Vue({
  el:"#example-4",
  data: {
  picked: ''
  }
  })

• 选择列表

  
  请选择 A B C
  Selected: {{ selected }}
  
  
  //js
  new Vue({
  el: '...',
  data: {
  selected: ''
  }
  })

绑定value:v-model绑定的value通常是静态字符串

//当选中时，'picked'为字符串"a"

// 'toggle'为'true'或'false'

// 当选中时，'selected'为字符串"abc"
ABC

组件：扩展HTML元素，封装可重用的代码

使用组件

• 注册

  //全局组件注册
  Vue.component("my-component",{
  //选项
  })
  //使用自定义元素
  

  
  
  
  
  //创建根实例
  new Vue({
  el: "#example"
  })
  //渲染为
  
  
  

  A custom component!

  
  

• 局部注册

  var child = {
  template: "

  A custom component!
  "
  }

  new Vue({
  // ...
  components: {
  //将只在父模板可用
  "my-component": Child
  }
  })

• DOM模板解析说明
  像<ul>,<ol>,<table>,<select>限制了能被它包裹的元素，自定义组件在这些元素中使用时会出现问题

  
  ...
  
  //自定义组件被认为是无效内容 使用is属性解决
  
  
  

• data必须是函数