vue2+vuex+vue-router 快速入门（三） vue 实例介绍

vue 实例介绍

　　vue 实例分两种，一种为组件实例，另外一种为根实例。组件实例负责创建个性化组件、而根实例负责把组件渲染到指定的真实的 DOM 结构中。并且 vue 为我们提供了一种特殊的文件格式 .vue 来创建 组件实例。.vue 文件格式如下：

*.vue

<template>
    ...
</template>

<script>
    export default {
        data(){
            return {}
        }
    }
</script>

<style lang="less" scoped>

</style>

通过上面的代码，我们可以看出，整个 .vue 文件分为三个部分：template（模板）、script（数据逻辑） 和 style（样式） 。

<template>

　　template 部分为我们提供组件的视图模板，里面包含了当前组件所有的展示情况。vue 为我们提供了一套语法来帮助我们快速构建我们所需的模板。

模板语法

　　Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
　　在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

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

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

双大括号会将数据解析为纯文本，而非 HTML。为了输出真正的 HTML，你需要使用 v-html 指令。<div v-html="rawHtml"></div>

给 HTML 属性赋值

　　给属性赋值需要使用 v-bind:attribute 指令，可简写为： :attribute

<div v-bind:id="idName"></div>
<!-- 简写 -->
<div :id="idName"></div>

添加事件监听

　　可以用v-on:eventType指令监听 DOM 事件来触发一些 JavaScript 代码，简写为：@eventType

<div v-on:click="doSomething()"></div>