VUE 起步

单页面 SPA 网页应用的关键在于路由， 过去一个个按钮都会跳转到一个个独立的页面， 由服务器端渲染， 填充相应的数据， 然后展现给用户。

作为一个后端工程师， 这是我曾经熟悉的模式， 无论十多年前的 PHP, JSP 还是后来的 SSH 框架， 无不是如此， 前端做的其实很简单， 不过是一些 HTML 加上简单的 JavaScript 做输入校验。

多年不写 Web 应用， 近十年来总在后端耕耘， 探出头来看看世界已经大不同了， 才学了一点 AngularJS, 又听说 Google 已经不维护这个旧版本了， Angular 2/4 已经出来了， React 也很火， VUE也是近来大出风头的框架， 我也实在没有精力跟在后面亦步亦趋， 为写点自己的小工具， 决定学学 VUE, 看起来不难， 毕竟也是老程序员了， JavaScript 不会难过 C++, 看了点教程， 做点笔记备忘。

基础的东西的看官方文档， 中文翻译得很好， https://cn.vuejs.org/v2/guide/index.html， 还是母语看起来舒服。

着重看几个东西:

组件

组件化编程， 类似于模块化编程， 把web 页面分解成一个个组件

  

    
    
    
  


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

var todoApp = new Vue({
  el: '#app-todo',
  data: {
    todoList: [
      { id: 0, text: 'read book' },
      { id: 1, text: 'see movie' },
      { id: 2, text: 'play basketball' }
    ]
  }
})

实例

这个小程序是改自 codepen 网上的一个小例子， 麻雀虽小， 五脏倶全， 颇能说明问题。
一个笔记本的单页面程序， 对于笔记的 Create-Read-Update-Delete-Search, 增读改删查， 最基本的应用

Html 页面

我在代码中加了一些注释，不过是一些模板的堆砌

注意这里， 与普通的 HTML 代码不同， 多了几个不认识的 HTML Tag:

• main
• router-view
• template

template 还好理解, main 和 route-view 是什么玩意?
这是 VUE 和一些现代 Web 框架的常用做法, 使用了一些自定义标签来表示应用层实体的意义

  
  
  
  





  

    

      
      
Notebook
      
    
  
  

    
  

note.js

//定义供测试的预设的笔记数据
var notes = [
  {id: 1, title: 'Plan', content: 'what to do', tag: 'tip', createTime: "2018-1-1T07:10:10Z"},
  {id: 2, title: 'Do', content: 'do one thing one time', tag: 'tip', createTime: "2018-1-1T08:10:10Z"},
  {id: 3, title: 'Check', content: 'review and organize', tag: 'tip', createTime: "2018-1-1T09:10:10Z"},
  {id: 3, title: 'Action', content: 'adjust plan and do', tag: 'tip', createTime: "2018-1-1T10:10:10Z"}
];

//寻找笔记的函数, 从上述列表中寻找
function findNote (noteId) {
  return notes[findNoteKey(noteId)];
};

function findNoteKey (noteId) {
  for (var key = 0; key < notes.length; key++) {
    if (notes[key].id == noteId) {
      return key;
    }
  }
};

//笔记列表对象, 绑定模板到 note-list, 指定数据和 computed 函数
var List = Vue.extend({
  template: '#note-list',
  data: function () {
    return {notes: notes, searchKey: ''};
  },
  computed: {
    filteredNotes: function () {
      return this.notes.filter(function (note) {
        return this.searchKey=='' || note.title.indexOf(this.searchKey) !== -1;
      },this);
    }
  }
});

//笔记对象

var Note = Vue.extend({
  template: '#note',
  data: function () {
    return {note: findNote(this.$route.params.note_id)};
  }
});

//笔记编辑对象, 包括一个笔记修改方法 updateNote
var NoteEdit = Vue.extend({
  template: '#note-edit',
  data: function () {
    return {note: findNote(this.$route.params.note_id)};
  },
  methods: {
    updateNote: function () {
      var note = this.note;
      notes[findNoteKey(note.id)] = {
        id: note.id,
        title: note.title,
        content: note.content,
        tag: note.tag
      };
      router.push('/');
    }
  }
});

//笔记删除对象, 包含一个删除方法 deleteNote
var NoteDelete = Vue.extend({
  template: '#note-delete',
  data: function () {
    return {note: findNote(this.$route.params.note_id)};
  },
  methods: {
    deleteNote: function () {
      notes.splice(findNoteKey(this.$route.params.note_id), 1);
      router.push('/');
    }
  }
});

//添加笔记对象, 包含一个创建笔记的方法 createNote

var AddNote = Vue.extend({
  template: '#add-note',
  data: function () {
    return {note: {title: '', content: '', tag: ''}}
  },
  methods: {
    createNote: function() {
      var note = this.note;
      notes.push({
        id: Math.random().toString().split('.')[1],
        title: note.title,
        content: note.content,
        tag: note.tag
      });
      router.push('/');
    }
  }
});

//重点来了, 这里定义的路由表, List 以及 CRUD
var router = new VueRouter({routes:[
  { path: '/', component: List},
  { path: '/note/:note_id', component: Note, title: 'note'},
  { path: '/add-note', component: AddNote},
  { path: '/note/:note_id/edit', component: NoteEdit, title: 'note-edit'},
  { path: '/note/:note_id/delete', component: NoteDelete, title: 'note-delete'}
]});

var app = new Vue({
  router:router
}).$mount('#app')