1、Vue 生命周期、模板、指令、Class 与 Style 绑定、过滤器、AJAX请求（系列：Vue深入学习）

最新推荐文章于 2022-09-19 22:16:24 发布

赵sir来了

最新推荐文章于 2022-09-19 22:16:24 发布

阅读量302

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43389371/article/details/89436542

版权

本文详细介绍了Vue的使用方法，包括如何创建实例、生命周期概念及其钩子函数，以及模板中的插值表达式、指令如v-cloak、v-model、v-for等的用法。同时讲解了Class与Style的绑定和过滤器的使用。最后，通过vue-resource实现了AJAX请求，包括安装、引用和基本用法。

摘要由CSDN通过智能技术生成

vue

如何使用？

注意：后面的 html、js 代码都会以写在 body体这里

先在 html 文件中导入 vue，这时候就有一个 Vue 构造函数，可以通过 new 来构造一个实例

<!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>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <!-- 导入 vue.js 文件 -->
</head>
<body>
    <!-- 下面的html,js代码都会以写在这里 -->
</body>
</html>

创建一个 Vue 的实例

<div id='vue'>
    <p>
        {
    { msg }}<!-- vue 中提供的模板，和 art-template 类似 -->
    </p>
</div>
<script>
let vue = new Vue({
      
	el:'#vue',
    data:{
      
		msg:'hello Vue'
    }
})
</script>

el ：表示当前我们 vue 实例在页面上控制的区域，它获取DOM对象的方式和JQuery非常类似.(String)
data ：表示存放在当前我们 vue 实例在页面上控制的区域中要用到的数据.(Object)

生命周期

生命周期：从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件。而这些事件，统称为生命周期

生命周期钩子：就是生命周期事件的别名

其实，生命周期钩子等同于生命周期函数等同于生命周期事件

生命周期一般分为三类：

创建期间的生命周期钩子
- beforeCreate
- created
- beforeMount
- mounted
运行期间的生命周期钩子
- beforeUpdate
- updated
销毁期间的生命周期钩子
- beforeDestroy
- destroyed

请参考 vue 官网上的生命周期图片：

在这里插入图片描述

我们用 AJAX 请求服务器时，一般使用 created 生命周期钩子

模板

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<div id='vue'>
    <p >{
  { msg }}</p>
</div>
<script>
let vue = new Vue({
    
	el:'#vue',
    data:{
    
		msg:'hello Vue'
    }
})
</script>

指令

在 vue 中所有的内置指令都会在前以 v- 开头，那 vue 中的指令又是什么呢？

指令：它们作用于 DOM 元素，提供一些特殊的用法，避免我们写太多代码，也就是说是一些封装好的特性

v-cloak

cloak（披风） ：这个指令可以用来解决网速加载很慢的时候，页面会先出现{ {}} (Mustache)，再一闪而过出现真实的数据。(解决插值表达式闪烁的问题)

css 代码:

[v-clock] {
   
	display: none;
}

html、js 代码：

<div id='vue'>
    <p v-cloak>
        {
  { msg }}
    </p>
</div>
<script>
let vue = new Vue({
    
	el:'#vue',
    data:{
    
		msg:'hello Vue'
    }
})
</script>

v-text

v-text，和插值表示式功能类似，但是也是有区别的：

v-text 没有闪烁问题，而插值表达式 { {}} 有闪烁问题
v-text 会覆盖元素中原本的内容，但是插值表示式并不会覆盖，因为它只会替换自己的占位符

<div id='vue'>
    <p v-text='msg'><!-- v-text，和插值表示式功能类似 -->
    </p>
</div>
<script>
let vue = new Vue({
    
	el:'#vue',
    data:{
    
		msg:'hello Vue'
    }
})
</script>

v-html

v-html ,会将内容按 HTML 的形式插入到标签中，而 v-text、插值表达式都是以字符串的形式插入到标签中

<div id="vue" v-html='dom'>
        
</div>
<script>
    let vue = new Vue({
    
        el:'#vue',
        data:{
    
            dom:'<p>hello vue,I used "p" label</p>'
        }
    })
</script>

v-bind

v-bind 用于绑定 DOM 属性

<div id="vue">
    <button v-bind:title='mytitle'>title</button>
</div>
<script>
    let vue = new Vue({
    
        el:'#vue',
        data:{
    
            mytitle : '这是v-bind的title'
        }
    })
</script>

注意：v-bind 后面单引号部分会以js的形式进行解析，也就是可以使用js表达式

<div id="vue">
    <button v-bind:title='mytitle + `js代码解析`'>title</button>
</div>
<script>
    let vue = new Vue({
    
        el:'#vue',
        data:{
    
            mytitle : '这是v-bind的title'
        }
    })
</script>

简写：

可以直接是用 : （英文冒号）表示 v-bind:

<div id="vue">
    <button :title='mytitle + `js代码解析`'>title</button>
</div>
<script>
    let vue = new Vue({
    
        el:'#vue',
        data:{
    
            mytitle : '这是v-bind的title'
        }
    })
</script>

v-on

v-on 用于绑定事件的，v-on: 后面的事件和 jQuery 中事件很类似

注意：在 vue 中，在为元素指定处理函数的时候，如果加了小括号，就可以给函数传递参数

<div id="vue">

最低0.47元/天解锁文章

赵sir来了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、Vue 生命周期、模板、指令、Class 与 Style 绑定、过滤器、AJAX请求（系列：Vue深入学习）

vue如何使用？注意：后面的 html、js 代码都会以写在 body体这里先在 html 文件中导入 vue，这时候就有一个 Vue 构造函数，可以通过 new 来构造一个实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met...
复制链接

扫一扫

专栏目录