When using Vue, we recommend also installing the Vue Devtools (opens new window)in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.

1. Get the Chrome Extension
2. Get the standalone Electron app

For prototyping or learning purposes, you can use the latest version with:

<script src="https://unpkg.com/vue@next"></script>
or
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>

npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack (opens new window)or Rollup (opens new window). Vue also provides accompanying tools for authoring Single File Components.

npm install vue@next

Vue provides an official CLI (opens new window)for quickly scaffolding ambitious Single Page Applications.

npm install -g @vue/cli

In Vue project

vue upgrade --next

Vite (opens new window)is a web development build tool that allows for lightning fast serving of code due its native ES Module import approach.

Vue projects can quickly be set up with Vite by running the following commands in your terminal.

npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev

const RootComponent = {
  /* options */
}

const app = Vue.createApp(RootComponent)

<div id="app">
</div>

const vm = app.mount('#app') //vm stands for view model.

Unlike most of the application methods, mount does not return the application. Instead it returns the root component instance.

const SearchInputComponent = {
  /* options */
}

app.component('SearchInput', SearchInputComponent)

• data 資料欄

const app = Vue.createApp({
  data: {
    count: 4
  }
})

• methods 方法欄

const app = Vue.createApp({
  data() {
    return {
      count: 4
    }
  },
  methods: {
    getCounter() {
      console.log(this.counter)
    }
  }
})

• props 元素屬性欄(DOM element attribute)

<div id="a" todo="true">
</div>

const app = Vue.createApp({
  prop: [
    todo:Boolean
  ],
  data() {
    return {
      count: 4
    }
  },
  methods: {
    getCounter() {
      console.log(this.counter)
    },
    IsTodo() {
      return this.todo;
    }
  }
})

• 其他事件處裡: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted

• 注意

Don't use arrow functions (opens new window)on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn't have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Use the "Mustache" syntax (double curly braces).

<span>Message: {{ msg }}</span>

You need to use the v-html directive.

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive:

<div v-bind:id="dynamicId"></div>

Worked as follows:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

Not working as follows:

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

Arguments

• v-if
• v-for
• v-bind:[attributeName]
• v-on:[eventName]
• v-on:[eventName].[Modifier]

Shorthands -v-bind

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument -->
<a :[key]="url"> ... </a>

• v-on

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument -->
<a @[event]="doSomething"> ... </a>

• Dynamic Argument Value Constraints

Dynamic arguments are expected to evaluate to a string, with the exception of null. The special value null can be used to explicitly remove the binding. Any other non-string value will trigger a warning.

• Dynamic Argument Expression Constraints

Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:

<!-- This will trigger a compiler warning. -->
<a v-bind:['foo' + bar]="value"> ... </a>

When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:

<!--
This will be converted to v-bind:[someattr] in in-DOM templates.
Unless you have a "someattr" property in your instance, your code won't work.
-->
<a v-bind:[someAttr]="value"> ... </a>

• JavaScript Expressions

Template expressions are sandboxed and only have access to a restricted list of globals (opens new window)such as Math and Date. You should not attempt to access user defined globals in template expressions.

const GLOBALS_WHITE_LISTED =
  'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
  'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'