Vue的基础入门之第一篇

标签: Vue  vue  vue.js

一、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的优点:

  • 易用:掌握htmlcssjavascript,就能够快速上手。
  • 灵活:可以只使用部分库,也可以全部使用。
  • 高效:超快虚拟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标签并且idapp,然后有了双大花括号渲染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.htmltitle标签上面添加如下代码:

	<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键,我们去点击:
    在这里插入图片描述
    发现是可以触发的。
    好的接下来我们就可以用这些所学的做个简单的小案例。
版权声明:本文为weixin_44103733原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44103733/article/details/106016720