如何阅读Vuejs源码，学习笔记

Posted 2023-03-28

参考技术A

# 下载最新的vue$ npm install vue

js 引用 vue.js

开始代码，感受vue强大的双向数据绑定

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

实战代码：

12345678910111213141516171819202122232425262728293031<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>     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)      )

Vue整个生命周期示意图：

本回答被提问者采纳 参考技术B 工宗号： Vue社区，有很好很全的vue教程，从最简单的指令到实战仿新闻客户端，语速可能有点快，因为知识点很多，希望大家学习后能很快的掌握，祝大家学习愉快！