位置: IT常识 - 正文

【学vue跟玩一样】快速学会常用指令及如何理解生命周期(vue好不好学)

发布时间：2024-01-17

【学vue跟玩一样】快速学会常用指令及如何理解生命周期一，内置指令1.v-text

推荐整理分享【学vue跟玩一样】快速学会常用指令及如何理解生命周期(vue好不好学)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:学vue之前,vue好学还是js好学,vue学起来困难吗,vue好不好学,vue好不好学,学vue用什么软件,vue好学吗?,学vue3还是vue2,内容如对您有帮助，希望把文章链接给更多的朋友！

v-bind:，单向绑定解析表达式

v-model :双向数据绑定

v-for:遍历数组/对象/字符串

v-on :绑定事件监听,可简写为@

v-if :条件渲染(动态控制节点是否存存在)

v-else :条件渲染(动态控制节点是否存存在)

v-show:条件渲染(动态控制节点是否展示)

<body><div class="user"><h4>{{name}}</h4><div v-text = 'name'></div></div><script>const vm = new Vue({el:'.user',data:{name:'山鱼'}})</script></body>2.v-html

1.作用:向指定节点中渲染包含htm1结构的内容。

2.与插值语法的区别:

(1)v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2)v- html可以识别htm1结构。

3.注意: v-htm有安全性问题

(1)如果在网站上动态渲染html，很容易收到xss攻击

(2)v-html一般只用在可信的地方使用

<body><div class="user"><div v-html = 'name'></div></div><script>const vm = new Vue({el:'.user',data:{name:'<h1>我是山鱼<h1>'}})</script></body>3.v-cloak

1，没有值，只是一个单纯的属性，当vue实例接管后就会消失

2，作用是，当网速过慢时，不让未解析的页面展示出来

<body><div id='root'><h2 v-cloak>{{name}}</h2></div></body><script>new Vue({el: '#root',data: {name: '山鱼学院'}})</script>4.v-once 【学vue跟玩一样】快速学会常用指令及如何理解生命周期(vue好不好学)

v-once所在节点在初次动态渲染后，就视为静态内容了(只进行一次渲染，就像是一次性用品)

2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

<body><div id='root'><h2 v-once>初始化的n为：{{n}}</h2><h2>当前的n为：{{n}}</h2><button @click="n++">n+1</button></div></body><script>new Vue({el: '#root',data: {n: 1,}})</script>5.v-pre

1.跳过其所在节点的编译过程。

2.可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译。

<body><div id='root'><h2 v-pre>山鱼很简单</h2><h2>当前的n为：{{n}}</h2><button @click="n++">n+1</button></div></body><script>new Vue({el: '#root',data: {n: 1,}})</script>二，自定义指令<!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>自定义</title><script src="../js/vue.js"></script></head><body><div id='root'><h2>当前的n值为：{{n}}</h2><h2>n值放大10倍 <span v-big-number='n'></span> </h2><button @click='n++'>点我＋1</button><input type="text" v-fbind:value='n'></div></body><script>// 全局自定义指令（对象式也这么写）Vue.directives('big', function (element, binding) {console.log('big', this)//注意此处的this是windowelement.innerText = binding.value * 10;})new Vue({el: '#root',data: {n: 1,},directives: {//big函数何时会被调用? //1.指令与元素成功绑定时。 //2.指令所在的模板被重新解析时// 函数式big: function (element, binding) {console.log('big', this)//注意此处的this是windowelement.innerText = binding.value * 10;},'big-number': function (element, binding) {element.innerText = binding.value * 10;},// 对象式'fbind': {// 指令与元素绑定成功时调用bind(element, binding) {element.value = binding.value;},// 指令所在元素被插入页面时inserted(element, binding) {element.focus()},// 指令所在的模板被重新解析时update(element, binding) {element.value = binding.value;},}}})</script></html>三，什么是生命周期？

Vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。

1.又名 → 生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么？Vue在关键时刻帮我们调用的些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是Vm或组件实例对象

形象点来说就类似于人的一生，分为这么几个重要阶段，【呱呱坠地→孩童时期→青年时期→暮年时期】，这四个大的阶段。

四个阶段也成为钩子：

1.初始化 ==> 创建组件 ==> beforeCreate created

2.挂载 ==>渲染显示组件 ==> beforeMount mouted

3.更新 ==>修改了变量==>触发视图刷新 ==> beforeUpdate updated

4.销毁 ==>切换页面 ==>会把组件对象从内存删除 ==> beforeDestory destoryed

常用的生命周期钩子