【无标题】

<template>
  <div class="app">
    <!-- vue框架的特点
    1.简洁》HTML模板+JSON数据
    2.数据驱动：自动追踪依赖的模板表达式和计算属性
    3.组件化：用解耦，可复用的组件来构造界面
    4.轻量：~24kb min+gzip 无依赖
    5.快速：精确有效的异步批量DOM更新
    6.模块友好：通过NPM或者BOWE安装 无缝融入工作流
      vue模板语法步骤
    1.创建一个新的VUE实例   let app = new Vue({})
    2。准备html在（vue的html中使用{undefined{}}来获取组件定义的data数据） <div id="sfsf">{{message}}</div>
    3.引用Vue.JS搭建好VUE环境 开始准备使用Vue
      el(element)代表要绑定HTML代码片段的根元素
      data定义该片段上绑定的数据

        数据的绑定
      一、数据绑定最常见的形式就是使用“Mustache” 语法（双大括号）的文本插值  <div>div id="sfsf">{{message}}</div>
          Mustache 标签将会代替为对应数据对象上的message属性的值  无论何时 绑定的数据对象上 message属性发生变化 插值出的内容都会更新
      二、JavaScript
          在vue模板中 提供了完全的JavaScript表达式支持   
          {{nuber +1}}     数值的运算支持
          {{ok ? yes : no }}   三元运算支持
          {{message.split('').revese().join('')}}     字符串方法操作 反转数组 支持
          注意：只能在模板中写入表达式，模板中不能写js语句 不然会报错

      三、 指令（Dierctives) 是带有v-前缀的特殊属性  指令的职责是 当表达式的值改变时 将其产生的连带影响 响应式的作用于DOM
        1.文本渲染
          1.1 v-text 在HTML中插入数据 跟undefined{{}}功能一致
                <h3>{{message}}</h3>                          v-text 是内容绑定渲染 不能绑定属性 是会覆盖原来标签的内容 不能解析标签
          1.2 v-once 数据智慧更新一次，下次更新就不会受影响dom 
                <span v-once>{{message}}</span>               {{message}} 是内容绑定渲染 不能绑定属性 不会覆盖原来标签内容 不能解析标签
          1.3 v-html 可以显示HTML元素
                <h3 v-html="message"></h3>                    v-html 是内容绑定渲染 不能绑定属性 会覆盖原来表情内容 可以解析标签
        2. class和style绑定
          2,1 v-bind指令可以绑定元素的属性 动态给属性复制 比如：v-bind:class  v-bind:style  v-bind:herf v-bing:id 形式
          2.2 格式 v-bind:属性名=“组件中定义的数据”
              简化为 :属性名=“组件中定义的数据”
                改写成 :class   :style   :href  :id等
                <div v-bind:title="message"></div>
                <div :title="message"></div>
                <img :src="url">
                <a :href="href"></a>
          2.3 class： 绑定dom 对象的class样式有一下几种方式
                      绑定多个class
                      使用对象classobject绑定
                      使用数组长classlist绑定
                      绑定的对象可以同时切换多个class
                      <div :class="{red:true,green:true,item:true}"></div>  绑定多个class 用对象形式
                      <div :class="classObj"></div>
                      <div :class="classList"></div>
          2.4 style绑定 
                      绑定形式与class一致
                      使用内联对象object
                      直接传入对象styleobject
                      使用数组对象stylelist
                      <div :style="{color:red,font-size:30px}"></div>
                      <div :style="styleobj"></div>
                      <div :style="[styleobj,styleobj2]"
        3.事件处理
          3.1监听事件
            语法： v-on：事件名
            简写：@事件名监听事件
          3.2 方法事件处理器   一般来说事件会绑定一个方法  在方法内部处理相关得事件逻辑 需要methods属性中定义方法然后v-on引用对应相关得方法名
          3.3 $event 对象事件处理函数中访问DOM原生事件 event对象 可以使用特殊变量$event对象传入
              如果绑定方法得时候 没有传入参数 那么系统默认自动传入了原生的事件对象e  如果绑定方法的时候传入了参数 而且还需要使用e 需要额外传传参数 $event（固定写法
              而且 这了的e  完全可以想js中一样  使用 event.target.tagname
          3.4 事件修饰符
                vue.js为v-on提供了事件修饰符 通过由点 . 表示的指令后缀来调节修饰符
                3.4.1 .stop  阻止event冒泡 等效于 event.stopPropagetion()
                3.4.2 .prevent  阻止event默认事件 默认浏览器行为 等效于 event.preventDefault()
                3.4.3 .capture  事件在捕获阶段触发
                3.4.4 .self  自身元素触发 而不是子元素触发
                3.4.5 .once  事件只触发一次
          3.5 键值修饰符
                在监听键盘事件是  我们经常需要检测常见的键值 vue 允许为v-on在监听键盘事件时添加关键修饰符
                .enter  .tab .delte（删除和退格键    .esc   .space  .ip  .down .left  .right
                <input v-on:keyup.enter="submit">

        4.条件渲染
          1.v-if 
            当条件返回true时 执行
          2 v-if
            当if条件不满足时 执行（要结合v-if一起使用
          3 v-else-if
            当满足条件时执行（要结合v-if一起使用
          4. v-show 
            满足条件时显示 不满隐藏
          5.v-if  和 v-show 的区别
            两者的区别时 v-if 时真正的条件渲染 只有true 时才会被渲染 v-if 也是惰性的 加入初始条件为false 那么条件变为true时才会发生第一次渲染
            v-show 只是css中的display 的属性的切换 不论初始条件是否成立 都会进行渲染
            一般来说v-if开销比较大 如果需要频繁切换 使用v-show 变化很少 就用v-if

        5. 列表渲染
          1.v-for
            可以把一组值进行列表渲染 语法形式
     -->
     <p :class="{red:true,green:false,item:true}">绑定多个class  用对象形式</p>
     <p :class="{reds}">绑定一个class 是否可以简写  无法简写  不是在绑定的时候给定真假  就是在data 数据中给定声明好真假</p>   
     <p :class="redds">不加大阔好可以吗    答案是不可以</p>  
     <p :class="classobj">这是class对象形式的绑定 证明 可以使用对象形式来绑定class 这里绑定的对象形式中 如果对象中的键所对的值是false 则不会有这个类型 故对象形式的绑定class 可以修改和删除</p>
     <p :class="classarr">这是class数组形式的绑定    而数组中的绑定的class 是不能增加和删除和修改的</p>
     <!-- 对于v-bind:class的总结    
                      对于：calss  的绑定 只能用对象的形式进行绑定  并且不能进行缩写 有键也必须的有值 通过值来判断真假 如果值不在标签中出现 就必须的在data中出现
                      除了可以单个的规定 class的绑定也可以 进行批量绑定  即通过 定义 声明一个对象或者数组 来实现批量绑定 这时候 在标签中绑定才可以省略大括号 直接传声明好的对象或者数组的名称
                      作为一个变量名传入 即直接用引号即可   声明对象 或者数组 进行批量绑定calss 也有区别  在声明的对象中 可以通过对象中的键的值的真假 来判断这个绑定的类型的真假
                      是否在html 中被打印出来 如果值时false 则这个类型取消   而声明数组形式进行批量绑定class的方式 没有真假之说  也就是说 通过声明对象绑定的class 可以修改 增加或者删除
                      而通过声明数组 批量绑定的class 没有删除增加和修改的功能
      -->
      <p :style="{color:'red',fontSize:'40px'}">style的绑定   内联对象的object</p>
      <p :style="styleobj">这声明对象形式 进行绑定style</p>
      <P :style="[stylearr,stylearr2]">这是声明数组形式 进行style绑定 因为数组只有元素 没有键和值 拿不到属性 和属性值所以不能单独用数组 需要用多个对象组成的数组 从而进行数组的绑定style</P>
      <!-- 对于v-bind:style 的总结
                      对于 ：style 的绑定 本质上和对于class的绑定是一样的 需要用对象的形式进行绑定  但是与class的绑定不一样的是 style 的绑定 在传入的对象中
                      所对应的值 必须要加上引号 因为对class 的绑定 所传入的对象中的值是简单的布尔类型  只有真假两种情况 所以不用加引号 而style 则不一样 传入的
                      对象中所对应的值 不是简单的布尔类型 而是各种情况 所以对于style 的绑定 所对应的值需要加引号 作为一个变量名来传递  对于style的绑定 不能使用简单
                      的数组进行绑定 因为简单的数组 只有一个值 没有所对应得值 所以得使用 由对象所组成得数组 来进行传递绑定
       -->
  </div>
</template>
<script>
export default {
  data () {
    return {
      redds:true,
      classobj:{
        black:true,
        green:true,
        pink:false
      },
      classarr:["red","blue"],
      styleobj:{
        color:'red',
        fontSize:'40px',
      },
      stylearr:{
        color:'green',
        fontFamily:'宋体'
      },
      stylearr2:{
        fontSize:'40px'
      }
    }
  }
}
</script>
<style scoped>

</style>