vue基础入门(第一节)【连载...】

                                                                       Vue基础入门(第一节)

--------------------------------------------------------------------------------------------------------------------------

一、概述

二、Vue基础语法

=============================================================

demo代码地址：https://github.com/darkcityX/vueDemo

--------------------------------------------------------------------------------------------------------------------------

一、VueJS概述

    1、what：vue是一个构建用户界面（ui）渐进式的js框架

    2、where：饿了么、滴滴...

    3、why：

            （1）中文文档支持

            （2）容易上手，学习曲线缓和

              (3）速度快

           （4）体积小

           （5）基于组件化的开发方式

           （6）代码的可读性好，可维护性比较好

           （7）极大的降低了耦合度（解耦：降低耦合度）

    4、how

        （1）、引入vue.js文件

        （2）、使用cli进行项目搭建

二、Vue基础语法

    1、双花括号

            interploation 插值表达式

            语法：<any>{{表达式}}</any>

                       将表达式执行的结果输出到当前调用双花括号的元素的innerHTML中

            练习：创建一个demo：将一个对象数组（学生：sex、age、score）、thead中有3列，分别是性别、年龄、成绩

    2、循环指令

            程序：顺序结构、选择结构、循环结构

            语法：  <any v-for="临时变量 in 集合"></any>

                         <any v-for="(临时变量,下标) in 集合"></any>   

            作用：（1）遍历集合   （2）在遍历的同时创建多个调用v-for的元素

            练习：使用v-for改写上面的练习

    3、选择指令

            语法：<any v-if="表达式"></any>

                   多重分支判断：

                                     <p v-if=""></p>

                                     <p v-else-if=""></p>

                                     <p v-else=""></p>

             作用：根据表达式执行结果的真假，来决定是否要将当前的元素挂载到DOM中

   4、事件绑定 

             语法：<any v-on:eventName="处理函数"></any>

                       给指定的标签绑定上当eventName事件触发时，要执行的处理函数

             eg:  <input type="text" v-on:change="handleChange" />

            练习：在试图中有一个列表，有一个按钮，当点击按钮时，向列表中插入一条100以内的随机数据；当列表的长度大于10的时候，别表自动从DOM中移除。

             编程方式发生了变化，从DOM驱动变成了数据驱动型的。

   5、属性绑定

             （1）基本用法： <any v-bind:属性名称="表达式"></any>

                      作用： 将表达式执行的结果的值绑定给属性

                       eg: new Vue({

                                  data:{

                                         myUrl : "www.baidu.com",

                                         imgUrl :  "img/1.jpg",

                                         imgName :  "1.jpg"

                                   }

                             });

                         <a v-bind:href="myUrl"></a>

                         <img v-bind:src="imgUrl" />

                         <img v-bind:src="'img/'+imgName" />

6、其它绑定

               （1）、双向数据绑定

                              方向1：将数据绑定到视图中，当数据发生变化，视图会自动的更新

                              方向2： 将表单元素中用户操作的结果绑定到一个变量上

                                          语法; v-model

               （2）、其它... ...（v-html/v-show）