Vue的使用

最新推荐文章于 2024-07-08 19:01:49 发布

墨与

最新推荐文章于 2024-07-08 19:01:49 发布

阅读量618

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47116552/article/details/126023036

版权

1 VueJS 概述

1 VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

官网: https://cn.vuejs.org/

2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zypxuwKZ-1658926490691)(assets\图片1.png)]

3 VueJS 快速入门

1、创建vueProject

2 然后修改名字–>Next–>完成;完成后里面是空的

3 在项目下创建js文件夹,将vuejs.js文件放入js文件夹。

4 创建model.html(下面就是,也是快速入门案例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告
-->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    {
  {info}}
</div>
<script>

    new Vue({
     
       el:"#app",               //表示当前Vue对象管理div区域
       data:{
     
           info:"你好，vue!"
       }
    });
</script>
</body>
</html>

4 Vue 渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告
-->
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    {
  {info}}
</div>
<script>

    new Vue({
     
       el:"#app",               //表示当前Vue对象管理div区域
       data:{
     // 数据
           info:"你好，vue!"
       }
    });
</script>
</body>
</html>

首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
页面div中，我们通过{ {info}}的方式，来渲染刚刚定义的info属性。

5、双向绑定

<div id="app">
    <input type="text" v-model="num">
    <h2>
        {
  {info}} ,为你着迷,<br>
        有{
  {num}} 使用它。
    </h2>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    // 生成一个Vue实例
    var app = new Vue({
     
        el:"#app", // el,即element。要渲染的的页面元素
        data:{
      // 数据
            info:"你好，vue!",
            num:1
        }
    })
</script>

6、事件处理

我们在页面添加一个按钮：

<button v-on:click="num++">点我</button>

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

2 Vue实例

1.创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
   
  // 选项
})

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

el
data
methods

等，接下来我们一一介绍

2.模板或元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

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

然后创建Vue实例，关联这个div

var vm = new Vue({
   
	el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

3.数据

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

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
   
    el:"#app",
    data:{
   
        name:"张学友"
    }
})

name的变化会影响到input的值
input中输入的值，也会导致vm中的name发生改变

3 Vue生命周期和钩子函数

1.生命周期

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6kVHUze-1658926490692)(assets\生命周期.png)]

vue在生命周期中有这些状态：

beforeCreate:创建VUE对象之前执行，此时data中的数据还未初始化，el还未关联到对应的id
created:创建VUE对象之后执行,此时data中的数据已经初始化，但el还未关联到对应的id
beforeMount:对象挂载之前执行，此时el已经关联到对应对象,但{ {}}表达式还未加载
mounted:对象挂载之后执行,此时{ {}}表达已经加载，执行完mounted之后开始正常执行js代码
beforeUpdate:data数据更新前执行，此时data中的数据已经更新，但是{ {}}表达式中引用的还没有更新
updated:数据更新后执行,{ {}}表达式中引用也更新
beforeDestory:vue对象销毁前执行
destroyed:vue对象销毁后执行

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

2、钩子函数

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

html:

<div id="app">
    {
  {hello}}
</div>

js:

var vm = new Vue({
   
    el:"#app",
    data:{
   
        hello: '' // hello初始化为空
    },
    created(){
   
        this.hello = "hello, world！ 我出生了！";
    }
})

结果

4VueJS 常用系统指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是： JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

1 v-on指令

在没有使用vue之前，页面标签可以通过设置onXXX响应事件；在vue中可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

v-on简写方式

<!-- 完整语法 -->
<a v-on:click="doSomething()">...</a>
<!-- 缩写 -->
<a @click="doSomething()">...</a>

v-on:click

案例1：(单击事件)

<body>
<div id="app">
    <input type="button"  v-on:click="dianji()" value="点我"/>
</div>

<script>
    new Vue({
     
        el: "#app",
        data: {
     

        },
        methods:{
     
            dianji:function () {
     
                alert("弹框了");
            }
        }
    });
</script>
</body>

案例2：

<body>
// 点击div时，div中的值会发生改变
<div id="app" v-on:click="fun1('vue的点击事件触发啦！')" 
    style="width: 200px;height: 200px;border:1px solid red;">
   {
  {info}}
</div>

<script>
   new Vue({
     
       el: "#app",
       data: {
     
           info:"我是div"
       },
       methods:{
     
           fun1:function (msg) {
     
               this.info=msg;
           }
       }
   });
</script>

</body>

v-on:keydown

案例1：

<div id="app">
    <input type="text" v-on:keydown="fun2()">
</div>
<script>
    new Vue({
     
        el: '#app',
        methods: {
     
            fun2: function (a) {
     
               alert("键盘按下了");
            }
        }
    });
</script>