vue语法基础

1.插值---数据绑定

输出		template	data
文本	{{}}	<p>{{ message }}</p>	message: 'AAA'
支持表达式	{{}}	{{ message.split('').reverse().join('') }}	message: 'welcome'
html代码	v-html	<div v-html="message"></div>	message: '<h1>AAA</h1>'
html属性	v-bind	<div v-bind:class="{'class1': use}"></div>	use: false

• v-bind:缩写:

2.指令---v- 前缀的特殊属性

属性v-bind，事件监听v-on，条件语句v-if，循环语句v-for

输出	指令	template	data/methods
响应 HTML 属性	v-bind	<a v-bind:href="url">aaa</a>	data: {url:'http://xxx.com'}
动态绑定 props 的值到父组件的数据	v-bind	<child v-bind:message="parentMsg"></child>	Vue.component('child', { props: ['message1'],template: '<span>{{ message1 }}</span>'})
* 监听 DOM 事件	v-on	<a v-on:click="func">	methods: {func: function () {this.seen = false}
* 修饰符：调用 event.preventDefault()	v-on	<form v-on:submit.prevent="onSubmit"></form>
条件判断是否插入 p 元素	v-if	<p v-if="seen">看到</p>	data: {seen: true}
判断随机数是否大于0.5	v-else	<div v-if="Math.random()>0.5">Sorry</div><div v-else>Not sorry</div>
链式的多次使用	v-else-if	<div v-if="type === 'A'">A</div><div v-else-if="type==='B'">B</div><div v-else>Not A/B</div>
展示元素	v-show	<p v-show="seen">看到</p>	data: {seen: true}
* 迭代数组	v-for	<li v-for="site in sites">{{ site.name }}</li>	data: {sites: [{ name: 'AAA' },{ name: 'BBB' }]}
* 迭代对象	v-for	<li v-for="(value, key, index) in object">{{index}}.{{key}}:{{value}}</li>	data: {object: {name: 'zx',age:'28',}}
* 迭代整数	v-for	<li v-for="n in 10">{{n}}</li>

• v-on:缩写@
• 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault()

事件处理器 v-on

	template
	<button v-on:click="counter += 1">增加 1</button>
定义的方法	<button v-on:click="greet">Greet</button>	methods: {greet: function (event) {}
内联 js语句	<button v-on:click="say('hi')">Say hi</button>	methods: {say: function (msg) {}

• 事件修饰符

<!-- 阻止单击事件冒泡 -->
<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>

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
//记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：
.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space
.up .down .left .right .ctrl .alt .shift .meta

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

3.用户输入---表单双向数据绑定v-model

v-model: 在 input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

输出	template	data
input	{{ message }}<input v-model="message">	message: 'welcome!'
单个复选框	<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>	checked : false
多个复选框	<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"><label for="runoob">Runoob</label>...	checkedNames: []
单选按钮	<input type="radio" id="runoob" value="Runoob" v-model="picked"><label for="runoob">Runoob</label>	picked : 'Runoob'
select 列表	<select v-model="selected" name="fruit"><option value="">aa</option></select>

修饰符	template
.lazy	<input v-model.lazy="msg" >	在 change 事件中同步
.number	<input v-model.number="age" type="number">	输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
.trim	<input v-model.trim="msg">	过滤用户输入的首尾空格

过滤器

输出	指令	template	methods
第一个字母转为大写	{{}}	{{ message|capitalize }}	capitalize: function (value) { return value.charAt(0).toUpperCase() + value.slice(1) }
	v-bind	<div v-bind:id="rawId | formatId"></div>

样式绑定

表达式的结果类型除了字符串之外，还可以是对象或数组。

输出	template	结果
设置一个对象，从而动态的切换 class:	<div v-bind:class="{ active: isActive }"></div>	class="active"
对象中传入更多属性用来动态切换多个 class	<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError}"></div>	class="static active text-danger"
数组语法	<div v-bind:class="[activeClass, errorClass]"></div>	class="active text-danger"
直接绑定数据里的一个对象	<div v-bind:class="classObject"></div>	代码
三元表达式来切换列表中的 class	<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
*内联样式	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">	<div style="color: green; font-size: 30px;">
*样式对象	<div v-bind:style="styleObject">
*数组将多个样式对象	<div v-bind:style="[baseStyles, overridingStyles]">

• text-danger 类背景颜色覆盖了 active 类的背景色
• 当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

计算属性

处理一些复杂逻辑，都写在模板里不好理解

输出	指令	template	computed
计算后反转字符串		<p>{{ reversedMsg }}</p>	reversedMsg: function () { return this.message.split('').reverse().join('')}

• this 指向 vm 实例
• computed vs methods：可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用methods属性。
• computed setter:computed属性默认只有getter，不过在需要时你也可以提供一个setter

var vm = new Vue({
  el: '#app',
  data: {
        name: 'zx',
        age: '28'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.age
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.age 也会被对应更新
vm.site = 'zxa 18';
document.write('name: ' + vm.name);//zxa
document.write('<br>');
document.write('url: ' + vm.url);//18

监听属性

通过 watch 来响应数据的变化。

<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:function(val) {
            this.kilometers = val;
            this.meters = this.kilometers * 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>