Vue.js 2.0 快速上手 - 基础篇

var data = { a: 1 } var vm = new Vue({  el: '#example',  data: data,  created: function () {  // `this` points to the vm instance  console.log('a is: ' + this.a)  } }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true // $watch is an instance method vm.$watch('a', function (newVal, oldVal) {  // this callback will be called when `vm.a` changes }) 

<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('')  }  } }) </div> 

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

<div id="demo">{{ fullName }}div> 

var vm = new Vue({  el: '#demo',  data: {  firstName: 'Foo',  lastName: 'Bar',  fullName: 'Foo Bar'  },  watch: {  firstName: function (val) {  this.fullName = val + ' ' + this.lastName  },  lastName: function (val) {  this.fullName = this.firstName + ' ' + val  }  } }) 

var vm = new Vue({  el: '#demo',  data: {  firstName: 'Foo',  lastName: 'Bar'  },  computed: {  fullName: function () {  return this.firstName + ' ' + this.lastName  }  } }) 

<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js">script> <script src="https://unpkg.com/lodash@4.13.1/lodash.min.js">script> <script> var watchExampleVM = new Vue({  el: '#watch-example',  data: {  question: '',  answer: 'I cannot give you an answer until you ask a question!'  },  watch: {  // whenever question changes, this function will run  question: function (newQuestion) {  this.answer = 'Waiting for you to stop typing...'  this.getAnswer()  }  },  methods: {  // _.debounce is a function provided by lodash to limit how  // often a particularly expensive operation can be run.  // In this case, we want to limit how often we access  // yesno.wtf/api, waiting until the user has completely  // finished typing before making the ajax request. To learn  // more about the _.debounce function (and its cousin  // _.throttle), visit: https://lodash.com/docs#debounce  getAnswer: _.debounce(  function () {  var vm = this  if (this.question.indexOf('?') === -1) {  vm.answer = 'Questions usually contain a question mark. ;-)'  return  }  vm.answer = 'Thinking...'  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  })  },  // This is the number of milliseconds we wait for the  // user to stop typing.  500  )  } }) script> 

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

<div v-bind:class="classObject">div> 

data: {  classObject: {  active: true,  'text-danger': false  } } 

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

data: {  activeClass: 'active',  errorClass: 'text-danger' } 

<div v-bind:class="[isActive ? activeClass : '', errorClass]"> <div v-bind:class="[{ active: isActive }, errorClass]"> 

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div> 

		

			"styleObject">div>  data: {  styleObject: {  color: 'red',  fontSize: '13px'  } } 
		

<h1 v-if="ok">Yesh1>  <h1 v-if="ok">Yesh1> <h1 v-else>Noh1> 

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

<h1 v-show="ok">Hello!h1> 

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

<ul>  <template v-for="item in items">  <li>{{ item.msg }}li>  <li class="divider">li>  template> ul> 

<ul id="repeat-object" class="demo">  <li v-for="value in object">  {{ value }}  li> ul> 

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> 

<div id="todo-list-example">  <input  v-model="newTodoText"  v-on:keyup.enter="addNewTodo"  placeholder="Add a todo"  >  <ul>  <li  is="todo-item"  v-for="(todo, index) in todos"  v-bind:title="todo"  v-on:remove="todos.splice(index, 1)"  >li>  ul> div> 

Vue.component('todo-item', {  template: '\  
		

			\  {{ title }}\  X\  
		
\  ',  props: ['title'] }) new Vue({  el: '#todo-list-example',  data: {  newTodoText: '',  todos: [  'Do the dishes',  'Take out the trash',  'Mow the lawn'  ]  },  methods: {  addNewTodo: function () {  this.todos.push(this.newTodoText)  this.newTodoText = ''  }  } }) 

<div v-for="item in items" :key="item.id">   div> 

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/) }) 

Vue.set(example1.items, indexOfItem, newValue)  // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)  example1.items.splice(newLength) 

for="n in even(numbers)">{{ n }}
			
  data: {  numbers: [ 1, 2, 3, 4, 5 ] }, methods: {  even: function (numbers) {  return numbers.filter(function (number) {  return number % 2 === 0  })  } } 

<div id="example-1">  <button v-on:click="counter += 1">Add 1button>  <p>The button above has been clicked {{ counter }} times.p> div> 

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

<div id="example-3">  <button v-on:click="say('hi')">Say hibutton>  <button v-on:click="say('what')">Say whatbutton> div> 

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.prevent>form>  <div v-on:click.capture="doThis">...div>   <div v-on:click.self="doThat">...div> 

<input v-on:keyup.13="submit"> 

// enable v-on:keyup.f1 Vue.config.keyCodes.f1 = 112 

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

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

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jacklabel> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">Johnlabel> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mikelabel> <br> <span>Checked names: {{ checkedNames }}span> 

<input type="radio" id="one" value="One" v-model="picked"> <label for="one">Onelabel> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Twolabel> <br> <span>Picked: {{ picked }}span> 

<select v-model="selected">  <option>Aoption>  <option>Boption>  <option>Coption> select> <span>Selected: {{ selected }}span>  Selected: C 

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

new Vue({  el: '...',  data: {  selected: 'A',  options: [  { text: 'One', value: 'A' },  { text: 'Two', value: 'B' },  { text: 'Three', value: 'C' }  ]  } }) 

<input  type="checkbox"  v-model="toggle"  v-bind:true-value="a"  v-bind:false-value="b"> 

// when checked: vm.toggle === vm.a // when unchecked: vm.toggle === vm.b 

<select v-model="selected">    <option v-bind:value="{ number: 123 }">123option> select> 

// when selected: typeof vm.selected // -> 'object' vm.selected.number // -> 123 

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

<input v-model.number="age" type="number"> 

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

Vue.component('my-component', {  // options }) 

// register Vue.component('my-component', {  template: '
					

						A custom component!
					
' }) // create a root instance new Vue({  el: '#example' }) 

var Child = {  template: '
					

						A custom component!
					
' } new Vue({  // ...  components: {  //  will only be available in parent's template  'my-component': Child  } }) 

<div id="example">  <my-component>my-component> div>