Vue.js

https://v2.cn.vuejs.org
Admin
Vue.js is a progressive JavaScript framework for building user interfaces with an approachable core...
Tokens:170,424
Snippets:1,253
Trust Score:10
Update:7 months ago
Show doc for...
Tokens:
Raw
### Example of a Large Application Structure with Components

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Presents a hypothetical template for a large Vue.js application, illustrating how different components like 'app-nav', 'app-view', 'app-sidebar', and 'app-content' can be composed to form the overall UI structure.

```html
<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>
```

--------------------------------

### Install Vue.js via CDN

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Methods to include Vue.js in an HTML file using CDN links. Includes both development versions with warnings and production versions optimized for performance.

```html
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
```

--------------------------------

### Vue Component Definition and Instance Initialization

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Combines the definition of the 'todo-item' component with props and the initialization of a Vue instance. This example shows a complete setup for rendering a dynamic list of items using Vue components.

```javascript
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
```

--------------------------------

### Declarative Rendering and Data Binding

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Demonstrates how to mount a Vue instance to a DOM element and bind data using text interpolation and the v-bind directive.

```html
<div id="app">
  {{ message }}
</div>

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
```

```javascript
var app = new Vue({
  el: '#app',
  data: { message: 'Hello Vue!' }
});

var app2 = new Vue({
  el: '#app-2',
  data: { message: '页面加载于 ' + new Date().toLocaleString() }
});
```

--------------------------------

### Build Vue from GitHub Source

Source: https://v2.cn.vuejs.org/guide/installation.html

Clones the Vue.js GitHub repository, installs dependencies, and builds the project from source. This is necessary if you need to use the latest unreleased code from the repository.

```bash
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build
```

--------------------------------

### Conditional Rendering and Lists

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Shows how to control DOM structure visibility with v-if and render lists of data using the v-for directive.

```html
<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
```

```javascript
var app3 = new Vue({
  el: '#app-3',
  data: { seen: true }
});

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
});
```

--------------------------------

### Install Vue 2 via NPM

Source: https://v2.cn.vuejs.org/guide/installation.html

Command to install the latest stable version of Vue 2 for use in module-based build systems.

```bash
npm install vue@^2
```

--------------------------------

### Vue.js Todo List Example with v-for and Components

Source: https://v2.cn.vuejs.org/v2/guide/list.html

A complete example of a todo list application using Vue.js. It demonstrates dynamic addition of todos, rendering them using v-for on a custom `todo-item` component, and handling item removal via emitted events. This example showcases component registration, data management, and event handling.

```html
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
```

```javascript
Vue.component('todo-item', {
  template: '
    <li>
      {{ title }}
      <button v-on:click="$emit(\'remove\')">Remove</button>
    </li>
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})
```

--------------------------------

### 开发 Vue.js 插件

Source: https://v2.cn.vuejs.org/guide/plugins.html

展示了如何创建一个 Vue.js 插件，该插件需要实现一个 `install` 方法。该方法接收 `Vue` 构造器和可选的 `options` 对象，并可以用于添加全局方法、指令、混入或实例方法。

```javascript
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    // ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    // ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
```

--------------------------------

### Vue Single File Component Example (Vue.js)

Source: https://v2.cn.vuejs.org/v2/guide/single-file-components.html

A basic example of a Vue.js single-file component (`.vue` file). It demonstrates the structure with `<template>`, `<script>`, and `<style>` blocks, showcasing syntax highlighting, module system, and scoped CSS.

```vue
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
```

--------------------------------

### Vue.use: Install Vue.js Plugin

Source: https://v2.cn.vuejs.org/v2/api

Installs a Vue.js plugin. If the plugin is an object, it must have an `install` method. If it's a function, that function is used as the install method. The `install` method receives Vue as an argument. Must be called before creating a new Vue instance. Plugins are only installed once.

```javascript
Vue.use( plugin )
```

--------------------------------

### Vue Single-File Component Example (Vue.js)

Source: https://v2.cn.vuejs.org/guide/single-file-components.html

A basic example of a Vue single-file component (.vue) demonstrating the structure for template, script, and style. This format allows for syntax highlighting, module support, and scoped CSS.

