Veujs从入门到应用（一）

最新推荐文章于 2024-02-06 14:31:01 发布

Jacobshash

最新推荐文章于 2024-02-06 14:31:01 发布

阅读量567

点赞数

分类专栏：前端开发 # Vue.js

本文链接：https://blog.csdn.net/LOL_toulan/article/details/105016759

版权

前端开发同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue.js

3 篇文章 0 订阅

订阅专栏

一、vue的安装

Vue的安装有大体上三种

1.下载安装

这种方法我们可以直接到官网下载：Vue官网，然后直接通过<script></script>，导入，这需要注意的是，<script src=""/> ，可能会导致Vue.js无法正常引入，当然，这不是Vue的原因，而是html的一个小bug。
示例：

<script type="application/javascript" src="vue.js"></script>

2. 使用CDN在线引入

这里提供两个版本

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

3. 使用npm安装（推荐）

使用npm安装是因为我们将来通过node.js将前端应用打包更加简单与容易，安装方式如下：

当然是基于node.js环境的开发，当然需要安装node.js，当然也是官网下载：node.js下载下载，下载好msi后缀的安装包，直接傻瓜式安装就可以了，然后再终端，输入node -v查看是否安装成功
在这里插入图片描述
因为node.js安装包自带npm所以我们可以查看npm的版本

ps : 版本无所谓，能用就行

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间

npm install nrm -g

安装完成之后，我们再cmd窗口输入nrm ls
在这里插入图片描述
在这里我们可以通过 nrm test 来测试所有的镜像的延迟情况

我们发现淘宝的镜像要明显高于其他的镜像，所以我们可以使用taobao镜像，使用方法

nrm use taobao

当然想使用其他镜像，直接通过

nrm use 前面的名字

就可以。

二、Vue项目的搭建

现在我们就可以开始搭建Vue项目了
当然，如果我们使用的是CDN方式，或者是通过下载vue.js直接导入js文件的，我们就可以跳过此步骤。
首先我们创建一个空项目，本案例是通过webstorm来创建的
在这里插入图片描述

如果是其他的工具搭建，如hbuilderx 等一些其他开发工具，我们无法再工具中打开cmd终端，这时我们可以直接我们创建的项目文件夹下通过shift + 鼠标右键

这时我们输入

npm init -y

来进行初始化
在这里插入图片描述

然后，安装Vue，输入命令：

npm install vue --save

在这里插入图片描述

这时我们再项目中引入vue.js

<script src="node_modules/vue/dist/vue.js"></script>

还是想说明下：我们在使用Vue之前，尽量安装一个chrome插件：
在这里插入图片描述

三、vue入门案例

vue声明式渲染

我们想实现这种功能
在这里插入图片描述
普通的js中我们需要

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>大家好，我是<span id="name"></span></h1>
</body>

<script>
    let element = document.getElementById("name");
    element.innerText = "loltoulan";
</script>
</html>

而通过vuejs渲染的代码是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>大家好，我是{{name}}</h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">
    //创建一个vue实例
     new Vue({
         // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
         //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            name: "loltoulan"
        }
    });
</script>
</html>

效果（当然两种代码都是同样的效果）：
在这里插入图片描述
上面我们说的是我们的vue的模板，当然不止这些，这些是让我们了解vue改怎么用。

vue双向绑定

我们对刚才的案例进行分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num" />
        <h1>大家好，我是{{name}}，有{{num}}位女神拒绝过我</h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">
    //创建一个vue实例
     new Vue({
         // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
         //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            name: "loltoulan",
            num:100
        }
    });
</script>
</html>

我们添加了一个新的属性num
在页面中有一个input元素，通过v-model与num进行绑定。（v-model我们将在下面介绍）
同时通过{{num}}在页面输出

效果：
在这里插入图片描述
我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input与num绑定，input的value值变化，影响到了data中的num值
页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

事件处理

我们载页面添加一个按钮，通过按钮来控制页面效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num" /><button v-on:click="num++">点我添加</button>
        <h1>大家好，我是{{name}}，有{{num}}位女神拒绝过我</h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">
    //创建一个vue实例
     new Vue({
         // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
         //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            name: "loltoulan",
            num:100
        }
    });
