Vue知识点

最新推荐文章于 2022-08-02 11:36:56 发布

weixin_45191052

最新推荐文章于 2022-08-02 11:36:56 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_45191052/article/details/93500057

版权

虚拟dom（vdom）是什么？

它是一个object对象模型，用来模拟真实dom节点的结构

虚拟dom的使用基本流程
1.获取数据（ajax fetch）
2.创建vdom

<div class = "box">
  <ul>
     <li> {{ data.name }} </li>
  </ul>
</div>

3.通过 render函数解析jsx，将其转换成vodm结构

 var vdom = {
      tag: 'div',
      attr: {
         className: 'box'
           },
      content: [
             {
            tag: 'ul',
           content: [
                {
                 tag: 'li',
              content: data.name
                 }
                 ]
               }
             ]
           }

4.将vdom渲染成真实dom
5.数据更改
6.使用diff算法比对两次vdom，生成patch对象
7.根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（虚拟dom的惰性原则）

diff算法是什么
diff算法是比较两个文件的差异，并将两个文件不同之处，将这个不同之处生成一个补丁对象（patch）
diff算法来源后端
前端将其应用于虚拟dom的diff算法
vue中将虚拟dom的diff算法放在了 patch.js文件中
使用js来进行两个对象的比较（ vdom 对象模型）
diff算法是同级比较
给每一个层级打一个标记，这个标记是一个数字（这个数字就是 key ）

diff算法运行之后，返回什么？
patch(补丁对象)

注意：Vue是MVVM框架，Vue高性能的原因之一就是vdom

Vue两大特性

指令：用来操作dom
组件：组件是 html css js等的一个聚合体

为什么要使用组件？
1.组件化
*
将一个具备完整功能的项目的一部分进行多处使用
*
加快项目的进度
*
可以进行项目的复用

2.想要实现组件化，那么我们使用的这一部分就必须是完整的，我们把这个完整的整体就称之为组件。

基础组件的创建
1.全局组件注册

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<Father></Father>
</div>
</body>
<script>
/*
Vue.component( 组件的名称，组件的配置项 )

组件必须先注册在使用（ 实例（组件） 范围内使用 ）
*/

var Hello = Vue.extend({
template: '<div> 这里是father组件 </div>'
}) //VueComponent( option )


Vue.component( 'Father', Hello )


new Vue({
el: '#app'
})

</script>
</html>

2.局部组件注册

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<gabriel-yan></gabriel-yan>
</div>
</body>
<script>

/*
命名：
一个单词的大写： 注意不要和原生的h5标签重名，比如 header footer Header Footer
小写带- ， 比如 header-title
大驼峰： GabrielYan 使用 ： gabriel-yan

局部注册： 在组件中用一个components的配置项目来表示
只能在注册的范围内使用，其他地方是不能使用的
*/
var Hello = Vue.extend({
template: '<div> 这里是1903 </div>'
})


new Vue({
el: '#app',
components: {
// key: value key是组件名称 value是组件配置项
// 'gabriel-yan': Hello,
'GabrielYan': Hello
}
})

</script>
</html>

组件简写

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<Father></Father>
<gabriel-yan></gabriel-yan>
</div>
</body>
<script>


Vue.component('Father',{
template: '<div> 这里是全局注册 </div>'
})

new Vue({
el: '#app',
components: {
'GabrielYan': {
template: '<div> 这里是局部注册 </div>'
}
}
})

</script>
</html>

组件的嵌套

全局嵌套

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 下面这种写法是错误的 -->
<Father>
<Son></Son>
</Father>
<!-- 正确的应该是 -->
<Father></Father>
</div>
</body>
<script>

/*
组件的嵌套
父组件里面放子组件 ----》 类似于dom结构的父子级结构

将子组件以标签的形式放在父组件的模板中使用

切记，不要放在父组件的内容中
*/


Vue.component('Father',{
template: '<div> Father <Son></Son></div>'
})


Vue.component('Son',{
template: '<div> son </div>'
})


new Vue({
el: '#app',
})

</script>
</html>

局部嵌套

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 下面这种写法是错误的 -->
<Father></Father>
<!-- 正确的应该是 -->
<Father></Father>
</div>
</body>
<script>


/*
组件的嵌套
父组件里面放子组件 ----》 类似于dom结构的父子级结构


将子组件以标签的形式放在父组件的模板中使用

切记，不要放在父组件的内容中


组件不仅可以用双标签表示，也可以使用单标签表示
*/


new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '<div> father组件 <Son /></div>',
        components: {
          'Son': {
            template: '<div> son组件 </div>'
          }
        }
      }
    }
  })

</script>
</html>

template使用

<!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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h3> 实例范围内使用 </h3>
<template>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
<h3> 使用 hello 组件</h3>
<Hello></Hello>
</div>
<h3> 实例范围外使用 </h3>
<template id="hello">
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
</body>
<script>
/*
template使用：
1. 实例范围内使用
template中的内容被当做一个整体了，并且template标签是不会解析到html结构中的
2. 实例范围外使用
实例范围外template标签是不会被直接解析的


组件要想使用template使用，我们采用第二种


但是使用第二种template使用后，有个弊端，template标签结构会在html文件中显示


解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件
*/


Vue.component('Hello',{
template: '#hello'
})


new Vue({
el: '#app'
})
</script>
</html>