```vue
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

```

--------------------------------

### Install Vue 2 via CDN

Source: https://v2.cn.vuejs.org/guide/installation.html

Methods to include Vue 2 directly in HTML files using script tags for development, production, or modern ES module environments.

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
```

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></script>
```

```html
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.esm.browser.js'
</script>
```

--------------------------------

### Install Vue using Bower

Source: https://v2.cn.vuejs.org/guide/installation.html

Installs the latest stable version of Vue.js using the Bower package manager. Bower primarily provides UMD versions of the library.

```bash
# Latest stable version
$ bower install vue
```

--------------------------------

### Install Vue.js via Bower

Source: https://v2.cn.vuejs.org/v2/guide/installation.html

Command to install the latest stable UMD version of Vue using the Bower package manager.

```bash
bower install vue
```

--------------------------------

### Vue.js: Complete Todo List Example with v-for and Components

Source: https://v2.cn.vuejs.org/guide/list.html

A full example of a todo list application using Vue.js. It includes a custom 'todo-item' component, form submission for adding todos, and utilizes v-for for rendering the list. It also demonstrates event handling for removing items.

```html
<div id="todo-list-example">  
  <form v-on:submit.prevent="addNewTodo">  
    <label for="new-todo">Add a todo</label>  
    <input  
      v-model="newTodoText"  
      id="new-todo"  
      placeholder="E.g. Feed the cat"  
    >  
    <button>Add</button>  
  </form>  
  <ul>  
    <li  
      is="todo-item"  
      v-for="(todo, index) in todos"  
      v-bind:key="todo.id"  
      v-bind:title="todo.title"  
      v-on:remove="todos.splice(index, 1)"  
    ></li>  
  </ul>  
</div>
```

```javascript
Vue.component('todo-item', {  
  template: '\  
    <li>\  
      {{ title }}\  
      <button v-on:click="$emit(\'remove\')">Remove</button>\  
    </li>\  
  ',
  props: ['title']  
})
  
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})
```

--------------------------------

### Build Vue.js from Source

Source: https://v2.cn.vuejs.org/v2/guide/installation.html

Instructions for cloning the latest Vue source code from GitHub and building it locally using npm.

```bash
git clone https://github.com/vuejs/vue.git node_modules/vue  
cd node_modules/vue  
npm install  
npm run build
```

--------------------------------

### Vue Instance Compilation Comparison

Source: https://v2.cn.vuejs.org/guide/installation.html

Demonstrates the difference between using the template compiler (Full build) and the render function (Runtime-only build).

```javascript
// Requires compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

// Does not require compiler
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
```

--------------------------------

### Vue.js 2: Complete Example with Axios and Filters

Source: https://v2.cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

This comprehensive JavaScript snippet integrates the Vue instance initialization, data fetching with axios, and the custom `currencydecimal` filter. It provides a complete client-side solution for displaying live Bitcoin prices.

```javascript
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    };
  },
  filters: {
    currencydecimal(value) {
      return value.toFixed(2);
    }
  },
  mounted() {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response.data.bpi));
  }
});
```

--------------------------------

### Handling User Input and Two-Way Binding

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Illustrates event handling with v-on to trigger methods and two-way data binding for form inputs using v-model.

```html
<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
```

```javascript
var app5 = new Vue({
  el: '#app-5',
  data: { message: 'Hello Vue.js!' },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
});

var app6 = new Vue({
  el: '#app-6',
  data: { message: 'Hello Vue!' }
});
```

--------------------------------

### Define and Initialize a Vue Component

Source: https://v2.cn.vuejs.org/guide/components.html

Demonstrates how to globally register a component using Vue.component and mount it to a DOM element using a new Vue instance.

```javascript
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })
```

--------------------------------

### Vue.version: Get Vue Version String

Source: https://v2.cn.vuejs.org/v2/api

Provides the installed Vue version as a string. This is useful for community plugins and components to implement version-specific logic or provide compatibility checks.

```javascript
var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}
```

--------------------------------

### Inline Class Binding with String Concatenation (HTML/Vue)

