Vue的基础入门之第一篇

其他 2021-01-26 10:12:23 阅读次数: 0

本文目录

一、Vue概述及入门

1.Vue概述

Vue作者：尤雨溪。
Vue是国产优质前端框架。
Vue：渐进式JavaScript框架。

  • Vue.js发布时间：2014年2月正式发布。
  • Vue.js 1.0.0发布时间： 2015年10月正式发布。
  • Vue.js 2.0预览版本：2016年4月正式发布。

2.0 及以上的版本与1.0.0 的版本发生了比较大的变化，接下来接触的是2.0以上的版本。

Vue的优点：

  • 易用：掌握html、css、javascript，就能够快速上手。
  • 灵活：可以只使用部分库，也可以全部使用。
  • 高效：超快虚拟dom，双向数据绑定。

2.Vue入门

无论我们学习什么语言还是框架，都是从打印Hello World 开始，这个已经成为IT不成文的规定了，好的我们开始吧。

  1. 在桌面创建Vue-base文件夹，我们基础入门练习将在这个文件夹开始，并采用CDN的方式引入Vue，先了解Vue的语法，等到后面再开始脚手架的搭建。
  2. 将Vue-base文件夹拖到vscode编辑器里，然后创建文件01vue.html。

在01vue.html文件下输入如下代码：

<!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">
        {
    
    {
    
    msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        new Vue({
    
    
            el: '#app',
            data: {
    
    
                msg: 'Hello World'
            }
        })
    </script>
</body>
</html>

用浏览器打开改文件，运行如下：
在这里插入图片描述
代码解读：

  1. 首先我们在body标签中，有个div标签并且id为app，然后有了双大花括号渲染msg；
  2. 接着我们引入了Vue CDN，会让我们全局有个Vue对象。
  3. 然后我们new Vue 并往里面传一个对象，el字段代表着，这个Vue控制着哪个dom，我们控制这id="app"这个div标签。
  4. data字段里面存储着我们要渲染到页面的一些数据，可以看到我们渲染了msg，而msg就是Hello World，可以看到它被解析到页面了。

3.总结

  1. 在Vue实例中el字段：元素的挂载那个标签，值为css选择器。
  2. data：对象。在html中需要渲染的值存储位置。
  3. { { }}：插值表达式，将数据填充到html。里面也可以支持一些简单的运算方式、三步运算符、字符串拼接。

二、Vue模板语法

1.前端渲染理解

如何理解前端渲染，其实Vue的差值表达式，浏览器是不认识的，但是Vue通过自己的编译过程，将语法渲染成功浏览器能够认识的代码，其实就是将数据填充到HTML中。图片理解如下：
在这里插入图片描述

2.Vue指令

1.什么是指令

指令的本质就是自定义属性。

2.指令格式

指令的格式就是以v-指令名称 v-开头，具体有哪些指令，得看Vue开放出哪些指令。

3.v-cloak指令的用法

打开我们刚刚用Vue写的Hello World的网页，然后快速刷新，会发现双大花括号出现下马上替换成Hello World：
在这里插入图片描述
那为什么会出现这种情况呢，那这个就要取决于Vue，因为它一开始是将插值表达式渲染到页面中，然后迅速替换，所以当我们快速刷新时就能看到。
那么我们就可以用v-cloak指令来解决这个问题。在01vue.html的title标签上面添加如下代码：

	<style>
        [v-cloak] {
    
    
            display: none;
        }
    </style>

并且在id="app"标签上使用指令c-cloak，如下:
在这里插入图片描述
然后我们再去快速刷新页面，就不存在这个问题了：
在这里插入图片描述

4.总结

Vue中的指令就是以v-开头的，具体的指令要看Vue开放的api，后面会了解常用指令。

3.数据绑定指令

1. v-text 填充纯文本。

在这里插入图片描述
页面展示效果：
在这里插入图片描述
v-text更加简洁，如果使用插值表达式，还要使用指令v-cloak。

2. v-html 填充 HTML 片段。

在这里插入图片描述
页面效果点击百度会跳转到百度的连接：
在这里插入图片描述
不过不推荐这样直接将html插入，因为可能会有安全隐患，所以最好不要使用。

3. v-pre 填充原始信息。

在这里插入图片描述
效果如下:
在这里插入图片描述
v-pre 它会跳过编译过程。

4.数据响应式

1. 数据响应式是什么

数据响应其实就是数据发生改变，页面会随着数据改变而呈现最新的数据的值。

2.数据绑定

数据绑定其实就是将数据和标签联系。

3.v-once指令只编译一次

在这里插入图片描述
效果如下：
在这里插入图片描述
可以发现绑定了v-once指令后，再去修改数据不生效，而没绑定这个指定的数据会随着的值的改变而改变。那这个有什么用呢，如果确定这个值只获取一次，后面不发生改变就可以使用这个数据，可以减少Vue底层监听的开销。

4.总结

数据响应式其实就是，数据改变驱动我们页面视图的改变，让我们不需要再像以前那样还要操作dom的操作，只需要关注数据层面。

5.双向数据绑定

1.什么是双向数据绑定

双向数据绑定其实Vue里的一大特点，甚至连React都没要双向数据绑定，双向数据绑定其实就是input输入框值的改变会使页面同一数据发生改变。运用指令v-model，例如：
在这里插入图片描述
效果如下：
在这里插入图片描述

2.双向数据绑定的原理

其实就是使用了，input框的监听事件input，当用户触发事件时，会获取input框里的值，从而去设置我们data里的值。后面学了事件后，我们将会自己利用原理实现。

3.MVVM的设计思想

M（Model）数据，V（View）视图，VM（View-Model）实现控制逻辑。

6.事件绑定

1.Vue中如何处理原生的事件

v-on指令绑定事件，例如点击事件，代码如下：

<!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 v-cloak id="app">
        <p>{
    
    {
    
    num}}</p>
        <button v-on:click = "clickFunc">加</button>
        <button @click = "clickFunc">加</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                num: 0,
            },
            methods: {
    
    
                clickFunc () {
    
    
                    this.num++
                }
            }
        })
    </script>
