Vue.js学习笔记第一篇数据绑定

双花括号文本插值

先来个最简单的例子，看完之后立马会用Vue了，是不是很有成就感

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引用官网的Vue.js库 -->
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <!-- HTML部分 -->
    <div id="app-1">
        <!-- “mustache” 语法（双花括号）的文本插值 -->
        <span>{{ content }}</span>
    </div>
    <!-- JS部分 -->
    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#app-1',  //关联元素
            data: {
                content: 'Hello, TanSea!'  //变量赋值
            }
        })
    </script>
</body>
</html>

https://unpkg.com/vue是官方的地址，直接引用能随时保持使用的是最新版本，但是缺点是外国的网站，访问速度有点慢。当然也可以下载到本地来使用

这里Vue对象实例化仅仅给了2个参数，el(元素)和data(数据)，其他的参数在后面的笔记中会说明

在浏览器的控制台输入vm1.content = 'Hello, World'，对变量进行重新赋值，页面上的值也跟着一起变更。如果只需要第一次绑定，不要后续变更，可以使用v-once指令

给span标签添加v-once指令

<!-- HTML部分 -->
<div id="app-1">
    <!-- 当变量发生变更时，内容不会随着更新 -->
    <span v-once>{{ content }}</span>
</div>

Vue的所有指令约定都是以v-开头，包括之后的自定义指令也推荐使用这种命名习惯

原始HTML

<!-- HTML部分 -->
<div id="app-2">
    <span v-html="rawHtml"></span>
</div>
<!-- JS部分 -->
<script type="text/javascript">
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            rawHtml: '<div style="color: red">Hello, TanSea!</div>'
        }
    })
</script>

v-html指令直接插入原始HTML，直接插入HTML代码容易受到XSS攻击，不建议使用

属性

在HTML属性中无法使用“mustache” 语法了，需要使用v-bind指令，这也是Vue使用得最多的指令

<!-- HTML部分 -->
<div id="app-3">
    <a v-bind:href="url" v-bind:target="target">双子宫殿</a>
</div>
<!-- JS部分 -->
<script type="text/javascript">
    var vm3 = new Vue({
        el: '#app-3',
        data: {
            url: 'http://www.tansea.cn',
            target: '_blank'
        }
    })
</script>

使用v-bind指令绑定HTML属性，给HTML属性插值

JavaScript表达式

<!-- HTML部分 -->
<div id="app-4">
    <span :id="'site-' + (id + 1)">{{ isVisible ? '我是可见的' : '我是隐藏的' }}</span>
</div>
<!-- JS部分 -->
<script type="text/javascript">
    var vm4 = new Vue({
        el: '#app-4',
        data: {
            id: 1,
            isVisible: true
        }
    })
</script>

这里，我们看到了一个陌生的东西:id，他其实就是v-bind:id的简写方式

通过表达式的计算，span标签最终的结果是

<span id="site-2">我是可见的</span>

Vue目前只支持单条表达式，所以以下的示例都无法运行

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也无法运行，请使用三元表达式 -->
{{ if (ok) { return message } }}

如果熟悉拉姆达表达式的话，这一块的内容就很好理解了

双向绑定

双向绑定是Vue的一个最主要的功能，他能很方便的实现实时预览的效果

<!-- HTML部分 -->
<div id="app-5">
    <p>{{ content }}</p>
    <input v-model:value="content">
</div>
<!-- JS部分 -->
<script type="text/javascript">
    var vm5 = new Vue({
        el: '#app-5',
        data: {
            content: 'TanSea'
        }
    })
</script>

将input标签的值属性双向绑定到content上，当input标签的值属性发生改变时，p标签也会同步发生改变