1.2 vue模板语法

核心思想：数据驱动

1. 模板语法

    (1)插值

        a.文本 {{ }}

        b.纯HTML

             v-html 防止XSS(跨站脚本攻击，盗取cookie,伪装成用户)

        c.表达式

    (2)指令：是带有 v- 前缀的特殊属性

        v-bind         动态属性绑定

        v-if              条件（DOM元素是否输出）

        v-show       

        v-for           循环

        v-on:click   事件绑定

        v-model     双向数据绑定 （原理：es5的object.defineProperty的get/set拦截， 此方法不兼容ie8以下，所以vue不兼容ie8以下 ，Jquery2.0也不兼容ie8以下）

        

    (3)缩写

    

         v-bind:src =>  :src

        v-on:click => @click

//基本模板

   

        {{legionname}}   //声明式渲染

    

//（响应式渲染） 数据驱动

//响应式实现原理

    {{ legionname }}

    {{ myage }}

    {{　 10+20 　}}

    {{ isshow?'aaa':'bbb' }}

    

//v-html 指令

        解析html标签 相当于innerhtml

    

    

 // v-if 指令

        动态 创建、 删除

    

    

//v-show  指令

        动态 删除、 隐藏

    

      //v-bind 指令    对于属性绑定 v-bind:src  简写=> :src

    

    

    //v-on  指令  v-on:click  简写=>   @click

    

2、 Object.defineProperty的get,set拦截: （Vue数据更新原理、响应式原理）

获取是get方法，设置是set方法；

进行get\set拦截，实现响应式原理，改变数据就改变页面

低版本浏览器不支持 ，ie8以上使用

学习框架步骤