Vue入门（二）

最新推荐文章于 2024-06-01 15:46:07 发布

疯狂的格式化

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量79

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57203243/article/details/125428214

版权

Vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue实例中的数据，事件与方法

数据：

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

在 data: {} 中可以配置任意的数据名字比如 (number) ：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>Vue实例中的数据，事件与方法</title>
        <!--引入 vue.js -->
        <script src="/static/js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h1>{{number}}</h1><!-- 插值表达式 -->
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    number: 123
                }
            })
        </script>
    </body>
</html>

除了上面的写法外，还有其他写法比如使用 v-text 和 v-html 指令：

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-text
v-text 主要用来更新 textContent ，可以等同于JS的text属性。

    <body>
        <div id="root">
            <h1 v-text="number"></h1>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    number: 123
                }
            })
        </script>
    </body>

v-html
双大括号的方式和 v-text 指令会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用 v-html 指令。它等同于JS的innerHtml属性。

    <body>
        <div id="root">
            <h1 v-html="number"></h1>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    number: 123
                }
            })
        </script>
    </body>

插值表达式、v-text 和 v-html 的比较：

    <body>
        <div id="root">
            <div>{{content}}</div>
            <div v-text="content"></div>
            <div v-html="content"></div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    content: "<h1>hello</h1>"
                }
            })
        </script>
    </body>

页面效果：

事件与方法：

监听事件：

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

注意：不要使用箭头函数，比如下面代码中的：v-on:click="()=>{alert(123)}"，否则会报错

官网也有提示：

	<body>
		<div id="root">
			<div v-on:click="()=>{alert(123)}">{{content}}</div>
		</div>
		<script>
			new Vue({
				el: "#root",
				data: {
					content: "hello"
				}
			})
		</script>
	</body>

事件处理方法：

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

下面代码实现的功能是点击 world 后显示 hello。

    <body>
        <div id="root">
            <!-- handleClick 是在 Vue实例 中的 methods里定义的方法名 -->
            <div v-on:click="handleClick">{{string}}</div>
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    string: "world"
                },
                methods: {
                    handleClick: function () {
                        // this.string 是 data 中 string
                        this.string = "hello"
                    }
                }
            })
        </script>
    </body>

缩写：

官方说明：v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

    <body>
        <div id="root">
            <!-- handleClick 是在 Vue实例 中的 methods里定义的方法名 -->
            <div v-on:click="handleClick">{{string}}</div><!--完整写法 -->
            <div @click="handleClick"><h1 v-text="string"></h1></div><!-- 缩写 -->
        </div>
        <script>
            new Vue({
                el: "#root",
                data: {
                    string: "world"
                },
                methods: {
                    handleClick: function () {
                        // this.string 是 data 中 string
                        this.string = "hello"
                    }
                }
            })
        </script>
    </body>