VUE知识总结

• Vue概述

1、what    
    是一个渐进式的构建用户界面的js框架
2、where
    小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序
3、why
    1.方便阅读的中文文档
    2.容易上手 （学习曲线比较缓和）
    3.体积小
    4.基于组件化的开发方式
    5.代码的可读性、可维护性得到了提高
4、how
    工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能
 
    搭建环境：
    方式1
         全局安装 vue-cli
        $ npm install --global vue-cli
        # 创建一个基于 webpack 模板的新项目
        $ vue init webpack my-project
        # 安装依赖，走你
        $ cd my-project
        $ npm install
        $ npm run dev
    方式2:
        直接引入对应的js文件

Vue中基础知识

1、双花括号
    mustache(胡子)/interpolation（插值表达式）

    语法：
    <any>{{表达式}}</any>
    作用：
    将表达式执行的结果 输出当调用元素的innerHTML中；还可以将数据绑定到视图

    

2、指令-循环指令
    基本语法1：
    <any v-for="tmp in array"></any>
    基本语法2：
    <any v-for="(value,index) in array"></any>
    
    作用：
    在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签

3、指令-选择指令
    语法：
      <any v-if="表达式"></any>
      <any v-else-if="表达式"></any>
      <any v-else="表达式"></any>
    作用：
      根据表达式执行结果的真假，来决定是否要将当前的这个元素 挂载到DOM树


4、指令-事件绑定
    语法：
        <any v-on:eventName="handleEvent"></any>
    作用：
        给指定的元素 将handleEvent的方法绑定给指定eventName事件
    

5、指令-属性绑定
  基本语法：
    <any v-bind:myProp="表达式"></any>
    补充，支持简写：
    <any :myProp="表达式"></any>
  作用：
    将表达式执行的结果 绑定 到当前元素的myProp属性

    <img v-bind:src="'img/'+myImg" alt="">
   动态样式绑定
    <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

   动态样式类绑定
      <h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定
    方向1：数据绑定到视图
    方向2：将视图中（表单元素）用户操作的结果绑定到数据

    基本语法:
      <表单元素 v-model="变量">
      </表单元素>