<div id="example">
? {{ message.split('').reverse().join('') }}
</div>

<div id="app9">
? ? 9、method與computed的區(qū)別

? ? fullName

? ? {{fullName}}

? ? fullName2

? ? {{fullName}}

? ? fullNameMethod

? ? {{getFullName()}}

? ? fullNameMethod2

? ? {{getFullName()}}

</div>

var app9 = new Vue({
? ? el: '#app9',
? ? data: {
? ? ? ? firstName: 'Foo',
? ? ? ? lastName: 'Bar'
? ? },
? ? methods:{
? ? ? ? getFullName:function () {
? ? ? ? ? ? console.log("執(zhí)行了methods")
? ? ? ? ? ? return this.firstName+" " +this.lastName;
? ? ? ? }
? ? },
? ? computed: {
? ? ? ? fullName: function () {
? ? ? ? ? ? console.log("執(zhí)行了computed")
? ? ? ? ? ? return this.firstName + ' ' + this.lastName
? ? ? ? }
? ? }
})
setTimeout('app9.firstName="Foo2"',3000);

<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
? ? }
? }
})

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';//此時(shí)觸發(fā)set函數(shù)

<div id="watch-example">
? <p>
? ? Ask a yes/no question:
? ? <input v-model="question">
? </p>
? <p>{{ answer }}</p>
</div>

<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: {
? ? // 如果 question 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
? ? question: function (newQuestion) {
? ? ? this.answer = 'Waiting for you to stop typing...'
? ? ? this.getAnswer()
? ? }
? },
? methods: {
? ? getAnswer: _.debounce(
? ? ? function () {
? ? ? ? if (this.question.indexOf('?') === -1) {
? ? ? ? ? this.answer = 'Questions usually contain a question mark. ;-)'
? ? ? ? ? return
? ? ? ? }
? ? ? ? this.answer = 'Thinking...'
? ? ? ? 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
? ? ? ? ? })
? ? ? },
? ? ? // 這是我們?yōu)橛脩敉Ｖ馆斎氲却暮撩霐?shù)
? ? ? //_.debounce 0.5秒內(nèi)刷新就不執(zhí)行函數(shù)
? ? ? 500
? ? )
? }
})
</script>