</script>
</html>

效果如下：
在这里插入图片描述

这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num
普通click是无法直接操作num的。

四、Vue实例

创建vue实例

由上面我们知道每个Vue应用都是通过Vue函数创建一个Vue实例来开始的，形如

new Vue({

});

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el
data
methods
…

接下来我们一一介绍。

模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板：

<div id="app">
    
</div>

我们通过创建vue实例，来利用vue实例中的el元素来进行绑定

<script>
const vm = new Vue({
	el:"#app"
});
</script>

然后我们的vm的作用域就是id为“app”的页面元素，关联这个元素，这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label>
        <input type="text" v-model="name" />
    </label><br><br>
    <input type="button" v-model="name">
    <h1>大家好，我是{{name}}</h1>

    <label>
        <textarea v-model="name"></textarea>
    </label>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">
    //创建一个vue实例
    const vm = new Vue({
        // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
        //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            name: "loltoulan",
        }
    });
</script>
</html>

效果：
在这里插入图片描述

方法

我们在vue中也可以定义方法，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <label>
          <h1>  <input type="text" v-model="num" /></h1>
        </label>
        <button v-on:click="num++">点我添加</button>
        <button v-on:click="this.add">点我减少</button>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">
    //创建一个vue实例
     const vm = new Vue({
         // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
         //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            num:100
        },
         methods:{
            add:function () {
                this.num--;
            }
         }
    });
</script>
</html>

效果：
在这里插入图片描述

生命周期钩子

每个vue实例在被创建时都要经过一系列的初始化过程，创建实例，装载模板，渲染模板等等。Vue为生命周期的不同状态都创建了钩子函数（监听函数），每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

声明周期

声明周期流程图：
在这里插入图片描述

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}

mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。此时页面中的{{name}}已被渲染loltoulan

beforeDestroy：该函数将在销毁实例前进行调用。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新之前。

updated：组件更新之后。

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <label>
            <input type="text" v-model="num" />
        </label>
        <button v-on:click="num++">点我添加</button>
        <button v-on:click="this.add">点我减少</button>

        <h1>大家好，我是{{name}}，有{{num}}位女神拒绝过我</h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">
    //创建一个vue实例
     const vm = new Vue({
         // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
         //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            name:"loltoulan",
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            num:100
        },
         methods:{
            add:function () {
                this.num--;
            }
         },
         created: function () {
             this.num = 2222;
         }
    });
</script>
</html>

效果：
在这里插入图片描述
这里要注意的是，其实，我们在vue实例中写的两个num值，data中的值是优先级最高的，之所以，我们页面上展示的不是data中的num的属性，主要原因是后边传的数据的把前面的数据覆盖了。

this关键字

this关键字可以说是极其重要的，但是我们需要知道他的作用域

在Vue中，我们使用this关键字也效果极好，看下面一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <label>
            <input type="text" v-model="num" />
        </label>
        <button v-on:click="num++">点我添加</button>
        <button v-on:click="this.add">点我减少</button>

        <h1>大家好，我是{{name}}，有{{num}}位女神拒绝过我</h1>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script type="application/javascript">

    //创建一个vue实例
     const vm = new Vue({

         // el , element的缩写，通过id选中要渲染的页面元素，本例中是一个div
        el: "#app",
         //数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
        data: {
            name:"loltoulan",

            number : 2222,
            //我们需要渲染的元素，如果此处与我们在html中的不一致，可能无法渲染
            num:100
        },
         methods:{
            add:function () {
                this.num--;
            }
         },
         created: function () {
             this.num = this.number;
         }
    });
</script>
</html>

在上一段代码中，如果我们将created这个钩子函数中的num前面的this去掉，那么这个num将无法重新赋值，因为编译器认为我们又重新创建了一个变量，但是变量也没有赋值，所以无法起作用，就算是我们将this.num = this.number;改为num = 1000，也是不起作用的，因为编译器不确定我们在此处操作的num是不是我们需要的那个num，所以系统会将num赋值为data里面的属性值。

this在本例中代表，整个Vue实例对象：
在这里插入图片描述