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

时间：2023-03-09 05:53:46
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标签也会同步发生改变

相关文章