vue3学习笔记--1.

 一  关于vue对象的绑定和微信小程序的不同点.

在参加字节跳动的暑假训练营组队后,队伍决定用vue完成项目,于是便开始学习vue框架,以下是学习时的一些感想和笔记.

1.和微信小程序不同的是 vue在容器的属性里想要实现动态效果需要这样写:

 <div class="hello">hello,{{name}}
        <div :class="class1">?</div>
        <div v-bind:class="class1">?</div>
    </div>
    <script type="text/javaScript" src="../js/vue.js"></script>
    <script type="text/javaScript">
        Vue.config.productionTip=false
        const  x = new Vue({
            el:'.hello',
            data:{
                name:'李明',
                class1:'你好',
            },
        });
    </script>

而微信小程序可以直接查找变量名:

<view class="list">
  <view class="{{thing[index].str==nowThing ? 'item1':'item'}}" wx:for="{{thing}}" data-index="{{index}}" bindtap="thing">
    {{thing[index].str}}</view>
</view>

*:v-bind:为单向绑定,只能从js指向html,而v-model为双向绑定.但只能用于html中的表单元素元素.

2.一个实例化vue对象只能绑定一个HTML容器,一个HTML容器只能绑定一个vue对象,双方是一一对应关系.

3.vue实例绑定html的两种方法:

 const  x = new Vue({
            el:'.hello',
            data:{
                name:'李明',    
                class1:'你好',
            },
        });

 第二种:更加灵活,可添加其他函数或判断.

      const  x = new Vue({
           // el:'.hello',
            data:{
                name:'李明',    
                class1:'你好',
            },
        });
        setTimeout(() => {
            x.$mount(".hello")
        }, 1000);

4.data的两种写法:

1.

 data:{
                name:'李明',    
                class1:'你好',
            },

2.

  data(){
                return{
                    name:'李明',
                    class1:'你好'
                } 
            }

*:所有由vue管理的函数都不能写成=>函数,因为这样会将this所指从vue替换为Window. 

5.数据代理

Object.defineProperty方法,通过该方法来实现数据代理,通过一个对象代理来对另一个对象的属性来进行(读/写).

let number = 18
let person = {
  name: '张三',
  sex: '男',
}

Object.defineProperty(person, 'age', {
  // value:18,
  // enumerable:true,		// 控制属性是否可以枚举，默认值是false
  // writable:true,			// 控制属性是否可以被修改，默认值是false
  // configurable:true	// 控制属性是否可以被删除，默认值是false

  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  get() {
    console.log('有人读取age属性了')
    return number
  },

  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  set(value) {
    console.log('有人修改了age属性，且值是', value)
    number = value
  }

})
// console.log(Object.keys(person))
console.log(person)