Source: https://v2.cn.vuejs.org/v2/guide/migration.html

Replaces computed interpolations within attribute bindings with inline expressions. This example uses string concatenation to dynamically construct the class name for a button.

```html
<button v-bind:class="'btn btn-' + size"></button>
```

--------------------------------

### Vue CLI Project Initialization

Source: https://v2.cn.vuejs.org/v2/guide/comparison.html

Illustrates the flexibility of Vue CLI for project scaffolding. Unlike create-react-app, Vue CLI allows for interactive configuration during project creation and supports plugins for extensibility. It offers various templates for different project types, making it suitable for diverse development needs, including enterprise environments with custom presets.

```bash
# Install Vue CLI
npm install -g @vue/cli

# Create a new project (interactive prompts for configuration)
vue create my-vue-app

# Or create with a specific preset
vue create my-vue-app --preset my-custom-preset
```

--------------------------------

### Define and Register a Vue Component

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Demonstrates how to define a new Vue component named 'todo-item' and register it globally using Vue.component. This component has a simple template that displays a static list item.

```javascript
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)
```

--------------------------------

### Define Vue Component with Props

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Illustrates how to define a Vue component ('todo-item') that accepts data from its parent scope via props. The 'todo' prop is defined, and the component's template uses it to display dynamic text.

```javascript
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
```

--------------------------------

### Create Reusable Transition Components

Source: https://v2.cn.vuejs.org/v2/guide/transitions.html

Demonstrates how to wrap <transition> components for reuse. Includes both standard template-based component registration and a more performant functional component approach.

```javascript
Vue.component('my-special-transition', {  
  template: '\  
    <transition\  
      name="very-special-transition"\  
      mode="out-in"\  
      v-on:before-enter="beforeEnter"\  
      v-on:after-enter="afterEnter"\  
    >\  
      <slot></slot>\  
    </transition>\  
  ',  
  methods: {  
    beforeEnter: function (el) { },  
    afterEnter: function (el) { }  
  }  
})
```

```javascript
Vue.component('my-special-transition', {  
  functional: true,  
  render: function (createElement, context) {  
    var data = {  
      props: { name: 'very-special-transition', mode: 'out-in' },  
      on: { beforeEnter: function (el) { }, afterEnter: function (el) { } }  
    }  
    return createElement('transition', data, context.children)  
  }  
})
```

--------------------------------

### Use a Vue Component in a Template

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Shows how to use a previously defined Vue component, 'todo-item', within another component's template. It illustrates rendering multiple instances of the 'todo-item' component within an ordered list.

```html
<ol>
  <todo-item></todo-item>
</ol>
```

--------------------------------

### Initial Render Transition Configuration

Source: https://v2.cn.vuejs.org/v2/guide/transitions.html

Explains how to enable and customize transitions for the initial rendering of a component using the `appear` attribute on the `<transition>` component. Custom CSS classes and JavaScript hooks can be applied to control the appearance and disappearance animations during the initial mount.

```html
<transition appear>
  <!-- ... -->
</transition>

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>
```

--------------------------------

### Create Reusable Transition Components

Source: https://v2.cn.vuejs.org/guide/transitions.html

Demonstrates how to wrap the <transition> component to create reusable animation wrappers. Includes examples using standard Vue components and more performant functional components.

```javascript
Vue.component('my-special-transition', {  
  template: '\  
    <transition\  
      name="very-special-transition"\  
      mode="out-in"\  
      v-on:before-enter="beforeEnter"\  
      v-on:after-enter="afterEnter"\  
    >\  
      <slot></slot>\  
    </transition>\  
  ',  
  methods: {  
    beforeEnter: function (el) {  
      // ...  
    },  
    afterEnter: function (el) {  
      // ...  
    }  
  }  
})
```

```javascript
Vue.component('my-special-transition', {  
  functional: true,  
  render: function (createElement, context) {  
    var data = {  
      props: {  
        name: 'very-special-transition',  
        mode: 'out-in'  
      },  
      on: {  
        beforeEnter: function (el) {  
          // ...  
        },  
        afterEnter: function (el) {  
          // ...  
        }  
      }  
    }  
    return createElement('transition', data, context.children)  
  }  
})
```

