vue学习笔记

发表于 | 分类于

vue的一些简单指令(这些放在标签里)

  • v-text : 只显示文本
  • v-html : 先处理html标签，然后把内容显示出来
  • v-for : 遍历对象或数组
1
2
3
4
5
6
7
8
9
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p v-html="title">{{message}}</p>
  <ul>   
    <li v-for="(value, key, index) in people">
      {{index}}-{{key}}-{{value}}
    </li>
  </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
  el: '#app',
  data: {
    title: '<span>hi, </span>Hello Vue.js!',
    message: 'how are you',
    items: [
        {message: 'working'},
        {message: 'eating'}
    ],
    people: {
    	first: 'deng',
      last: 'caihong',
      full: 'deng caihong'
    }
  }
})

创建一个todolist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  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 = ''
    }
  }
})