Vue.js双向绑定的实现原理

MVC和MVVM模式

MVC和MVVM的关系图解

最简单的Vue应用

image.png

v-cloak

v-bind 、v-on、v-model

属性绑定 v-bind: <div v-bind:title="dataTitle"></div>
简写为“:”<div :title="dataTitle"></div>
“dataTitle”引号内是JS表达式，“‘xxx’+dataTitle”
双向数据绑定 v-model="dataCont"

• v-on（事件）的缩写是@
• v-bind（绑定属性）的缩写是：
  v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定
• 加冒号的，说明后面的是一个变量或者表达式，没加冒号的后面就是对应的字符串字面量
• v-model（数据双向绑定）
  注意： v-model 只能运用在 表单元素中

事件修饰符

     <!--使用  .stop  阻止冒泡 -->
     <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div>

     <!--使用 .prevent 阻止默认行为 -->
     <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

     <!--使用  .capture 实现捕获触发事件的机制 -->
     <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>

     <!--使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
     <div class="inner" @click.self="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div>

    <!-- 使用 .once 只触发一次事件处理函数 -->
     <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>


    <!-- 演示： .stop 和 .self 的区别 -->
     <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div>

    <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 -->
     <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div>

• 计算属性，计算data内属性

computed:{
    fullName : function(){
             xxxxxxxx
              return something ;
        }
 }

• 侦听器，监测某一数据或计算属性发生变化时执行function
  watch:{}

v-if 、v-show 、v-for

v-if 控制dom存在与否
v-show 控制dom显示与否
v-for 控制一组数据，循环显示
<li v-for="(item , index) of list" :key="index">{{item}}<li>
加 key 值提升渲染效率，渲染性能
key 值要求唯一性

1: v-if和v-show的不同之处，就是v-show只是将dom元素用了display隐藏显示起来了，
而v-if则是通过判定是佛满足属性需求确定挂不挂在dom元素，性能上v-show是比v-if高的，
但是v-if有v-else-if和v-else可以用，可用性高些；
2:关乎于input中的例子，当元素改变时候，vue会尝试去复用已经存在的dom,
而这样就可能会导致一些小bug,比如一个文本框的值在另一个还是会被复用
，这时候就加上一个key值，问题就能解决。由此后续需要深入理解vue中的虚拟dom机制。
v-for循环的是使用其的DOM元素对象本身，注意使用v-for的位置

组件可以分为全局组件和局部组件

• 全局组件定义之后可以在模板里的任何地方调用

• 局部组件需要通过components在实例里进行注册才能使用，vue模板里的属性使用必须要通过props来接收

  
  image.png

  /* 第二部分 组件化 */
     /*
    父组件的数据通过 props :[] 来向子组件传递，每一次list里的item通过v-bind 向子组件传递，
        子组件通过props 接收。
    template 模板里要用插值表达式{{}} 会替换掉组件的内容
    局部组件需要注册
   */
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="submit">提交</button>
        <ul>
            <todo-item  :content = "item"
                        v-for="item in list">
            </todo-item>
        </ul>
    </div>

    <script>
         /*全局组件*/
    /*    Vue.component("todo-item",{
            props:['content'],
           template: "<li> {{content}}</li>"
        });*/

        var TodoItem ={
            props:['content'],
            template: "<li> {{content}}</li>"
        };
        var app = new Vue({
            el:"#app",
            data:{
                inputValue:"",
                list : []
            },
            components:{
                TodoItem:TodoItem
            },
            methods:{
                submit:function () {
                        this.list.push(this.inputValue);
                        this.inputValue="";
                }
            }

        })

    </script>

创建组件的方式

切换组件

1. v-if和v-else
2. :is属性切换