vue(四)

南城孤巷

已于 2022-04-08 09:55:02 修改

阅读量86

点赞数 1

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

于 2022-03-29 12:01:00 首次发布

本文链接：https://blog.csdn.net/qq_53293179/article/details/123627419

版权

vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

内置指令

我们学过的指令:
v-bind :        单向绑定解析表达式，可简写为:XXx
v-model         :        双向数据绑定
v- for :        遍历数组/对象/字符串
v- on :        绑定事件监听，可简写为@
v-if :        条件渲染(动态控制节点是否存存在)
v-else :        条件渲染(动态控制节点是否存存在)
v- show :        条件演染(动态控制节点是否展示)

v-text

1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别: v-text会替换掉节点中的内容

v-html

注意: v-html有安全性问题
(1).在网站上动态谊染任意HTML是非常危险的。
(2).一定要在可信的内容上使用v-html

v-cloak

1.本质是个特殊属性， Vue重例创建完中并接管容器后，会删掉v- cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的

<style>
    [v-clock]{
        display: none;
    }
</style>

<body>
    <div>
        <h2 v-cloak>{{name}}</h2>
    </div>
</body>

v-once

1.v-once所在节点在初次动态演染后，就视为静态内容了。
2.以后数据的改变不会引起V- once所在结构的更新。可以用于优化性能。

<div id="root">
    <h2 v-once>n的初值：{{n}}</h2>
    <h2>当前n的值</h2>
    <button @click="n++">点击n++</button>
</div>

v-pre

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

<div id="root">
    <h2 v-pre>Vue</h2>
    <h2 v-once>n的初值：{{n}}</h2>
    <h2>当前n的值</h2>
    <button @click="n++">点击n++</button>
</div>

自定义指令：

在directives中定义自定义指令

例：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body> 
	<div id="root">
          <div id="root">
            <span>当前n为：<span v-text="n"></span></span><br/>
            <span>放大十倍n为：<span v-big="n"></span></span><br/>
            <input v-fbind="n"><br/>
            <button @click="n++">n++</button>
	    
    	   
    
	</div>
    
	</div>
	<script>

	new Vue({
    	    el:"#root",
	    data:{
		n:1
      	    },
	    directives:{
                //big何时调用？1.数据成功绑定时2.数据更新时
                //简写
                big(element,binding){
                    element.innerText=binding.value*10
                },
                //详写
                fbind:{
                    //数据成功绑定时
                    bind(element,binding){
                        element.innerText=binding.value*10
                    },
                    //插入到页面时
                    inserted(element,binding){
                        element.focus()
                    },
                    //指令被重新解析时
                    update(element,binding){
                        element.innerText=binding.value*10
                    }
                }

	    }
      	    
        
	})
	</script>
        
    </body>
</html>

生命周期

vm的一生(vm的生命周期) :
        将要创建===>调用beforeCreate函数。
        创建完毕===>调用created函数。
        将要挂载===>调用beforeMount函数。
        (重要)挂载完毕===>调用mounted函数。 ============>[重要的钩子)
        将要更新===>调用beforeUpdate图数。
        更新完毕===> 调用updated函数。
        (重要)将要销毁===>调用beforeDestroy函数。=======>[重要的钩子]
        销毁完毕===> 调用destroyed函数。

非单文本组件

组件的定义-------实现应用中局部功能代码和资源的集合

Vue中使用组件的三大步骤:

一，定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

如何定义一个组件?

使用Vue.extend(options)创建，其中options和new Vue(options )时传入的那个options几乎一样，但也有点区别:
区别如下:
1.el不要写，为什么?
最终所有的组件都要经过个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么?

避免组件被复用时，数据存在引用关系。
备注:使用template 可以配置组件结构。

如何注册组件?
1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component('组件名' ,组件)

三、编写组件标签:
<school></school>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="GBK">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body> 
	<div id="root">
		{{msg}}
            <!--第三步：编写组件标签-->
            <school></school>
    	   
    
	</div>
	<script>
            //第一步：创建组件
            const school=Vue.extend({
                template:'<div>学校名称：<span>{{schoolName}}</span><br/><span>学校地址：{{address}}</span></div>',
                data(){
                    return{
                        schoolName:"aaaaa",
                        address:"bbbbb"
                    }
                }
            })
            
            //第二部：全局注册组件
            //Vue.component("Shool",shool)
            
            //第三部创建vm
            new Vue({
                el:"#root",
                data:{
                    msg:"你好"
                },
		components:{school}

	
      	    
        
	})
	</script>
        
    </body>
</html>

组件注意点：

几个注意点:
1.关于组件名:
一个单词组成:
第一种写法(首字母小写): school
第二种写法(首字母大写): School
多个单词组成
第一种写法(kebab-case命名): my-school
第二种写法(CamelCase 命名): MySchool (需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称，例如: h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法: <schoo1></schoo1>
第二种写法: <school/>
备注:不用使用脚架时，<school/> 会导致后续组件不能渲染。

组件的嵌套：

const school=Vue.extend({
                template:'<div>学校名称：<span>{{schoolName}}</span><br/><span>学校地址：{{address}}</span></div>',
                data(){
                    return{
                        schoolName:"aaaaa",
                        address:"bbbbb"
                    }
                },
                components:{student}
            })