vue学习（二）

学习vue（二）

1.vue计算属性

 <p>计算后反转字符串: {{ reversedMessage }}</p>
 var vm = new Vue({
 	computed: {
	// 计算属性的 getter
	reversedMessage: function () {
	}}

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

ps：computed计算的结果如果不发生改变就不会触发reversedMessage这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法

computed setter

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

computed: {
site: {
  // getter
  get: function () {
    return this.name + ' ' + this.url
  },
  // setter
  set: function (newValue) {
    var names = newValue.split(' ')
    this.name = names[0]
    this.url = names[names.length - 1]
  }
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'name1 URL1';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

2.监听属性

<div id = "computed_props">
     千米 : <input type = "text" v-model = "kilometers">
     米 : <input type = "text" v-model = "meters">
  </div>
   <p id="info"></p>
  <script type = "text/javascript">
     var vm = new Vue({
        el: '#computed_props',
        data: {
           kilometers : 0,
           meters:0
        },
        methods: {
        },
        computed :{
        },
        watch : {
        	//当kilometers的值发生改变时触发
           kilometers:function(val) {
              this.kilometers = val;
              this.meters = val * 1000;
           },
           meters : function (val) {
              this.kilometers = val/ 1000;
              this.meters = val;
           }
        }
     });
     // $watch 是一个实例方法
	vm.$watch('kilometers', function (newValue, oldValue) {
		// 这个回调将在 vm.kilometers 改变后调用
	    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
	})
  </script>

3.样式绑定

a.单个class

<div v-bind:class="{'class1': boolean值 }"></div>

如果Boolean值为true，则次div有class1样式，反之，则无

b.多个class

 <div class="static" v-bind:class="{ 'class1': boolean值, 'class2': Boolean值 }"></div>

分别通过Boolean确定是否有class1和class2样式

c.绑定数据里的一个对象

<div v-bind:class="classObject"></div>
new Vue({
	 data: {
		 classObject: {
  				'class1': Boolean值,
  				'class2': Boolean值
		 }
	 }
})

可理解为替换，将classObject中的数据替换到div中的classObject

d.数组语法

<div v-bind:class="['class1', 'class2']"></div>

没有boolean值的判别，直接用一个数组把样式全列出来

e.三元表达式切换列表中的class

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
new Vue({
  data: {
    isActive: true,
	activeClass: 'active',
    errorClass: 'text-danger'
  }
})

在数组中既可以列class的名字，也可以使用绑定data数据的方式

f.style(内联样式)

	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">内联样式</div>
	<script>
	new Vue({
 		 data: {
    		activeColor: 'green',
			fontSize: 30
 		 }
	})

也可以不用绑定data数据的方式，但是，那样的话就显示不出v-bind作用了

g.style绑定样式对象

<div v-bind:style="styleObject">style对象</div>

new Vue({
  	data: {
   		 styleObject: {
     		 color: 'green',
     		 fontSize: '30px'
  		  }
 	 }
})

h.style绑定多个（数组）对象

<div v-bind:style="[baseStyles, overridingStyles]">多个对象</div>

new Vue({
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})

个人觉得直接使用比较鸡肋，如果加上三元表达式就有用了

4.事件处理器v-on指令

直接在click里书写

<button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
  
  new Vue({
  data: {
    counter: 0
  }
})

定义一个方法来调用

<button v-on:click="greet">Greet</button>
var app = new Vue({
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {  }
  }
})

这是比较常见的一种方式

事件修饰符

.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
<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.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

注意：A的keycode是65

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
全部的按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

5.vue表单v-model

输入框

<input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
new Vue({
  data: {
    message: '嘿嘿',
  }
})

绑定之后数据会实时同步

复选框

	<p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
 
	new Vue({
	  data: {
	    checked : false,
	    checkedNames: []
	  }
	})

注意：v-model的值是一样的
当复选框中绑定的数据是数组时，才会将value的值赋给data数据中对应的属性，当时boolean或字符串时，只会传true和false。

单选框

<input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'Runoob'
  }
})

select列表

<select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.runoob.com">Runoob</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>

new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})

修饰符

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，可以添加一个修饰符 lazy ，从而转变为在change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">