--------------------------------

### Replace Built-in Capitalization Filters in Vue.js

Source: https://v2.cn.vuejs.org/v2/guide/migration.html

Vue.js v2 removes built-in text formatting filters like capitalize, uppercase, and lowercase. This example shows how to achieve capitalization using native JavaScript string methods within computed properties or helper functions.

```javascript
// For capitalize:
// text[0].toUpperCase() + text.slice(1)

// For uppercase:
// text.toUpperCase()

// For lowercase:
// text.toLowerCase()
```

--------------------------------

### Replace Debounce Filter with Lodash in Vue.js

Source: https://v2.cn.vuejs.org/v2/guide/migration.html

Vue.js v2 removes the debounce filter. This example shows how to replace it by using Lodash's `_.debounce` function directly within the component's methods. This provides more control over high-frequency tasks like input handling.

```html
<input v-on:keyup="doStuff">

```

```javascript
methods: {
  doStuff: _.debounce(function () {
    // ... your debounced logic here
  }, 500)
}
```

--------------------------------

### 启动开发服务器

Source: https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

使用 Vue CLI 启动本地开发服务器以进行调试。

```Bash
npm run serve
```

--------------------------------

### Vue Template Usage of 'clipscroll' Directive

Source: https://v2.cn.vuejs.org/v2/cookbook/creating-custom-scroll-directives.html

This example shows how to apply the 'clipscroll' directive to a SVG path element within a Vue template. It demonstrates passing configuration options such as start and end scroll points, and the target path for morphing, as a binding object.

```html
<clipPath id="clip-path">
  <path
    v-clipscroll="{ start: '50', end: '100', toPath: 'M0.39 0.34H15.99V22.44H0.39z' }"
    id="poly-shapemorph"
    d="M12.46 20.76L7.34 22.04 3.67 18.25 5.12 13.18 10.24 11.9 13.91 15.69 12.46 20.76z"
  />
</clipPath>
```

--------------------------------

### Replace FilterBy Filter with Array.filter in Vue.js

Source: https://v2.cn.vuejs.org/v2/guide/migration.html

Vue.js v2 removes the filterBy filter. This example shows how to replace it using the native JavaScript `Array.prototype.filter()` method within a computed property. This allows for more complex filtering logic, including case-insensitive searches and multiple field matching.

```html
<p v-for="user in filteredUsers">{{ user.name }}</p>

```

```javascript
computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

// Example for more complex filtering:
// computed: {
//   filteredUsers: function () {
//     var self = this
//     var searchRegex = new RegExp(self.searchQuery, 'i')
//     return self.users.filter(function (user) {
//       return user.isActive && (
//         searchRegex.test(user.name) ||
//         searchRegex.test(user.email)
//       )
//     })
//   }
// }
```

--------------------------------

### Pass Data to Vue Components using v-bind

Source: https://v2.cn.vuejs.org/v2/guide/index.html

Demonstrates how to pass data from a parent component's data property ('groceryList') to child 'todo-item' components using the `v-bind` directive. It also shows the use of `v-for` for rendering lists and the importance of the `key` attribute.

```html
<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
```

--------------------------------

### Implement Dependency Injection with provide/inject

Source: https://v2.cn.vuejs.org/v2/api

Demonstrates how to share data from an ancestor component to descendants using provide/inject. Includes basic usage, ES2015 Symbol keys, and handling default values or property mapping.

```javascript
// Basic Provider/Child setup
var Provider = {
  provide: { foo: 'bar' }
};
var Child = {
  inject: ['foo'],
  created () { console.log(this.foo) }
};

// Using Symbols
const s = Symbol();
const Provider = {
  provide () { return { [s]: 'foo' } }
};
const Child = { inject: { s } };

// Default values and mapping
const Child = {
  inject: {
    foo: { from: 'bar', default: () => [1, 2, 3] }
  }
};
```

--------------------------------

### Vue.js Watcher Example with Async API Call

Source: https://v2.cn.vuejs.org/guide/computed.html

