Vue 2 | PART 1 跟世界打个招呼吧

2019年9月18日 156次阅读 来源: 留白shiye

这是一个纯新手向的攻略系列（不是权威 「教程」），它：

√ 使用最简单的文字进行解释
√ 每期分享一个点，长度适中，适合碎片时间阅读
√ 图片均压缩在50k以下，把流量消耗降到最低
（其中一期因为截屏了比较大的面积用来展示效果，所以会稍微超出这个限制）

启程：

本系列是对VueJS 2.0（使用版本v2.1.3）最基础的东西的介绍，所以采用直接在html里面引入vue.js的方式。为了使界面稍微养眼一点，直接使用bootstrap的css。

Sa，我们马上来跟世界问好吧！

假设我们有这样一个data对象，希望把data.info的值绑定到html中：

var data = {
    info: 'hello hacker cafe'
}

操作很简单（div#app和script之间还有vue的引入，为了节省空间使用省略号代替）：

<body>
    <!-- vue对象绑定的元素 -->
    <div id="app">
        <!-- 直接放入数据对应的key -->
        <h1>{{ info }}</h1>
    </div>

    <!-- ... ... -->

    <script type="text/javascript">
        var data = {
            info: 'hello hacker cafe'
        }

        var app = new Vue({
            // 绑定html元素
            el: '#app',
            // 绑定数据
            data: data
        })
    </script>
</body>

当然js的部分还可以简化为：

<script type="text/javascript">
    var app = new Vue({
        // 绑定html元素
        el: '#app',
        // 绑定数据
        data: {
            info: 'hello hacker cafe'
        }
    });
</script>

大胡子（Mustache）

简单地说一下双重花括号这种语法。在Vue里面它只接受JS表达式。所以下面这几种写法都是ok的：

    <div id="app">
        <!-- info值续上，为了节省空间省略其它代码 -->
        <h2>{{ info.concat('!!!') }}</h2>

        <h2>{{ info.length }}</h2>

        <h2>{{ info ? 'has info' : 'no info'}}</h2>
    </div>

但是不要以为这就是在它里面可以写任何代码的意思，下面这些例子就会报错（例子来源于官网）：

    <div id="app">
        <!-- 这是赋值 -->
        <h2>{{ var ok = 1 }}</h2>

        <!-- 条件控制使用二元表达式，见上面正确的写法 -->
        <h2>{{ if (ok) { return info } }}</h2>
    </div>

顺带说一下为什么直接引入未压缩的vue.js。在你跑上面这两行错误代码的时候，未压缩的版本会在console里面给出提示，而压缩了的版本是不会有提示的。可以自行尝试一下。

提前偷窥一下双向绑定

  • 在console中打印出原来的info值

《Vue 2 | PART 1 跟世界打个招呼吧》

  • 修改info值

《Vue 2 | PART 1 跟世界打个招呼吧》

本期就到这里，敬请期待下一期：双向绑定和vue-devtools

写在最后：

源码地址：https://github.com/levblanc/v…

视频攻略：小的不才，为求一赞，自制 本期视频攻略 在此。

第一次弄视频，弄好以后才发现这件事看起来简单，但是挺耗时间和精力的……

这一期唠叨了，而且声音是从耳机上的麦克风直接录的，声音有点小。后续的找了个免费音频录制软件，能稍微加大点音量。

做的不好的地方大家多提意见和建议。

    原文作者：留白shiye
    原文地址: https://segmentfault.com/a/1190000007909677
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