zoukankan      html  css  js  c++  java
  • 10 小程序-VUE第一面

    1.vue.js

            当前项目使用比较多,我们需要掌握vue基本开发功能,vue是渐进式的开发,意味着可以部分嵌入其中进行开发,也就是说一部分页面用老的jquery开发,新的用vue开发。

           vue全家桶指的是Core,vue,rooter,vuex,满足各种各样的需求

    高级功能:

    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术 vue-router
    • 状态管理
    • 虚拟dom

    学习vue的基础是html ,css,javaScript

    image

    1.1.小示例

    我们的代码做了什么事情:

    我们来阅读javaScript代码,会发现创建了一个vue对象

    创建vue对象的时候,传入了一些options:{}

    • {}中包含了el属性,该属性决定了这个vue对象挂载到哪个元素上,很明显我们挂载在id为app的元素上。
    • {}中包含了data属性,该属性通常存储一些数据,要么是我们直接定义,就像截图中,要么是来自网络或服务器加载的

    浏览器执行代码流程  执行10-13代码显示出对应的html

                                    执行16行代码创建vue示例,并对原html进行解析和修改

    同时我们当前代码可以做到响应式

    1.2开门小菜

        <script>
    function Person(name,age) {

    }
    function vuee({

    }) {

    }
    </script>
    </head>
    <body>
    <!--new vue 是因为vue里面有vue对象,类似于上面function Person一样,当然person也可以传参,但vue里面是对象,要注意-->
    <!-- 原先我们定义对象,可以用一个变量接收-->
    var app=new vue({

    })
    <!--但现在我们用let/const来接收 其中let在es6中定义变量 const在es6中定义常量-->
    要千万注意,var在js设计早期中是有缺陷的,它没有变量的作用域,在es6中进行修正
    改为let定义变量,或const定义常量
    </body>

    image

    总结 vue实例的属性1:el是告诉vue实例,帮助我管理谁;data是vue实例对象另外一个属性

    1.3 vue.js列表显示

    现在我们来展示一个复杂的数据,数据列表,比如我们从服务器请求过来一个列表,希望展示到html中,

    html代码中使用v-for执行,

    image

    完整代码,重点关注最下面的v-for代码 item in movies就是找声明movies中数据的作为item进行显示

    image

    1.4 计数器案例

    现在我们实现计数器案例,功能是加和减

    点击+ 计数器加1

    点击- 计数器减1

    这里,我们使用新的指令和属性

    methods:属性在vue中用于定义方法

    @click 用于监听某个元素的点击事件,且需要制定发生点击时,执行的方法,一般该执行的方法在methods中定义

    image

    1.5 Vue中的MVVM

         mode  view viewModel,最重要是viewModel环节,它是我们view与model之间的桥梁,viewModel(视图模型层)将data数据进行绑定和操作监听。

    • dom listeners
    • databindings

    1605239006(1)

    image

    image

    计数器中的mvvm:

        我们的计数器就有严格的mvvm思想

    view依然是我们dom

    model就是我们抽离出来的obj

    viewModel就是我们创建的vue对象实例

    如何工作的呢:首先viewmodel通过data Binding让obj中的数据实时在dom中显示,其次viewModel通过dom listener监听dom事件,并且通过methods的操作,改变obj中的数据,,有了vue的帮助完成vuemodel层的任务,在后续的开发中,我们可以专注数据的处理,以及dom层的编写工作了。

    调整代码:(将obj看成model),app看成viewModel,这里obj传给data,viewmodel操作counter直接出数据,是在proxy代理解析帮助下完成的。

    image

    2.vue的options选型

             刚刚我们创建vue实例时,传入了一个对象options(el ,data,methods),它还可以放很多东西。

    image

    目前掌握以下选型:

    • el:类型 string (字符串 如“#app”)或htmlElement(el:document.querySelector())  作用:决定之后vue实例管理哪个dom
    • data: 类型:object 或function 作用 (在组件中data必须是函数):vue实例对应的数据对象
    • methods:类型 {【key:string】:function}作用:定义属于vue的一些方法,可以在其他地方调研,也可以在指令中使用 sub:function(){}

    什么时候称之为方法methods:什么时候称之为函数function

    3.vue的生命周期

    dev 开发版本 tags 稳定版本

    debug 测试版本  release 发布版本

    生命周期有回调函数,告诉我们执行到哪里,也就是说new Vue()实际上内部很复杂,其中回调函数callhook()回调了created【created函数我们并未手动调用】,回调的目的是告诉我们走到哪一步了。image

    1605242725(1)

    image

    总结  new Vue对象中可以放入生命周期函数对象







  • 相关阅读:
    HDU 5521 Meeting
    HDU 5170 GTY's math problem
    HDU 5531 Rebuild
    HDU 5534 Partial Tree
    HDU 4101 Ali and Baba
    HDU 5522 Numbers
    HDU 5523 Game
    ZUFE OJ 2301 GW I (3)
    POJ 2398 Toy Storage
    POJ 2318 TOYS
  • 原文地址:https://www.cnblogs.com/rango0550/p/13967869.html
Copyright © 2011-2022 走看看