vue-简单使用

learning › vue

在html文件中加入这些代码

首先是一段简单的html代码，这里用到了一个id标识符，不过它被vue管理，其中的两个p标签中的数据也是通过两个括号来引用vue实例中的数据

1
2
3
4
5
<div id="app">
  <p>{{ message }}</p>
  <p>{{ name }}</p>
  <p v-bind:title='showmsg' >鼠标悬浮</p>
</div>

这是一段js脚本，它通过new来声明了一个vue的实例，并使用el来标识这个实例的名称，data来存储数据

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        name: '二公子'
    }
    })
</script>

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="./vue.js" charset="utf-8"></script>
    </head>
    <body bgcolor="#cdcdc9">
        <div id="app">
            {{ message }} <!-->引用数据</!-->
        </div>
        <script type="text/javascript">
            //ES6中let定义变量,const定义常量,ES6之前使用var
            const app = new Vue({ //实例化一个对象
                el: "#app", //挂载要管理的元素
                data: { //定义数据
                    message: "hello vue"
                }
            })
        </script>
    </body>
</html>

一些想法：

很久之前，我喜欢上了vim，学了很多vim，觉得vim真的很好。不过这次学习vue我还是换了atom，我知道atom也可以支持vim模式的，可能我真的舍不得的就是那么vim中独有的命令吧。感觉那些才是vim真正强大的地方，但是vim终究还是没atom方便，虽然可以配置，但是哪有时间去弄那些，既然有集成好的，为什么不去使用呢，其实有时候懂得放弃比无知的的去追求要好，因为vim自身足够强大，没有插件才能给vim一个简洁的环境，它本来就是那么简单，强大不是吗。安装那么多插件，以努力达到ide的功能，这或许已经违背了vim的初衷吧

在使用atom一会后，我就觉得atom有点卡，所以我卸载了atom，安装上了vscode，因为看视频都说vscode不卡，相比于atom来说。但是我最终还是选择了atom，为什么呢，不是cscode不好，只是我还是喜欢第一眼了解的atom，不仅仅是cscode在html页面渲染时不能支持vue吧，毕竟atom的markdown的同步滚动插件容易卡死，而同步滚动在vscode中却是内置的一个功能，似乎本身就该是那样。可能就是一种喜欢，喜欢那种布局，喜欢默认的配色，都有一种特殊的感觉。而且它对于我这个经常使用vim的人来说功能已经逆天的强大了。并不是说一定要选择最好的编辑器，而是要选择自己喜欢的编辑器

就像archlinux一样，在我接触linux后不久了解到了它，使用了这么久，并不是说它真的就是最好的，其实那些集成的kde，gnome的manjaro也挺不错的，或者有qq，微信的deepin也挺好，但是我对archlinux很熟啊，使用了两三年，有感情了。我所配置的桌面也有诸多的不足，但是有感情，简简单单的，安安静静的，看着很舒心