vue入门

来源：互联网发布：php面试题及答案宝典编辑：程序博客网时间：2024/06/05 18:09

vue起步

hello world

<div id="app">  {{ message }}</div><script>    new Vue({      el: '#app',      data: {        message: 'Hello Vue.js!'      }    })</script>

双向绑定

v-model

<div id="app">  <p>{{ message }}</p>  <input v-model="message"></div><script>    new Vue({      el: '#app',      data: {        message: 'Hello Vue.js!'      }    })</script>

渲染列表

v-for循环data中数据

<div id="app">  <ul>    <li v-for="todo in todos">      {{ todo.text }}    </li>  </ul></div><script>    new Vue({      el: '#app',      data: {        todos: [          { text: 'Learn JavaScript' },          { text: 'Learn Vue.js' },          { text: 'Build Something Awesome' }        ]      }    })</script>

综合

v-on:keyup.enter回车事件
v-on:click单击事件

<div id="app">  <input v-model="newTodo" v-on:keyup.enter="addTodo">  <ul>    <li v-for="todo in todos">      <span>{{ todo.text }}</span>      <button v-on:click="removeTodo($index)">X</button>    </li>  </ul></div><script>    new Vue({      el: '#app',      data: {        newTodo: '',        todos: [          { text: 'Add some todos' }        ]      },      methods: {        addTodo: function () {          var text = this.newTodo.trim()          if (text) {            this.todos.push({ text: text })            this.newTodo = ''          }        },        removeTodo: function (index) {          this.todos.splice(index, 1)        }      }    })</script>

0 0