zoukankan      html  css  js  c++  java
  • vue2.0框架认识

    虚拟dom和声明式渲染:

    Vue的编译器在编译模板之后,会把这些模板编译成一个渲染函数 。而函数被调用的时候就会渲染并且返回一个 虚拟DOM的树 。
    这个树非常轻量,它的职责就是描述当前界面所应处的状态。当我们 有了这个虚拟的树之后,再交给一个patch函数,负责把这些虚拟DOM真正施加到真实的DOM上 。
    在这个过程中,Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中,侦测到的数据来源之后,之后就可以精确感知数据源的变动。
    到时候就可以根据需要重新进行渲染。当重新进行渲染之后,会生成一个新的树,将新树与旧树进行对比,就可以最终得出应施加到真实DOM上的改动。

    Vue是一个数据驱动页面的一个框架,基于MVVM模式,M指的是数据,V指得是视图,VM是视图模型,将数据绑定视图上。

    这个框架着重于VM部分,它以DOM元素为模版,提供数据绑定的功能。一个web app可能会含有多个vue组件。Vuex是基于vue的web app框架。

    核心思想都是一样,把UI结构映射到恰当的组件树 ↓↓↓↓↓↓↓↓↓↓↓↓↓

    父子通讯:
    在Vue中,父子组件之间的通信是通过 props 传递。
    .vue文件??
    Vue的组件引入构建工具之后有一个 单文件组件概念 ,如
    在同一个Vue文件里,可以同时写 template, script 和 style,三个东西放在一个里面。
    同时,Vue的单文件组件和 Web Components 有一个本质不同,它是基于构建工具实现。
    这样的好处是有了一个构建的机会,可以对这些单文件组件做更多的分析处,在每一个语言块里可以单独使用不同的处理器

    这三个东西是一个单向数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,会使State产生变化,从而导致 View 重新渲染。

    state--->view---->Action(再回到state去)

    css引入时:scoped

    优势:不同的页面即使相同的层级、相同的class或者id都不会互相影响。

    2、css使用 style的动态样式表

    使用vue的过程中,发现使用的不是平时开发用的 style后缀的文件,而是类似于less/sass 的动态样式。

    优势:动态的样式表,层级更加精确、减少了几乎所有的层级冗余代码、可以设置样式变量这样会减少很多的样式不统一的错误,以及减少代码量等,这样大大加快了样式的开发速度。

    vuc-cli

    npm run dev

    npm run dev:热重载,在项目脚手架搭建完成之后,运行这个命令行,会开启代码做了修改之后,一旦ctrl+s,或者焦点离开IDE,就会局部刷新页面。

    但是美中不足的是,动态的数据发生变化后,页面DOM是没有刷新的,只有手动刷新页面DOM数据才会发生变化。当然,在vue已经提供了强大的方便的前提下,这点小瑕疵是我完全可以接受的。

    严格模式

    语法检查可要可不要(建议开启代码规范前期初学者可关闭)

    作用域:

    通过el定义一个Vue视图的容器元素,可以传递css选择器,id选择,类选择器,元素名称选择器等等

    页面中有多个符合条件选择器,vue只会捕获第一个符合条件的选择器对应的元素选择器

    data:数据绑定实现了将模型到视图模型的绑定

    总结起来:(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块化 (6) 组件化Vue

    项目骨架:static静态文件 src下 static这个文件夹下的文件(夹)会按照原本的结构放在网站根目录下,这样按默认打包后,就不会图片路径错误而无法显示

  • 相关阅读:
    Python常用函数
    MySQL常用操作
    Python与JAVA的异同
    token
    用户cookie和会话session、sessionID的关系
    Jenkins应用
    Python3 logging模块
    python 多线程threading模块
    引用的声明周期结束时,并不会调用析构函数,只有本体的声明周期结束时,才会调用析构函数
    行为像指针的类的对象每次作为参数传入函数或者传出函数时都要小心
  • 原文地址:https://www.cnblogs.com/lhl66/p/7860127.html
Copyright © 2011-2022 走看看