vue代码练习及效果图

 

{{ message }}

  Reverse Message
 
 
    Hello Kitty!
 
 

  Now you see me!
 

 

   
1. {{ todo.text }}

 

 

   
 

Vue.component('todo-item', {
props: ['todo'],
  template: '

{{ todo.text }}

'
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    seen: true,
    todos: [
    { text: 'Learn Javascript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ],
    groceryList: [
    { text: 'Vegetables' },
      { text: 'Cheese' },
      { text: 'Whatever else humans are supposed to eat' }
    ]
  },
  methods: {
  reverseMessage: function () {
    this.message = this.message.split('').reverse().join('')
    }
  }
})

 

{{ message }}

 

{{ reversedMessage }}

 

methods:{{ reversedMessageNew() }}

 

{{ fullName }}

 

{{ fullNameName }}

 

    Ask a yes/no question:
   
 

 

{{ answer }}

 

 

 

Yes

 

Show

 

No

 
 

    {{ item.message }}
 

 

    {{ parentMessage}} - {{ index }} - {{ item.message }}
 

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    firstName: 'Foo',
    lastName: 'Bar',
    question: '',
    answer: 'I cannot give you an answer until you ask a question!',
    isActive: true,
    error: null,
    styleObject: {
    color: 'red',
      fontSize: '13px'
    },
    items: [
      {message: 'Foo'},
        {message: 'Bar'}
      ],
      ok:true,
      parentMessage: 'Parent',
      items: [
      { message: 'Foo' },
        { message: 'Bar' }
      ]
  },
  computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
    },
    fullName: function () {
    return this.firstName + ' ' + this.lastName
    },
    fullNameName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
      var names = newValue.split(' ')
        this.firstName = name[0]
        this.lastName = names[names.length - 1]
      }
    },
    classObject: function () {
    return {
      active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  },
  methods: {
  reversedMessageNew: function () {
    return this.message.split('').reverse().join('')
    },
    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
        })
      },
      500
    )
  },
  watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
    this.fullName = this.firstName + ' ' +val
    },
    question: function (newQuestion) {
    this.answer = 'Watching for you to stop typing...'
      this.getAnswer()
    }
  }
})

 

{{ message }}

 

{{ value }}

 

    {{ key }} : {{ value }}
 

 

    {{ index }}. {{ key }} : {{ value }}
 

 

    {{ n }}
 

      v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
 

          is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
      >
 

 

{{ todo }}

 

   
• 
        {{ todo }}
     

 

 

{{ n }}

 

{{ n }}

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

\
    {{ title }}\
      X\
   

\
  `,
  props: ['title']
})
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    object: {
    firstName: 'John',
      lastName: 'Doe',
      age: 30
    },
    newTodoText: '',
    todos: [
    'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ],
    shouldRenderTodos: true,
    numbers: [1, 2, 3, 4, 5]
  },
  methods: {
  addNewTodo: function () {
    this.todos.push(this.newTodoText)
      this.newTodoText = ''
    },
    even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
      })
    }
  },
  computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
      })
    }
  }
})

 

{{ message }}

  增加 1
 

  这个按钮被点击了{{ counter }}次。
 

 
  Greet
 
 
   
      {{ option.text }}
   
 
  Selected: {{ selected }}

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    counter: 0,
    name: 'Vue.js',
    selected: 'A',
    options: [
    { text: 'One', value: 'A'},
      { text: 'Two', value: 'B'},
      { text: 'Three', value: 'C'}
    ]
  },
  methods: {
  greet: function (event) {
    alert('Hello' + this.name + '!')
      if(event) {
      alert(event.target.tagName)
      }
    }
  }
})