"Vue.js详细总结：MVVM框架、SPA、组件化"

vue

需积分: 0 149 浏览量更新于2024-01-21 2 收藏 4.11MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

Vue.js是一款构建用户界面（view）的MVVM框架。它的核心库专注于视图层，并且很容易学习和与其他库或项目整合。Vue.js的产生是为了解决数据绑定、开发大型单页面应用和支持组件化的问题。 MVVM模式是Vue.js的特性之一。MVVM模式由三个部分组成：模型(Model)、视图(View)和视图模型(ViewModel)。模型负责处理数据并提供数据，视图是用户界面，而视图模型是模型中的数据发生改变时的逻辑处理。 Vue.js的数据绑定功能非常强大，可以实现双向绑定。这意味着当模型中的数据发生变化时，视图会自动更新，而当视图中的数据发生变化时，模型也会相应地更新。这种数据绑定的方式大大简化了开发过程，减少了手动更新数据的工作量。另一个Vue.js的特性是支持组件化。组件化能够将页面封装成若干个组件，每个组件都有自己的逻辑和样式，并且可以在多个页面中复用。这样可以提高页面的复用度，减少代码的重复性，提高开发效率。 Vue.js还具有轻量级、高效、灵活等特点。它的体积很小，加载速度快，性能优异。Vue.js采用了虚拟DOM的方式来更新视图，只会更新发生变化的部分，减少了不必要的开销。另外，Vue.js支持第三方库和插件的集成，能够满足各种需求。在使用Vue.js进行开发时，我们可以通过Vue实例来创建和管理Vue组件。Vue组件由模板、脚本和样式组成。模板用于定义组件的结构，脚本用于定义组件的逻辑，样式用于定义组件的样式。通过组件化的方式，我们可以更好地组织代码，提高代码的可读性和维护性。总的来说，Vue.js是一款简单易用、灵活高效的MVVM框架，适用于开发各种规模的应用程序。它具有强大的数据绑定功能和支持组件化的特性，能够提高开发效率和代码质量。同时，Vue.js的轻量级和高性能也使得它成为当前流行的前端框架之一。无论是PC端还是移动端，Vue.js都能够提供良好的开发支持，是前端开发人员的首选之一。总结描述Vue.js的特点在于其采用了MVVM模式、强大的数据绑定功能和支持组件化。通过MVVM模式可以将业务逻辑与视图分离，实现视图的自动更新。而数据绑定功能可以实现双向绑定，简化了数据更新的操作。另外，Vue.js支持组件化开发，提高了代码的重用性和维护性。总的来说，Vue.js是一款简单易用、灵活高效、轻量级、高性能的前端框架，适用于开发各种规模的应用程序。无论是PC端还是移动端，Vue.js都能够提供良好的开发支持，是当前流行的前端框架之一。

资源详情

资源推荐

3.set和nextTick方法和ref属性

   })

 </script>

</body>

</html>

<!DOCTYPE html>

<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>

</head>

<body>

 <!--

   vm.$set 方法用于给数组和对象添加项和属性的（vue可以监听，响应式的数据）

       vm.$set( target, propertyName/index, value )

       target:{Object | Array}

       propertyName/index:{string | number}

       value:{any}

     在实例中使用：this.$set(arr,index,item)

           注：1.数组中已存在的下标，那我们添加的时候相当于替换当前项

             2.数组中不存在的下标，那我们添加的时候相当于新添加

           this.$set(obj,key,value)

           注：1.对象中已存在的属性，那我们添加的时候相当于替换当前属性值

             2.对象中不存在的属性，那我们添加的时候相当于新添加

           

       注：无论是对象还是数组，只要存在的添加就是替换，不存在的就是新增

   vm.$refs  对象  vue中用来获取dom节点方法

         使用  <div ref="div1">12321</div>

             获取： this.$refs.div1

         注：1.只要标签带有ref属性就会添加到该对象中

           2.如果不是在v-for当中使用，元素上ref的名字相同，后面会覆盖前

面的属性

             <div ref="div2">ttyyyy</div>

             <div ref="div2">12345789</div>

             获取： this.$refs.div2 只能获取最后一个元素（div的内容

为12345789的元素）

           3.在v-for中去使用，我们必须等我们的循环完成之后我们才能获取

到，否则获取不到

   vm.$nextTick( [callback] )

         参数：{Function} [callback]

         用法：

          将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，

然后等待 DOM 更新。

        它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用

它的实例上。

             this.$nextTick(function(){

               console.log(this.$refs)

               console.log(this.$refs.p)//这样就可以拿到循环元

素

             })

  -->

 <div id="app">

   

   <ul>

     <li v-for="item in arr" ref="p" :key="item.text">{{item.text}}

