您的位置:首页 > Web前端

前端学习第二弹

2020-07-14 06:30 197 查看

vue 初步学习

  • 语法基础准备
  • vue基础概念

    数据双向绑定

    Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。数据变化更新视图,视图变化更新数据。视图更新数据可通过事件监听实现,而视图如何根据数据变化更新自己就相对麻烦。其实这就需要应用面向对象中的发布者和订阅者模型,大概就是对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性变化了,就需要告诉订阅者。订阅者有很多个,我们需要有一个消息订阅器收集这些订阅者,然后在监听器Observer和订阅者之间进行统一管理的。

    Dom与Bom

    BOM包含windows(窗口)、navigator(浏览器)、screen(浏览器屏幕)、history(访问历史)、location(地址)等。JavaScript通过Bom对象访问,控制,修改浏览器。

    DOM就是把html里的各种数据当做对象处理的一种模型。比较常见的Dom事件流是:捕获,目标,冒泡。事件一开始从文档的根节点流向目标对象(捕获阶段),然后在目标对向上被触发(目标阶段),之后再回溯到文档的根节点(冒泡阶段)

    语法基础准备

    常用标签基础

    1. </head>头标签
    2. <body>定义文档主体
    3. </script>插入JavaScript脚本语句,或者通过src指向外部脚本文件 必需属性:type
    4. <meta>必需属性:meta-information content
    5. <title>定义文档标题
    6. <div>将文档分割,通常用id,class 标记
    7. <hr>在页面创建一条水平线,在视觉上分割
    8. <span> 标签被用来组合文档中的行内元素。
    9. <ol>与<ul> 有序与无序

    vue基础

    (有意思的小知识,vue-cli脚手架 人如其名就如同真的脚手架一样帮助我们管理开发程序)
    1.vue对象:
    var app=new Vue({}),建了一个vue的对象。
    其中包含:el(元素)将对象与某元素相绑定,data 存放数据。
    在data中直接改变定义数据会将数据传递给绑定元素,当然也可以在控制台直接修改。
    2.(截图过多,太零碎就不放了)
    v-model是vue定义的属性,在vue中叫“指令”,也可以自定义指令,v-model作用是把当前input中的值指到哪里,改变input的值,那么后面跟着的文字也会相应的改变。
    v-if是动态的向DOM树内添加或者删除DOM元素
    v-show是通过设置DOM元素的display样式属性控制显隐
    v-for专门用于迭代的指令
    v-bind指令用于绑定数据和元素属性的,格式:v-bind:属性名=“变量”,变量是定义在data中的示例,可以绑定链接、图片url,class都可以
    v-on指令用于绑定事件,例如点击事件。这个就比较重要了,事件发生后执行想要执行的程序。
    组件间通信,复合组件程序基础知识就不再赘述。

    路由模块

    建立起url和页面之间的映射关系

    SPA(单页程序)

    使用vue—router来构建
    1.解析地址栏
    完整的页面地址、路由地址
    2.根据路由地址 从路由词典中找到真正的要加载的页面
    3.发起ajax请求
    请求要加载的页面
    4.像指定的容器中 插入加载来的页面

    路由嵌套

    在一个路由中,path对应一个component,如果这个component需要根据
    不同的url再加载其他的component,称之为路由的嵌套

    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: