• Hello world


    Vue.js :

    1,一套用于构建用户界面的渐进式 JavaScript 框架

    2,动态构建用户界面

    3,VUE的特点:

      ① 遵循 MVVM 模式

      ② 编码简洁、体积小、运行效率高,适合移动 / PC 端开发

      ③ 它本身只关注 UI,可以轻松引入 vue 插件 或 其他第三方库开发项目

    4,借鉴 angular 的模板和数据绑定技术,借鉴 react 的组件化和虚拟DOM技术

    5,vue 扩展插件

      ① vue-cli:vue 脚手架

      ② vue-resource(axios):ajax 请求

      ③ vue-router:路由

      ④ vuex:状态管理

      ⑤ vue-lazyload:图片懒加载

      ⑥ vue-scroller:页面滑动相关

      ⑦ miti-ui:基于 vue 的UI 组件库(移动端)

      ⑧ element-ui:基于 vue 的 UI 组件库(PC端)

    理解 Vue 的 MVVM

    声明式渲染:

    采用简洁的模板语法声明式的将数据渲染进DOM的系统。

    ① 文本插值,Hello World

    页面显示 Hello World !

    这个Vue应用被挂载到一个DOM元素上(#app),以文本插值的方式渲染 message

    ② 绑定元素 attribute

     除了文本差值,还可以用指令的方式绑定元素属性:

     v-bind attribute 被称为指令,指令带有前缀 v-,表示它们是 Vue 提供的特殊的 attribute,指令会在所渲染的DOM上应用特殊的响应式行为,这里该指令表示:将span元素的 title attr 和Vue实例的 message prop 保持一致。

    vue 实例

    ① 每个Vue应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

     vm(ViewModel的缩写)变量名 表示Vue实例。

    当创建一个Vue实例时,可以传入一个选项对象,使用这些选项来创建你想要的行为。

    选项列表:

      props,  propsData,  computed,methods,watch,

      选项/DOM(el,template,reader,renderError),

      选项/生命周期钩子(beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestory,destoryed,errorCaptured),

      选项/资源(directives,filters,components),

      选项/组合(parent,mixins,extends,provide/inject),

      选项/其他(name,delimiters,functional,model,inheritAttrs,comments)

    实例 property

      vm.$data          vm.$props      vm.$el

      vm.$options     vm.$parent     vm.$root

      vm.$children    vm.$slots        vm.$scopedSlots

      vm.$refs           vm.$isServer  vm.$attrs

      vm.$listeners

    实例方法/数据

    vm.$watch  vm.$set  vm.$delete  

    实例方法/事件

    vm.$on(event,callback)  vm.$once(event,callback)  

    vm.$off(event,callback)  vm.$emit(eventName,[.....args] )

    实例方法/生命周期

    vm.$mount([elementOrSelector])  vm.$forceUpdate()  

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

  • 相关阅读:
    通过POST请求上传文件
    接口测试及常用接口测试工具
    maven-surefire-plugin插件
    BDD框架之Cucumber研究
    一分钟认识:Cucumber框架
    ACM团队周赛题解(3)
    C++11新增容器以及元组
    ACM团队周赛题解(2)
    C++11部分特性
    ACM团队周赛题解(1)
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/13455446.html
Copyright © 2020-2023  润新知