</body>
</html>

代码解读：

  1. 我们使用了v-on:click = "clickFunc"，绑定了点击事件，当每次点击时都会触发clickFunc这个函数。
  2. 这个clickFunc函数在Vue实例的methods对象字段中去定义。
  3. 在Vue对象实例中要获取data里的值，直接使用this，因为Vue做了处理，里面字段全部挂载到Vue实例下，包括方法字段中，一个方法要调用另一个方法，直接this.方法名
  4. v-on:指令可以简写成@

接下来我们去运行下：
在这里插入图片描述

2.事件的基本使用

函数如果没有传递参数过来那么默认会接受一个事件对象，例如：

clickFunc (event) {
    
    
                    this.num++
                    console.log(event)
                }

我们让这个函数去接受一个参数，因为没有传值，所以默认事件对象会被传进来，我们打印查看如下：
在这里插入图片描述
事件对象被打印出来了。

很显然上面的代码只是每次简单加1，那么我们如果想自己传几每次就加几该怎么做呢？通过函数参数传值的方式，那如果通过函数传值的话，事件对象要用特殊的字段$event传递过来如下：
在这里插入图片描述
可以看到每次点击加，每次都加10，并且事件对象也会被打印出来。
在这里插入图片描述

7.事件修饰符

1.事件修饰符值阻止冒泡

我们有如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        [v-cloak] {
    
    
            display: none;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div v-cloak id="app">
        <h1>{
    
    {
    
    num}}</h1>
        <div @click="clickReduceFunc(5)">
            <button @click="clickAddFunc(10)">开始</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                num: 0,
            },
            methods: {
    
    
                clickAddFunc (base) {
    
    
                    this.num += base
                },
                clickReduceFunc (base) {
    
    
                    this.num -= base
                    console.log('我通过冒泡触发了')
                }
            }
        })
    </script>
</body>
</html>

点击开始按钮，会触发绑定在它上面的点击事件clickAddFunc，然后会冒泡到父级所以就也会触发clickReduceFunc事件，一个加10，一个减5，最后只能加5，打开控制台查看：
在这里插入图片描述
可以看到父级绑定的点击事件也被触发了，我们如果只想触发clickAddFunc这个函数让它老老实实加10，不想它冒泡触发父级绑定的函数，通过原生js，我们是不是采用事件对象event.stopPropagation()去阻止冒泡。但是在Vue里我们只需要将clickAddFunc这个函数这样写就能阻止冒泡：

<button @click.stop="clickAddFunc(10)">开始</button>

在click后面加.stop，同样可以接受链式调用，这样

<button @click.stop.prevent="clickAddFunc(10)">开始</button>

.prevent阻止默认事件
更多事件修饰符可以点我查看

8.按键修饰符

1. .enter是回车键，.65是a键

当我们想这个按钮不止用过鼠标点击会触发，我通过回车键或者键盘上a键也能触发可以这样写：

<!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 v-cloak id="app">
        <input @keyup.enter.65="keyupFunc" type="text">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
        const vm = new Vue({
    
    
            el: '#app',
            methods: {
    
    
                keyupFunc (event) {
    
    
                    console.log(event.target.value)
                    console.log(event.keyCode)
                }
            }
        })
    </script>
</body>
</html>

现在输入值后就可以通过a键或者回车进行打印了：
在这里插入图片描述
回车键也可以改成13，它也会生效因为它的keyCode就是13
更多按键修饰符点我查看

2. 自定义按键修饰符
  • 全局Vue.config.keyCodes.
    在这里插入图片描述
    这样的话更直观a就是a键，我们去点击：
    在这里插入图片描述
    发现是可以触发的。
    好的接下来我们就可以用这些所学的做个简单的小案例。

猜你喜欢

转载自blog.csdn.net/weixin_44103733/article/details/106016720
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022