</li>

   </ul>

   <h1>name:{{obj.name}}---age:{{obj.age}}---sex:{{obj.sex}}</h1>

   <div ref="div1">ttyyyy</div>

   <div ref="div2">12345789</div>

   

 </div>

 <script src="./vue.js"></script>

 <script>

   var arr=[

         {text:'家人'},

         {text:'朋友'},

         {text:'同学'}

       ]

   var vm = new Vue({

     el:'#app',

     data:{

       items:[1,2,3,4],

       obj:{name:'Lucy'},

       arr:[]

     },

     mounted () {

      this.arr = arr

     //  this.arr.push({text:'Jack'})

     //  this.$set(this.arr,1,{text:'Lucy'})

     //  this.arr[1] = {'text':'maLi'}//非响应数据

     //  this.arr[4] = {'text':'CC'}//非响应数据

     //  console.log(this.arr)

     //  console.log(this.obj)

     //  this.obj['age'] = 18//非响应式的数据

     //  this.obj.age = 18//非响应式的数据

     //  this.$set(this.obj,'sex','girl')

     //  this.$set(this.obj,'sex','boy')

     

      console.log(this.$refs)

      this.$nextTick(function(){

        console.log(this.$refs)

        console.log(this.$refs.p)

      })

     }      

   })

 </script>

</body>

</html>

4.watch监听

<!DOCTYPE html>

<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>

</head>

<body>

 <!--

   watch：

       watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大

部分情况下我们都会使用computed，

     但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选

择。watch为一个对象，键是需要

     观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

     { [key: string]: string | Function | Object | Array }

c:{

          handler:function(newVal,oldVal){//监听对象的时候，两个形参

的值都是改变后的值

           console.log(newVal,oldVal)

          },

          deep:true, //深度监听监听对象的时候我们必须给deep属性

          immediate: true //页面一加载监听函数立即执行一次

        },

   1.watch、computed和methods的区别

     1.methods,watch和computed都是以函数为基础的，但各自却都不同；

     2.computed有缓存，而methods,watch没有缓存

     3.computed和watch方面，一个是计算，一个是观察。而methods只是函数的调用。

   2.使用场景

     1.watch擅长处理的场景：一个数据影响多个数据或异步操作的时候使用

     2.computed擅长处理的场景：一个数据受多个数据影响

     3.methods擅长处理的场景：通常的事件调用

   var obj = {

     "张三":{name:'张三',age:18,sex:"男",phoneNumber:'18710116688'},

     "李四":{name:'李四',age:18,sex:"男",phoneNumber:'18710118866'},

     "花花":{name:'花花',age:18,sex:"女",phoneNumber:'18710118888'},

     "小强":{name:'小强',age:18,sex:"男",phoneNumber:'18710116666'},

     "小刚":{name:'小刚',age:18,sex:"男",phoneNumber:'18710118668'}

   }

  -->

  <div id="vm">

    <!-- <h1>{{a}}</h1>

    <button @click="a++">改变a的值</button>

    <h1>{{b}}</h1>

    <button @click="b++">改变b的值</button>

    <h1>{{c.a}}</h1>

    <button @click="c.a++">改变b的值</button>

    <h1>{{c.b}}</h1>

5.delete和root

    <button @click="c.b++">改变b的值</button> -->

    <input type="text" v-model="val">

    <h1>{{a}}</h1>

  </div>

  <script src="./vue.js"></script>

  <script>

    var vm = new Vue({

      el:'#vm',

      data:{

       a:0,

       b:1,

       c:{a:1,b:2},

       val:''

      },

      methods: {

        change(){

          this.a++

        }

      },

      watch: {

        a:function(){//监听a的变化

          console.log(11)

        },

        b(newVal,oldVal){//形参newVal:改变后的值形参oldVal：改变前的值

         console.log('newVal:'+newVal,'oldVal:'+oldVal)

        },

        'c.a':function(){//监听对象中某一个属性的变化

         console.log('c对象的属性a改变了')

        },

        c:{

          handler:function(newVal,oldVal){//监听对象的时候，两个形参

的值都是改变后的值

           console.log(newVal,oldVal)

          },

          deep:true, //深度监听监听对象的时候我们必须给deep属性

          immediate: true //页面一加载监听函数立即执行一次

        },

        val(newVal,oldVal){

          this.a = newVal.length

        }

      }

    })

  </script>

</body>

</html>

<!DOCTYPE html>

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <!--

剩余155页未读，继续阅读

祺祺祺有此理

粉丝: 3679
资源: 2

"Vue.js详细总结：MVVM框架、SPA、组件化"

State of Vue.js report 2017 by Monterail Vue行业报告

vue.pdf

vue学习总结

vue知识点.pdf

面试宝典 v2-新增vue和react.pdf

vue八股文 pdf

js、vue-pdf实现展示pdf

vue文件上传查看pdf

vue文件上传pdf

使用vue-pdf-embed实现在线预览文档

springboot3+vue3项目实战pdf

springboot+vue实现pdf预览

vue-pdf放在本地

vue预览本地盘的pdf文件

vue-pdf-sign的使用

python+django+vue后台管理系统 pdf

vue3实现PDF上传和预览pdfjs-dist

vue-pdf跨域怎么解决

vue-pdf预览发票文字不显示

vue+spring boot前后端分离开发实战 pdf

最新资源