动态样式的绑定与响应式原理

算法解题： 1需求是什么 2理解方案 3 总结

复习总结：一个思想 七组指令 一个作业

动态样式

作用：使用声明式变量来控制class、style的值。

语法基础：:class :style

• 字符串拼接语法:class=‘由css类名字符串拼接而成’

• 数组语法 :class=’’[表达式1，表达式2，…]"表达式要返回一个已经定义过的类名

• 对象语 :class=’{“cs类名1:布尔值 ，“css类名2”：“布尔值”，…}'对象语法中key名的返回是有效的css类名，value是布尔值。

动态style样式

• 字符串拼接语法
• 数组语法 :style= ‘’[{key:‘value’},{key:‘value’}]'
• 对象语法 :style=’’{key:value,key:value}’'

表单绑定

如何理解v-model？

v-modle是一种语法糖

• 对于普通文本来说，v-model=v-bind:value +v-on:input
• 对于单选按钮组，复选框来说，v-model=v-bind:checked + v-on:change
• 对于下拉框来说， v-model = v-bind:value +v-on:change

    <div id="app">
        姓名：<input type="text" v-model='name'>
        幸运色: <input type="color" v-model='col'>
        座右铭：<input type="textarea" cols='10' rows='3' v-model.trim.lazy="info">
        <br>
        <select v-model='stu'>
            <option value=''>请选择</option>
            <option v-for="item in levelArr" :value="item.value" v-text="item.lable"></option>
        </select>
        <br>
        <span v-for='item in genderArr'>
            <input type="radio" v-model='gender' :value='item.value'>
            <span v-text='item.label'></span>
        </span>
        <br>
        爱好：<span v-for='item in favArr'>
            <input type="checkbox" :value='item.value' v-model='fav'>
            <span v-text='item.label'></span>
        </span>


       //不用v-model实现
        <!-- 文本框类 -->
        <br>
        价格<input type="text" :value='price' @input='price=$event.target.value'>

        <br>
        <hr>
        <!-- 按钮组复选框类 -->
        <!-- 单选框 -->
        请选择支付：<span v-for='item in payArr'>
            <input type="radio" :value='item.value' :checked='item.value==pay' @change='pay=$event.target.value'>
            <span v-text='item.label'>

            </span>

        </span>
        <!-- 复选框 -->
        <br>
        工作<span v-for='item in jobArr'>
            <input type="checkbox"
                :value='item.value'
                :checked='job.includes(item.value)'
                @change='($event.target.checked?job.push($event.target.value):job=job.filter(ele=>ele!==$event.target.value))'
            >
            <span v-text="item.label"></span>

        </span>
        <br>
        <!-- 下拉框 -->
        <select :value='fruit' @change='fruit=$event.target.value'>
            <option value="">请选择</option>
            <option 
             v-for='item in fruitArr'
            :value="item.value"
            v-text='item.label'
            ></option>
        </select>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                name: "老廖",
                col: '#000000',
                info: '',
                levelArr: [
                    { id: 1, value: 'shuoshi', lable: '硕士' },
                    { id: 2, value: 'benke', lable: '本科' },
                    { id: 3, value: 'gaozhong', lable: '高中' },
                    { id: 4, value: 'dazhuan', lable: '大专' },
                ],
                stu: '',
                genderArr: [
                    { id: 1, value: 'man', label: '男' },
                    { id: 2, value: 'woman', label: '女' },
                    { id: 3, value: 'not', label: '保密' }
                ],
                gender: 'man',
                favArr: [
                    { id: 1, value: 'basketball', label: '篮球' },
                    { id: 2, value: 'football', label: '足球' },
                    { id: 3, value: 'book', label: '读书' },
                    { id: 4, value: 'coding', label: '编程' },
                    { id: 5, value: 'running', label: '跑步' }
                ],
                fav: [],
                price: '',
                payArr: [
                    { id: 1, value: 'wechat', label: '微信支付' },
                    { id: 2, value: 'alipay', label: '支付宝支付' }
                ],
                pay: 'wechat',
                jobArr: [
                    { id: 1, value: 'vue', label: 'Vue开发' },
                    { id: 2, value: 'react', label: 'React开发' },
                    { id: 3, value: 'rn', label: 'RN开发' },
                    { id: 4, value: 'app', label: '混合开发' }
                ],
                job: [],
                fruitArr:[
                    {id:1,value:'apple',label:'苹果'},
                    {id:2,value:'orange',label:'橘子'},
                    {id:3,value:'banana',label:'香蕉'}
                ],
                fruit:'',
            },
            methods: {

            }
        })
    </script>

响应式原理

响应式是当vue可以监听一个变量的变化，当变量发生变化时，vue可以做一些工作

响应式原理

• 意思是vue是如何监听data选项上变量的变化的

• vue2中，使用Object.defineProperty来实现响应式的

• 使用 Object.defineProperty( )给对象添加属性的同时，可以为属性添加getter/setter的钩子。

• 当数组实例化时，对data选项上的数据进行劫持

  const data={
       count:1,
       name:'xiaowang'
  }
  const app={}
  Object.keys(data).forEach(ele=>{
     Object.defineProperty(app,ele,{
     get(){
      return data[ele]
  },
     set(newVal){
      return data[ele]=newVal 
  }
     })
  })
  

双向绑定是指vue表单的v-model

两个动态绑定：一个动态绑定class 一个动态绑定style

表单中v-model如何使用与v-model在表单中是如何实现的：

响应式原理：Object.definePropty实现的