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

时间 2019-12-09

标签 vue 世界打个招呼繁體版

原文原文链接

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

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

启程：

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

Sa，咱们立刻来跟世界问好吧！vue

假设咱们有这样一个data对象，但愿把data.info的值绑定到html中：java

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

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

<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的部分还能够简化为：github

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

大胡子（Mustache）

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

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

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

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

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

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

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

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

提早偷窥一下双向绑定

在console中打印出原来的info值

修改info值

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

写在最后：

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

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

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

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

作的很差的地方你们多提意见和建议。