Vue 2.x教程之基础API

- 使用 `{{ }} / <span v-text="msg"></span>` 绑定数据- `{{ }}` 纯文本绑定，单向，随vm变化而变化- `<span v-once>{{ msg }}</span>` 纯文本，单次，不跟随vm变化- `<span v-html="msg"></span>` 不转义html标签，绑定html

- 使用 `v-bind` 指令绑定数据至标签属性- `<a v-bind:id="msgId"></a> 简写 <a :id="msgId"></a>`

//加减乘除、三元运算、方法调用{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>//错误用法<!-- 这是语句，不是表达式 -->{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->{{ if (ok) { return message } }}

- 使用 `|` 对原始值进行处理- 用于属性绑定与 `{{ }}`- `{{ msg | capitalize }} <a :id="msgId | formatId"></a>`- 可以串联 `{{ msg | filterA | filterB }}`- 可以接收参数 `{{ msg | filterA(arg1, arg2) }}`

- 带有 `v-` 前缀的特殊属性- 当其表达式的值改变时相应地将某些行为应用到 DOM 上- `v-bind/v-for/v-html/v-on/v-if/...`- `v-bind` 缩写 `<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a><a :href="url" rel="external nofollow" rel="external nofollow" ></a>`- `v-on` 缩写 `<a v-on:click="doSomething"></a><a @click="doSomething"></a>`

//全局注册Vue.filters('capitalize',value=>{ if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1)})//局部注册filters: { capitalize: function (value, arg1) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }}//使用<span>{{msg | capitalize(arg1) }}

//全局注册// 注册一个全局自定义指令 v-focusVue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() }})//局部注册directives: { focus: { // 指令的定义--- }}//使用<input v-focus />

var vm = new Vue({ name:'root', // 数据 data: { a: 1 } / Function, // data类型根实例为Object，组件中为Function props:[]/{}, // 设置父组件传递给子组件的数据限制 computed:{}, // 计算属性 watch:{}, // 监控属性 methods:{}, // 事件操作 // 资源 directives:{}, // 内部指令 filters:{}, // 内部过滤器 components:{}, // 内部组件 // 生命周期：实例创建 => 编译挂载 => 组件更新 => 销毁 beforeCreate(){ console.log('beforeCreate ==> 实例创建') }, created(){ // 可以操作data, 但未生成DOM（未挂载）发起异步请求，初始化组件状态数据 data console.log('created ==> 实例创建完成，属性已绑定') }, beforeMount(){ console.log('beforeMount ==> 模板编译/挂载之前') }, mounted(){ // 已生成DOM到document中，可访问this.$el属性 console.log('mounted ==> 模板编译/挂载之后') }, beforeUpdate(){ console.log('beforeUpdate ==> 组件更新之前') }, updated(){ // 操作DOM $('#box1') console.log('updated ==> 组件更新之后') }, activated(){ // 操作DOM $('#box1') console.log('activated ==> 组件被激活时（for keep-alive组件）') }, deactivated(){ console.log('deactivated ==> 组件被移除时（for keep-alive组件）') }, beforeDestroy(){ // 解除事件绑定，销毁非Vue组件实例等 如：this.$off('event1') select2.destory() console.log('beforeDestroy ==> 组件销毁之前') }, destroyed(){ console.log('destroyed ==> 组件销毁之后') }})

<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` points to the vm instance return this.message.split('').reverse().join('') } }})

data: { firstName: 'Foo', lastName: 'Bar'},computed: { fullName: function () { return this.firstName + ' ' + this.lastName }}

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] } }}

var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 发生改变，这个函数就会运行 question: function (newQuestion) { this.answer = '正在输入...' this.getAnswer() } }, methods: { // _.debounce 是一个通过 lodash 限制操作频率的函数。 // 在这个例子中，我们希望限制访问yesno.wtf/api的频率 // ajax请求直到用户输入完毕才会发出 getAnswer: _.debounce( function () { if (this.question.indexOf('?') === -1) {  this.answer = '需要一个问题标识/'?/''  return } this.answer = '请稍候...' var vm = this axios.get('https://yesno.wtf/api')  .then(function (response) {  vm.answer = _.capitalize(response.data.answer)  })  .catch(function (error) {  vm.answer = 'Error! Could not reach the API. ' + error  }) }, // 这是我们为用户停止输入等待的毫秒数 500 ) }})

data:()=>{ return { isActive: true, hasError: false, classObj:{ 'active':true, 'align-left':true, }, activeClass: 'active', errorClass: 'text-danger', styleObj:{ color: 'red', fontSize: '13px' }, activeColor: 'red', fontSize: 30, baseStyles:{color: 'red'}, overridingStyles: { fontSize: '20px'} }}

<div v-bind:class="classObj"></div>//<div class="active align-left"></div><div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>//<div class="static active"></div>

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><div v-bind:style="styleObj"></div>// <div style=" color:'red'; fontSize:'13px'; "></div>

<div v-bind:class="[activeClass, errorClass]">// <div class="active text-danger">// 使用三元表达式<div v-bind:class="[isActive ? activeClass : '', errorClass]">// 数组语法中使用对象语法<div v-bind:class="[{ active: isActive }, errorClass]">//绑定style<div v-bind:style="[baseStyles, overridingStyles]">

<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>

<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>

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

<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>

data: { items: [ {message: 'Foo' }, {message: 'Bar' } ] object: {  firstName: 'John',  lastName: 'Doe',  age: 30 }}

<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>

<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul>

<div v-for="(value, key) in object"> {{ key }} : {{ value }}</div>

<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index"></my-component>

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

<ul v-if="shouldRenderTodos"> <li v-for="todo in todos"> {{ todo }} </li></ul>

<div v-for="item in items" :key="item.id"> <!-- 内容 --></div>

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

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

<button v-on:click="warn('hello', $event)">Submit</button>methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() 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.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture="doThis">...</div><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 2.1.4--><a v-on:click.once="doThis"></a><!-- 组件中的原生事件 --><my-component @click.native="onClick"></my-component>

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

<!-- 同上 --><input v-on:keyup.enter="submit">

<!-- Alt + C --><input @keyup.alt.67="clear">

<input v-model="something">// 等同于<input v-bind:value="something" v-on:input="something = $event.target.value">

// 文本框<input v-model="message" placeholder="edit me">// 文本域（支持换行）<textarea v-model="message" placeholder="add multiple lines"></textarea>// 复选框// 单选（返回 true/false ）<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>// 多选 （返回一个数组 ['jack', 'john']）<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span>//单选框 （返回选中的值）<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>// 下拉框// 单选 （返回选中的值）<select v-model="selected"> <option>A</option> <option>B</option> <option>C</option></select>// 多选（返回一个数组 ['A','B']）<select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option></select>

<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option></select>

<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">// 当选中时vm.toggle === vm.a// 当没有选中时vm.toggle === vm.b

<!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >// 自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）<input v-model.number="age" type="number">// 过滤用户输入的首尾空格<input v-model.trim="msg">

<currency-input v-model="price"></currency-input>Vue.component('currency-input', { template: ' <span>  $  <input  ref="input"  v-bind:value="value"  v-on:input="updateValue($event.target.value)"  > </span> ', props: ['value'], methods: { // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制 updateValue: function (value) {  var formattedValue = value  // 删除两侧的空格符  .trim()  // 保留 2 小数位  .slice(0, value.indexOf('.') + 3)  // 如果值不统一，手动覆盖以保持一致  if (formattedValue !== value) {  this.$refs.input.value = formattedValue  }  // 通过 input 事件发出数值  this.$emit('input', Number(formattedValue)) } }})