vue2基础知识点（1）模板语法、数据绑定、new Vue({data})的两种写法、事件处理

LiuJie_Boom

已于 2022-05-24 22:44:56 修改

阅读量752

点赞数

分类专栏： vue2 # vue2基础知识点文章标签： vue.js javascript 前端

于 2022-05-24 21:19:03 首次发布

本文链接：https://blog.csdn.net/weixin_44242181/article/details/124953703

版权

vue2基础知识点同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

模板语法

{{undefined}}Vue解析为空，页面上不会展示，所以当值没有展示的时候，要考虑自己的值是不是undefined

//有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>模板语法</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <div id="root">
        <!-- 模板语法分为插值语法和指令语法，vue实例中的所有东西都可以在其绑定的节点中直接使用 -->
        <!-- 其中不能写ifwhile等逻辑判断式,因为if和while等带有{}符号会导致大括号匹配错误 -->
        <!-- 插值语法是用来给标签内容解析js表达式的 -->
        <h1>插值语法</h1>
        <span>hello,{{who}}</span>
        <!-- 指令语法是用来给标签属性解析js表达式的 -->
        <h1>指令语法</h1>
        <a :href="url">百度一下</a>
    </div>
    <script>
        // 阻止vue在启动时产生生产提示
        Vue.config.productionTip = false;
    </script>
    <script>
        new Vue({
            el: '#root',
            data: {
                who: 'world',
                url: 'http://www.baidu.com'
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

数据绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据绑定</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <script>
        Vue.config.productionTip = false;
    </script>
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="value">
        <br> 双向数据绑定：
        <input type="text" v-model:value="value">
        <br>
        <!-- 双向数据绑定在绑定数据上比单向数据绑定好，那么为什么不都用v-model呢？因为v-model只能作用到表单 <input>、<textarea> 、<radio>、 <select>元素上 -->
        <!-- 双向数据绑定v-model:value可以简写为v-model，因为v-model默认就是绑定value属性的值 -->
        单向数据绑定简写：<input type="text" :value="value">
        <br> 双向数据绑定简写：
        <input type="text" v-model="value">
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                value: 'hahaha'
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

data的两种写法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <script>
        Vue.config.productionTip = false;
    </script>
    <div id="root">
        {{value}}
    </div>
    <script>
        const v = new Vue({
            el: '#root',
            // data: {
            //     value: 'hahaha'
            // },
            // data在组件中使用时必须写成函数式
            data() {
                return {
                    value: 'hahaha'
                }
            }
        })
        v.$mount('#root')
    </script>
</body>

</html>

事件处理

事件的基本使用

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>事件的基本使用</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
							2.事件的回调需要配置在methods对象中，最终会在vm上；可以放在data中，但是会增加vue的压力，因为data中的数据vue会进行数据代理和数据劫持
							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>欢迎来到{{ name }}学习</h2>
        <button v-on:click="showInfo1">点我提示信息</button>
        <button @click="showInfo1">点我提示信息1（不传参）</button>
        <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el: "#root",
            data: {
                name: "吉大"
            },
            methods: {
                showInfo1(event) {
                    // console.log(event.target.innerText)
                    // console.log(this) //此处的this是vm
                    alert("同学你好！");
                },
                showInfo2(event, number) {
                    console.log(event, number);
                    // console.log(event.target.innerText)
                    console.log(this); //此处的this是vm
                    alert(number);
                },
                // showInfo2:(event, number) => {
                //   console.log(event, number);
                //   console.log(this); //此处的this是这个Vue实例创建所在的作用域中的this，在这其实就是window
                //   alert(number);
                // },
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

事件修饰符

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <style>
        * {
            margin-top: 20px;
        }
        
        .demo1 {
            height: 50px;
            background-color: skyblue;
        }
        
        .box1 {
            padding: 5px;
            background-color: skyblue;
        }
        
        .box2 {
            padding: 5px;
            background-color: orange;
        }
        
        .list {
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }
        
        li {
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件（常用） -->
        <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

        <!-- 阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <!-- <a href="http://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
        </div>

        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素时才触发事件；点击button事件冒泡调用div的click事件，但是因为不是
		它自己调用的，所以不会执行 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
        <!-- passive主要用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验。
			因为passive=true等于提前告诉了浏览器，touchstart和touchmove不会阻止默认事件，
			手刚开始触摸，浏览器就可以立刻给与响应；否则，手触摸屏幕了，但要等待touchstart和touchmove的结果，
			多了这一步，响应时间就长了，用户体验也就差了。 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el: '#root',
        data: {
            name: '吉大'
        },
        methods: {
            showInfo(e) {
                alert('同学你好！')
                    // console.log(e.target)
            },
            showMsg(msg) {
                alert(msg);
            },
            demo() {
                console.log(1);
                for (let i = 0; i < 100000; i++) {
                    console.log('#')
                }
            }
        }
    })
</script>

</html>

在这里插入图片描述

键盘事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
</head>

<body>
    <!-- 
				1.Vue中常用的按键别名：一般配合keyup使用
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊，必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

				2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）不要写成驼峰的形式

				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
							(2).配合keydown使用：正常触发事件。

				4.也可以使用keyCode去指定具体的按键（不推荐，不同的键盘编码不统一，已经快要被废除了）

				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		-->
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
        <!-- 将键盘名称写成xx-xx的形式，不要写成驼峰的形式 -->
        <!-- caps-lock大写锁定键 -->
        <input type="text" placeholder="按下大小写提示输入" @keydown.caps-lock="showInfo">
        <input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">
        <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

    new Vue({
        el: '#root',
        data: {
            name: '吉大'
        },
        methods: {
            showInfo(e) {
                alert(e.keyCode)
            }
        },
    })
</script>

</html>

在这里插入图片描述
结束啦！

LiuJie_Boom

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue2基础知识点（1）模板语法、数据绑定、new Vue({data})的两种写法、事件处理

王元肉==>个人主页大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。推荐阅读文章结构模板语法数据绑定data的两种写法事件处理事件的基本使用事件修饰符键盘事件模板语法<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