Vue笔记

1._ / $ / # 这三种属性都是内部私有属性的一种标识，不希望外用

2.mustache 语法糖 {{ }}
几乎所有js类型都是支持的，除了null与undefine数据类型
挂载在window身上的全局属性我们都不能用，比如：console/alert
{{ }} 不写流程控制 for / if /while /do while
{{ }} 支持三元表达式，同样也支持运算符
短路原则也是支持的
vue的两个核心点
1.响应的数据变化
当数据发生变化----视图自动更新
2.组合的视图组件
UI页面映射为组件树
划分组件可维护、可复用、可测试

3.指令
指令的目的是做什么：操作DOM
解释：MVVM vm->v 数据驱动
所以：我们要直接操作数据，数据要想操作
v-html：转义输出，也就是可以解析xml数据
v-text：非转义输出，也就是无法解析xml类型数据
v-bind：将数据和属性进行单项数据绑定：将vue中数据赋值给属性值

<img v-bind:src = "src" />
  <div v-bind:class = "">
      
  </div>
  <div v-bind:style = "">
  </div>

      v-bind简写形式

    <img v-bind:src="src" alt="">
    <img :src="src" alt="">

• v-bind类名绑定

  • 对象形式用法

  <p :class = "{ bg: true,size: true }"></p>
             <p :class = "{ bg: true,size: false }"></p>
             <p :class = "{ [classA]: true,[classB]: true }"></p>
  

  • 数组形式用法

     <p :class = "[ 'size','bg' ]"></p>
             <p :class = "[ classA,classB ]"></p>
             <p :class = "[ classA,classB,5>3?'a':'b']">  </p>
  

1.列表渲染参数可以写三个，分别为 item key index
2.列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识

4.事件
v-on --》简写为 @
v-on-click–》@click

<div id="app">
    <button v-on:click = 'fn'> 点击 </button>
    <button @click = 'fn'> 点击 </button>
    <button @click = "eventHandler"> 事件对象 </button>
    <button @click = "argumentHandler( a,b,$event )"> 事件参数 </button>
  </div>

• js部分

<script>
  /* 
    事件： 
      事件对象： 事件对象记录了整个事件的信息
      事件参数
        形式参数: 定义函数/方法时的参数
        实际参数: 调用函数/方法时传入的参数
      
      注意： 当一个事件处理程序中有多个参数，其中一个参数是事件对象式，我们在调用这个方法时，要添加一个实际参数 $event 与之对应
  */
  new Vue({
    el: '#app',
    data: {
      a: 10,
      b: 20
    },
    methods: {
      // methods称之为方法 ，里面存储是事件处理程序
      fn () {
        alert('事件')
      },
      eventHandler ( e ) {
        console.log( e )
      },
      argumentHandler ( a,b,e ) {
        // 思考： 如果我想在这个方法中使用事件对象，咋整？
        console.log( e )
        console.log( a + b )
      }
    }
  })

• 还有一个特殊情况 事件冒泡

 <div id="app">
        <h3> 按键修饰符 </h3>
        <div class="big" @click.stop='bigHandler'>
            <div class="middle" @click.stop="middleHandler">
                <div class="small" @click.stop="smallHandler"></div>
            </div>
        </div>

        <h3> 键盘修饰符 </h3>
        <input type="text" @keyUp.13="getValue">
        <input type="text" @keyUp.enter="getValue">
    </div>

• 下面是js部分

<script>
    /* 
      Vue中对事件的功能的扩展
        * 修饰符 - 修饰事件
          * 按键修饰符
            - stop
            - self
            - once
            - ...
          * 键盘修饰符
        2. 自定义按键修饰符
        Vue.config.keyCodes.f1 = 112
      1. 先以一个案例的形式来讲述一下这个修饰符的好处
        - 事件冒泡
        - 回车弹出input的value
    */
    Vue.config.keyCodes.f1 = 112
    new Vue({
        el: '#app',

        methods: {
            bigHandler(e) {
                alert('big')
                    // e.stopPropagation()
            },
            middleHandler(e) {
                alert('middle')
                    // e.stopPropagation()
            },
            smallHandler(e) {
                alert('small')
                    // e.stopPropagation()
            },
            getValue(e) {
                // if ( e.keyCode === 13 ) {
                //   console.log('执行了')
                // }
                console.log('执行了')
            }
        }
    })

5. 条件渲染

 <h3> 条件渲染 - 单路分支 </h3>
        <p v-if="flag"> A </p>
<h3> 条件渲染 - 双路分支 </h3>
        <p v-if="flag"> A </p>
        <p v-else> B </p>


        <h3> 条件渲染 - 多路分支 </h3>
        <p v-if="type === '美食'"> 美食 </p>
        <p v-else-if=" type === '游戏' "> 游戏 </p>
        <p v-else> 睡觉 </p>

        <h3> 条件展示 </h3>

        <p v-show=" showFlag "> 条件展示 </p>

new Vue({
        el: '#app',
        data: {
            flag: true,
            type: '美食',
            showFlag: true
        }
    })