[Vue]---Vue的模块语法知识点（一）

最新推荐文章于 2023-07-11 17:41:55 发布

_筱龙

最新推荐文章于 2023-07-11 17:41:55 发布

阅读量243

点赞数

分类专栏： vue全家桶资料文章标签： vue vue模块语法

本文链接：https://blog.csdn.net/it_qslong/article/details/109428008

版权

vue全家桶资料专栏收录该内容

20 篇文章 3 订阅

订阅专栏

文章目录

Vue模块语法

模块语法的概述

如何理解前端渲染？

把数据填充到HTML标签中

前端渲染方式

原生js拼接字符串
- 基本上就是将数据已字符串的方式拼接到HTML标签中
- 缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来
前端模块引擎
- 优点：大家都遵循同样的规则写代码，代码可读性提高了，方便后期的维护
- 缺点：没有专门提供事件机制
使用vue特有的模块语法

指令

v-clock指令用法

1.提供样式

[v-cloak]{
    display:none;
}

2.在插值表达式所在的标签中添加v-cloak指令

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定指令

v-text填充纯文本
- 相比插值表达式更加简洁
v-html填充HTML片段
- 存在安全问题
- 本网站内部数据可以使用，来自第三方的数据不可以用
v-pre填充原始信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>{{msg}}</div>
        <!-- 填充纯文本 -->
        <div v-text='msg'></div>
        <!-- 填充HTML片段 -->
        <div v-html='msg1'></div>
        <!-- 填充原始信息 -->
        <div v-pre>{{msg}}</div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                msg1: '<h1>HTML</h1>'
            }
        })
    </script>

</body>

数据响应式

如何理解响应式
- html5中的响应式（屏幕尺寸的变化导致样式的变化）
- 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
- 数据绑定：将数据填充到标签中
v-once 只编译一次
- 显示内容之后不再具有响应式功能
v-once的应用功能场景：如果显示的信息后续不需要再修改，我们可以使用 v-once，这样可以提高性能

双向数据绑定

双向数据绑定就是用户需改表单界面会影响数据的变化，反之修改数据也会影响表单界面的变化

双向数据绑定用到了v-model指令

<input type="text" v-model='你绑定数据的名称'>

事件绑定

Vue如何处理事件？

v-on指令用法

<input type='button' v-on:click='事件处理方法'>

v-on简写形式

<input type='button' @click='事件处理方法'>

事件函数的调用方式

直接绑定函数名称

 <button @click="handle">点击</button>

调用函数

<button v-on:click="handle()">点击</button>

测试代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- v-on指令用法 -->
            <button v-on:click="num++">点击</button>
            <!-- v-on简写形式 -->
            <button @click="num++">点击</button>
            <!-- 直接调用绑定函数名称 -->
            <button @click="handle">点击</button>
            <!-- 调动函数 -->
            <button v-on:click="handle()">点击</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle: function() {
                    /*这里的this是Vue的实例对象*/
                    this.num++
                }
            }
        })
    </script>

注意！！！函数必须定义在methods里面，函数里的this是Vue的实例对象.

事件函数参数传递

普通参数和事件对象

 <button v-on:click="handle2(123,456,$event)">点击2</button>

事件绑定–参数传递

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <button v-on:click="handle1">点击1</button>
        <button v-on:click="handle2(123,456,$event)">点击2</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num = 0
            },
            methods: {
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                },
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                }
            }
        })
    </script>

</body>

事件修饰符

.stop阻止冒泡

<a v-on:cllick.stop="handle">跳转</a>

.prevent阻止默认行为

<a v-on:cllick.prevent="handle">跳转</a>

按键修饰符

.enter回车键
```
<input v-on:keyup.enter='submit'>
```
.delete删除键
```
<input v-on:keyup.delete="handle">
```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
            </div>
            <div>
                密码：
                <input type="text" v-on:keyup.enter='handleSubmit' v-model='pwd'>
            </div>
            <div>
                <input type="button" v-on:click="handleSubmit" value="提交">
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*事件绑定--按键修饰符*/
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                pwd: '',
            },
            methods: {
                clearContent: function() {
                    //按delete键的时候，清空用户名
                    this.uname = '';
                },
                handleSubmit: function() {
                    console.log(this.uname, this.pwd)
                }
            }
        })
    </script>
</body>

</html>

自定义按键事件修饰符

自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event。

我们可以通过绑定键盘事件的方法，通过event.keyCode来输出每个键对应的值。如：

Vue.config.keyCodes.a = 65

_筱龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[Vue]---Vue的模块语法知识点（一）

文章目录Vue模块语法模块语法的概述如何理解前端渲染？前端渲染方式指令v-clock指令用法数据绑定指令数据响应式双向数据绑定事件绑定Vue如何处理事件？事件函数的调用方式事件函数参数传递事件修饰符按键修饰符自定义按键事件修饰符Vue模块语法模块语法的概述如何理解前端渲染？把数据填充到HTML标签中前端渲染方式原生js拼接字符串基本上就是将数据已字符串的方式拼接到HTML标签中缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来前端模块引擎优点：大
复制链接

扫一扫