This snippet demonstrates a Vue.js watcher that triggers an asynchronous API call when the 'question' data property changes. It utilizes Lodash's debounce function to limit the rate of API requests and Axios for making the HTTP GET request. The watcher updates the 'answer' property based on the API response or errors.

```html
<div id="watch-example">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

```

```javascript
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

```

--------------------------------

### Transitioning Between Dynamic Components

Source: https://v2.cn.vuejs.org/v2/guide/transitions.html

Shows how to animate transitions between different components using the <component> tag combined with the <transition> wrapper.

```html
<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
```

```javascript
new Vue({
  el: '#transition-components-demo',
  data: { view: 'v-a' },
  components: {
    'v-a': { template: '<div>Component A</div>' },
    'v-b': { template: '<div>Component B</div>' }
  }
})
```

--------------------------------

### Implement Dynamic Transitions

Source: https://v2.cn.vuejs.org/v2/guide/transitions.html

Shows how to bind transition names dynamically and use JavaScript hooks to create state-driven animations with external libraries like Velocity.js.

```html
<transition v-bind:name="transitionName">
  <!-- ... -->
</transition>
```

```javascript
new Vue({  
  el: '#dynamic-fade-demo',  
  data: { show: true, fadeInDuration: 1000, fadeOutDuration: 1000, stop: true },  
  methods: {  
    enter: function (el, done) { 
      Velocity(el, { opacity: 1 }, { duration: this.fadeInDuration, complete: done }); 
    },
    leave: function (el, done) { 
      Velocity(el, { opacity: 0 }, { duration: this.fadeOutDuration, complete: done }); 
    }
  }  
})
```

--------------------------------

### Vue Template Example

Source: https://v2.cn.vuejs.org/v2/guide/comparison.html

Demonstrates Vue's default templating syntax, which is based on standard HTML. This approach is often considered more natural for developers familiar with HTML and can ease the migration of existing applications. It also allows for easier collaboration with designers and new developers.

```html
<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
    <p>This is a Vue component using HTML templates.</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue User'
    };
  },
  methods: {
    changeName() {
      this.name = 'Updated Name';
    }
  }
}
</script>
```

--------------------------------

### Vue.js Computed Properties Example

Source: https://v2.cn.vuejs.org/v2/style-guide

Demonstrates the use of computed properties in Vue.js to derive values based on other data properties. This example shows how to calculate base price, discount, and final price.

```javascript
computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}
```

--------------------------------

### React Create React App Limitations

Source: https://v2.cn.vuejs.org/v2/guide/comparison.html

Highlights some limitations of React's `create-react-app`. It does not allow configuration during project generation and primarily offers a default option for single-page applications. While designed for simplicity, these constraints might not suit all development workflows, especially those requiring custom build processes or specific project structures.

```bash
# Create a new React project
npx create-react-app my-react-app

# Note: Limited configuration options during creation.
# Primarily focused on single-page applications.
```

--------------------------------

### Vue.js Smart List Component Example

Source: https://v2.cn.vuejs.org/guide/render-function.html

An example of a functional component named `smart-list` that conditionally renders different list components based on its props. It uses `context.props` to access item data and the `isOrdered` flag.

```javascript
var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})
```

--------------------------------

### Vue.js 2: Fetch and Display API Data with Axios

Source: https://v2.cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

This snippet demonstrates how to initialize a Vue instance, fetch data from the CoinDesk API using axios in the `mounted` hook, and store the response in the `info` data property. It requires Vue.js and axios to be included.

```javascript
new Vue({
  el: '#app',
  data() {
    return {
      info: null
    };
  },
  mounted() {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response));
  }
});
```

--------------------------------

### Vue.js Directives: Parameters (v-bind, v-on)

Source: https://v2.cn.vuejs.org/v2/guide/syntax.html

Illustrates directives that accept parameters, specified after a colon. Examples include v-bind for attribute binding (e.g., v-bind:href) and v-on for event listening (e.g., v-on:click).

```html
<a v-on:click="doSomething">...</a>
```

```html
<a v-bind:href="url">...</a>
```
Tokens:
Raw