Vue基础教程(一) - 博客详情

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.webstorm设置vue代码片段 一个vue页面的整体框架如下，由于在学习vue期间，以下代码需要经常使用。所以建议把这段代码，设置为webstorm常用的代码片段。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>
</html>

设置步骤： 1)点击File→setting.

2)在搜索框中输入live→live Templates→html/xml，点击右边绿色的加号，选择第一个live Templates

3)在Abbreviation那一行填上自己设置的快捷键（比如：vuehtml），在Template text框中复制上面那段代码片段，然后点击最下面一行景红色的Define，选则HTML，最后apply→ok。

4)测试。新建一个index.html的空白页面，输入vuehtml快捷键，按下tab键。则迅速生成vue页面框架。如下所示：

2.第一个vue小例子

编写index.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
               msg:'Hello,Vue!'
            }
        })
    </script>
</body>
</html>

运行index.html

运行效果：