zoukankan      html  css  js  c++  java
  • Vue-简介

    Vue简介

    过去用原生JS开发,但兼容性出现问题,出现了JQuery,但JQuery没有对数据、业务逻辑进行抽离分层,使得项目维护,管理成本越来越高。所以有了框架的出现,维护项目更加方便。

    Vue-轻量级MVVM 框架

    基于MVVM模式实现的一套框架

    V:View表示视图:人眼可读性强的数据

    M:Model表示模型:机器可读性强的数据

    VM表示视图模型对象:将人眼可读性强的数据,转化为机器可读性强的数据;将机器可读性强的数据转化为人眼可读性强的数据。

    1.初步了解Vuejs框架

    2.介绍Vuejs开发环境的搭建和脚手架工具的使用

    3.Vue.js具体的指令和项目实践 

    Vue是一个构建数据驱动的web界面的库

    Vue.js是什么:一套构建用户界面的渐进式框架

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件。与angular.js类似的是声明式开发,但性能高于angular,体积又小很多.

    vue包含一系列的扩展插件:

        * vue-router

        * vue-resource

        * vue-cli

        * vuex

    学习Vue

    1). Vue.js官网:

        http://cn.vuejs.org/

      2). 尤雨溪知乎主页

        https://www.zhihu.com/people/evanyou/answers

      3). vue的github主页

        https://github.com/vuejs

      4). 掘金专题:

        http://gold.xitu.io/tag/Vue.js

      5). 安装Chrome插件:

        Vue.js devtools

      6). 安装Webstorm提示插件:

        settings ==> plugin ==> browser repositories ==> 搜索vue.js ==>下载并重启

    基本语法

    * 数据绑定语法

    * 计算属性

    * class和style绑定

    * 条件渲染

    * 列表渲染

    * 方法与事件处理器

    * 表单控件绑定

    * 过渡

    * 生命周期

    Vue组件化、工程化

    使用vue-cli :理解脚手架,使用Vue脚手架

    Vue-插件:vue-ressource vue-router

     

    页面指令

    * v-text/v-html: 指定标签体

        * v-text : 当作纯文本

    * v-html : 将value作为html标签来解析

    * v-if v-else v-show

    * v-if : 如果vlaue为true, 当前标签会输出在页面中

    * v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中

    * v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none

    * v-for : 遍历

    * 遍历数组 : v-for="person in persons"   $index

    * 遍历对象 : v-for="value in person"   $key

    * v-on : 绑定事件监听

    * v-on:事件名, 可以缩写为: @事件名

    * 监视具体的按键: @keyup.keyCode   @keyup.enter

    * 阻止事件的冒泡和事件默认行为: @click.stop   @click.prevent

    * 隐含对象: $event

    * v-bind : 强制绑定解析表达式  

    * 很多属性值是不支持表达式的, 就可以使用v-bind

    * 可以缩写为:  :id='name'

    * :class

      * :class="a"

    * :class="{classA : isA, classB : isB}"

    * :class="[classA, classB]"

    * :style

    :style="{color : color}"

    * v-model

    * 双向数据绑定

    * v-el : 标识某个标签

    * v-el:xxx

    * 读取得到标签对象: this.$els.xxx

  • 相关阅读:
    Clang AST到IR的转换
    Clang教程之实现源源变化(4)
    Clang AST介绍
    Clang教程之实现源源变化(3)
    Clang教程之实现源源变化(2)
    JavaScript函数constructor的作用,意义
    如何用正确的姿势编写jQuery插件
    半成品博客皮肤(不知有没有继续下去的必要)
    【解决方法】ModuleNotFoundError: No module named 'flask._compat'
    【课程章节更新】微信小程序 getUserProfile 新接口使用
  • 原文地址:https://www.cnblogs.com/StevenHuSir/p/Vue_Brief.html
Copyright © 2011-2022 走看看