Vue基础知识2

计算属性

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

基础例子

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

Methods

  <p>Reversed message:"{{ reversedMessage()}}"</p>
  // 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}"
	</div>

	data: {
		isActive: true,
		hasError:false
	}
	// 渲染为：
	<div class="static active"></div>

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

  <div v-bind:class="[activeClass,errorClass]">

  data: {
  activeClass: "active",
  errorClass: "text-danger"
  }
  // 渲染为：
  <div class="active text-danger"></div>

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

  Vue.conponent('my-component',{
  	template: "<p class='foo bar'>Hi</p>"
  })

  <my-component class="baz boo"></my-component>

  // 渲染为：
  <p class="foo bar baz boo">Hi</p>

绑定内联样式

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

  <div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px'}"></div>
  // js
  data: {
    activeColor: "red",
    fontSize: 30
  }

  //直接绑定样式对象
  <div v-bind:style="styleObject"></div>
  //js
  data: {
  styleObject: {
  color: "red",
  fontSize: "13px"
  }
  }

数组语法：将多个样式对象应用到一个元素上
```
  <div v-bind:style="[baseStyles, overridingStyles]">
```
自动添加前缀：当v-bind:style使用需要特定前缀的CSS属性时，Vue.js会自动侦测并添加相应的前缀

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

	<div v-if="type === 'A'">
	A
	</div>
	<div v-else-if="type === 'B'">
	B
	</div>
	<div v-if-else="type === 'C'">
	C
	</div>
	<div v-else>
	Not A/B/C
	</div>

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

  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
  </template>
  <template v-else>
  	<label>Email</label>
  	<input placeholder="Enter your email address" key="email-input">
  </template>

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

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

	<ul id="example-1">
	  <li v-for="item in items">
	    {{ item.message }}
	  </li>
	</ul>
    //js
    var example1 = new Vue({
    el: '#example-1',
    data: {
      items:[
        {message: 'Foo'},
        {message: 'Bar'}
      ]
    }
    }) 
    //v-for 可接受第二参数
    <ul id="example-2">
      <li v-for="(item,index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>
    var example2 = new Vue({
    el: '#example-2',
    data: {
      parentMessage: 'Parent',
      items: [
      { message: 'Foo'},
      { message: 'Bar'}
      ]
    }
    })

对象迭代v-for

  <ul id="repeat-object" class="demo">
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>
  // js
  new Vue({
  el: '#repeat-object',
  data: {
  object: {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
  }
  }
  })
  //第二个参数为键名
  <div v-for="(value, key) in object">
    {{ key }} : {{ value }}
  </div>
  //第三个参数为索引
  <div v-for="(value, key, index) in object">
    {{ index }}.{{ key }}: {{ value }}
  </div>

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

  <li v-for="todo in todos" v-for="!todo.isComplete">
    {{ todo }}
  </li>

显示过滤/排序结果

  <li v-for="n in eventNumbers">{{ n }}</li>
  //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代码

  <div id="example-1">
    <button v-on:click="counter += 1">增加1</button>
    <p>这个按钮被点击了 {{ counter }}次</p>
  </div>
  //js
  var example1 = new Vue({
    el: '#example-1',
    data: {
    counter: 0
    }
  })

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

  <div id="example-2">
    <button v-on:click="greet">Greet</button>
  </div>
  //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)
    }
    }
  }
  })

内联处理器方法

  <div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
  </div>
  //js
  new Vue({
  el: '#example-3',
  methods: {
    say: function(message) {
    alert(message)
    }
  }
  })

事件修饰符

  // 阻止单击事件冒泡
  <a v-on:click.stop="doThis"></a>
  // 提交事件不再重载页面
  <form v-on:submit.prevent="onSubmit"></form>
  // 修饰符可以串联
  <a v-on:click.stop.prevent="doThat"></a>
  //只有修饰符
  <form v-on:submit.pevent></form>
  // 添加事件监听器时使用事件捕获模式
  <div v-on:click.capture="doThis">...</div>
  // 只当事件在该元素本身触发时触发回调
  <div v-on:click.self = "doThis">...</div>

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

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

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

文本

  <input v-model="message" placeholder="edit me">
  <p>Message is:{{ message }}</p>

多行文本

  <span>Multiline message is:</span>
  <p style="white-space: pre-line">{{ message }}</p>
  <br>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>

  // 多个勾选框，绑定到同一数组
  <input type="checkbox" id="jack" value="jack" v-model="checkedName">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="john" v-model="checkedName">
  <label for="john">John</label>
  //js
  new Vue({
  el:"...",
  data: {
    checkedName:[]
  }
  })

单选按钮

  <div id="example-4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked:{{ picked }}</span>
  </div>
  //js
  new Vue({
  el:"#example-4",
  data: {
   picked: ''
  }
  })

选择列表

  <div id="example-5">
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
  </div>
  //js
  new Vue({
  el: '...',
  data: {
  selected: ''
  }
  })

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

	//当选中时，'picked'为字符串"a"
	<input type="radio" v-model="picked" value="a">
	// 'toggle'为'true'或'false'
	<input type="checkbox" v-model="toggle">
	// 当选中时，'selected'为字符串"abc"
	<select v-model="selected">
	  <option value="abc">ABC</option>
	</select>

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

使用组件

  //全局组件注册
  Vue.component("my-component",{
  //选项
  })
  //使用自定义元素
  <div id="example">
    <my-component></my-component>
  </div>
  //创建根实例
  new Vue({
    el: "#example"
  })
  //渲染为
  <div id="example">
    <div>A custom component!</div>
  </div>

局部注册

  var child = {
  template: "<div>A custom component!</div>"
  }

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

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

  <table>
    <my-row>...</my-row>
  </table>
  //自定义组件被认为是无效内容 使用`is`属性解决
  <table>
    <tr is="my-row"></tr>
  </table>

data必须是函数