vue入门第一课

## Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API
  
1.MVVM模型
  使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
  * 定义View
  * 定义Model
  * 创建一个Vue实例或"ViewModel"，它用于连接View和Model。
  ====
   
       
       

            {{ message }}
       

   
   
   
  ====
 
2.双向数据绑定:
  v-model：实现表单输入和应用状态之间的双向绑定
  ====
 
 

   

{{ message }}

   
 

  ====
  将message绑定到文本框，当更改文本框的值时，

{{ message }}

中的内容也会被更新。
  顺序是input和Model对象属性message绑定，

{{message}}

和Model对象属性message绑定。
  
3.vue指令是什么呢？(通过指令实现双向数据绑定)
  vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性(attribute)。
  * 每个Vue实例都会代理其选项对象里的data属性。 
  *   
  * v-if指令:
    v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if="expression"，expression是一个返回bool值的表达式。
====

       

           

Hello, Vue.js!

           

Yes!

           

No!

           

Age: {{ age }}

           

Name: {{ name }}

       

   
   
   
    ====
    数据的yes属性为true，所以"Yes!"会被输出；
    数据的no属性为false，所以"No!"不会被输出；
    运算式age >= 25返回true，所以"Age: 28"会被输出；
    运算式name.indexOf('jack') >= 0返回false，所以"Name: keepfool"不会被输出。
  
  * v-show指令：
    v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style的display属性。
  
  * v-else指令：
    可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
   
  * v-for指令：
    v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"
    items是一个数组，item是当前被遍历的数组元素。


  * v-bind指令：缩写是：号
    v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class。
    语法：v-bind:argument="expression"
  
  * v-on指令：缩写是@
    v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：
    语法：


4.小demo跑起来：
  ====
 
   

       

               

                    Create New Person
               

               

                    Name:
                   
               

               

                    Age:
                   
               

               

                    Sex:
                   
                    Male
                    Female
               
               

               

                   
                    Create
               

       

       
           
               
                   
                   
                   
                   
               
           
           
               
                   
                   
                   
                   
               
           
       

Name	Age	Sex	Delete
{{ person.name }}	{{ person.age }}	{{ person.sex }}	Delete

       

   
   
   
    ====


5.组件系统是什么？ 所有的 Vue.js 组件其实都是被扩展的 Vue 实例 ***********重要视角**********************
  组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作被扩展的 Vue 实例
    |
  * Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。
    第一步：调用Vue.extend()方法创建组件构造器
    第二步：调用Vue.component()方法注册组件(全局组件)
    第三步：在Vue实例的作用范围内使用组件
    ====
   
       

           
           
       

   
   
   
    |
  * 全局注册和局部注册:
    调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任意Vue示例下使用。如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。
    ====
   
    ====
    |
  * 父组件和子组件: 
    我们可以在组件中定义并使用其他组件
    ====
   
       

           
           
       

   
   
   
    ====
    Child组件是在Parent组件中注册的，它只能在Parent组件中使用，确切地说：子组件只能在父组件的template中使用。

  小结：介绍了组件从创建到使用的步骤，并介绍了几种不同的方式去创建和注册组件；然后介绍了组件的props选项，它用于将父组件的数据传递给子组件。

8.深入分析vue项目：
1.每个 Vue.js 应用都是通过构造函数创建一个 Vue 的根实例启动
  ====
  new Vue({}); 这是构造实例的过程。传入参数：传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项


2.所有的 Vue.js 组件其实都是被扩展的 Vue 实例


3.vue实例的属性与方法：
  * 每个 Vue 实例都会代理其 data 对象里所有的属性
  * 注意只有这些被代理的属性是响应的
  * 除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。


4.初始化过程。
  * 例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 
  * 也有一些其它的钩子，在实例生命周期的不同阶段调用，如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例
  * 


  * vue实例创建后，data和event已经初始化完成；
    创建后，检测el和template，若存在el，编译自定义模板或者el的自有模板；
    将创建的vm.$el去替换原网页中的el(dom对象)；此时已经挂载成功。


5.模板语法 
  * 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。
  * 结合【响应系统】，在【应用状态改变】时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。


  * 模板上的【计算】和【css改变】的解决方法


6.组件：
  * 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。


  * 注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。


  * 父子组件之间的访问：
    父组件访问子组件：使用$children或$refs
    子组件访问父组件：使用$parent
    子组件访问根组件：使用$root


  * 非父子组件通信：
    应该考虑使用专门的 状态管理模式.


  * 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板；
    使用特殊的 元素作为原始内容的插槽