<commit_before>#+TITLE: Vue.js

* Table of Contents :TOC_3_gh:
- [[#overview][Overview]]
- [[#render-test][render test]]
- [[#syntax][Syntax]]
- [[#lifecycle][Lifecycle]]
  - [[#mounted][mounted]]
- [[#api][API]]
  - [[#new-vueoptions][new Vue(options)]]
- [[#components][Components]]
  - [[#global-components][Global Components]]
  - [[#local-components][Local Components]]
  - [[#composing-components][Composing Components]]
  - [[#props][props]]
- [[#single-file-components-vue][Single File Components (.vue)]]
- [[#router][Router]]
  - [[#router-link][<router-link>]]
  - [[#router-view][<router-view>]]
  - [[#history-mode][history mode]]
  - [[#matching-priority][Matching Priority]]
  - [[#the-route-object][The Route object]]
  - [[#route-meta-fields][Route Meta Fields]]
  - [[#navigation-guards][Navigation Guards]]
  - [[#passing-props][Passing Props]]
  - [[#programmatic-navigation][Programmatic Navigation]]
- [[#links][Links]]

* Overview
:REF:
- https://vuejs.org/v2/guide/installation.html#CLI
:END:

- test

* render test
- https://vuejs.org/v2/guide/installation.html#CLI

- test

#+BEGIN_SRC shell
  # install vue-cli
  $ npm install --global vue-cli
  # create a new project using the "webpack" template
  $ vue init webpack my-project
  # install dependencies and go!
  $ cd my-project
  $ npm run dev
#+END_SRC

#+BEGIN_QUOTE
Vue instances expose a number of useful instance properties and methods.
These properties and methods are prefixed with ~$~ to differentiate from proxied data properties. For example:
#+END_QUOTE

#+BEGIN_SRC javascript
  var data = { a: 1 }
  var vm = new Vue({
    el: '#example',
    data: data
  })
  vm.$data === data // -> true
  vm.$el === document.getElementById('example') // -> true
  // $watch is an instance method
  vm.$watch('a', function (newVal, oldVal) {
    // this callback will be called when `vm.a` changes
  })
#+END_SRC

* Syntax<commit_msg>Remove render test<commit_after>#+TITLE: Vue.js

* Table of Contents :TOC_3_gh:
- [[#overview][Overview]]
- [[#syntax][Syntax]]
- [[#lifecycle][Lifecycle]]
  - [[#mounted][mounted]]
- [[#api][API]]
  - [[#new-vueoptions][new Vue(options)]]
- [[#components][Components]]
  - [[#global-components][Global Components]]
  - [[#local-components][Local Components]]
  - [[#composing-components][Composing Components]]
  - [[#props][props]]
- [[#single-file-components-vue][Single File Components (.vue)]]
- [[#router][Router]]
  - [[#router-link][<router-link>]]
  - [[#router-view][<router-view>]]
  - [[#history-mode][history mode]]
  - [[#matching-priority][Matching Priority]]
  - [[#the-route-object][The Route object]]
  - [[#route-meta-fields][Route Meta Fields]]
  - [[#navigation-guards][Navigation Guards]]
  - [[#passing-props][Passing Props]]
  - [[#programmatic-navigation][Programmatic Navigation]]
- [[#links][Links]]

* Overview
:REFERENCES:
- https://vuejs.org/v2/guide/installation.html#CLI
:END:

#+BEGIN_SRC shell
  # install vue-cli
  $ npm install --global vue-cli
  # create a new project using the "webpack" template
  $ vue init webpack my-project
  # install dependencies and go!
  $ cd my-project
  $ npm run dev
#+END_SRC

#+BEGIN_QUOTE
Vue instances expose a number of useful instance properties and methods.
These properties and methods are prefixed with ~$~ to differentiate from proxied data properties. For example:
#+END_QUOTE

#+BEGIN_SRC javascript
  var data = { a: 1 }
  var vm = new Vue({
    el: '#example',
    data: data
  })
  vm.$data === data // -> true
  vm.$el === document.getElementById('example') // -> true
  // $watch is an instance method
  vm.$watch('a', function (newVal, oldVal) {
    // this callback will be called when `vm.a` changes
  })
#+END_SRC

* Syntax
{'fraction_non_alphanumeric': 0.1836734693877551, 'fraction_numerical': 0.0018796992481203006, 'mean_word_length': 4.116758241758242, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 3, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2308870', 'n_tokens_mistral': 1294, 'n_tokens_neox': 1242, 'n_words': 300}