vue学习笔记1.阻止vue在启动时产生提示 2.el用于指定当前vue实例为那个容器服务用法有： el:docume

1.阻止vue在启动时产生提示

Vue.config.productionTip=false

2.el用于指定当前vue实例为那个容器服务

用法有：

el:document.getElementById('root')
el:'#root'
创建vue实例：v后，v.$mount('#root')挂载到root div上

3.data用于存储数据，供el指定的容器使用

两种写法：

对象式

data:{  
    text:'初识vue',
    name:'双向数据绑定',
    address:'https://www.baidu.com',
  },

函数式（推荐）

data(){  
        return {
          text:'初识vue',
          name:'双向数据绑定',
          address:'https://www.baidu.com',
        }},

推荐用函数式，这样可以避免重复引用，当使用对象式写data时，复用组件时，组件间就共用同一个data，修改其中一个就会影响其他组件的data

vue模板语法

1.插值语法

用于解析标签体内容

<div>{{xxx}}</div>

尽量不要使用v-html，易招致xss攻击，而使用插值语法时vue自动做了处理

2.指令语法

用于解析标签

<div v-bind:href="xxx"或:href="xxx">{{xxx}}</div>

数据绑定

1.单向数据绑定(v-bind)

2.双向数据绑定(v-model)

注：双向绑定一般用于表单类元素上，如:input,select；

v-model:value可简写为v-model,因为v-model默认收集value值

数据代理

通过一个对象代理对另一个对象中属性的操作

Object.defineProperty方法可追加属性（现在也可以使用es6新增的Proxy对象直接定义代理对象）

 Object.defineProperty(person,'age',{
    value:18,
     enumberable:true,//控制是否可以枚举，默认false
     writable:true,//控制是否可以修改，默认false
     configurable:true//控制是否可以删除，默认false
     get(){
        console.log('读取');//读取时调用，点击...调用
        return number;
      },
      set(value){       //修改时调用，value收到具体值
        console.log('修改',value);
        number=value    //修改number
      } 
})

事件的基本使用

事件绑定v-on:xxx或@xxx,eg:@click
事件回调配置在methods中，为使this指向vm或组件实例对象，不要用箭头函数
@click="demo($event)"可传参

常用事件修饰符，eg:@click.stop

1. prevent阻止默认事件

2. stop阻止事件冒泡

3. once事件只触发一次

键盘事件(系统修饰键:`ctrl`,`alt`,`shift`,`meta`)

@keyup.xxx.xxx，按下后释放触发，系统修饰键需配合其他键，eg:@keyup.ctrl.d

@keydown.xxx.xxx，按下触发事件(tap键必须配合keydown使用)

计算属性computed

原理：借助Object.defineProperty提供的getter和setter

get初次读取时和依赖的数据改变时会调用

相比于methods与computed内部有缓存机制

例如：

computed:{
      fullname:{
      get(){
        console.log('读取');
        return this.firstname+'-'+this.lastname;
      },
      set(value){
        console.log('修改',value);
        const arr=value.split('-')
        this.firstname=arr[0]   //如果计算属性要被修改必须写set去响应修改
        this.lastname=arr[1]    //且set中要引起计算时所依赖的数据改变
      } }   }

监视属性

 vm.$watch('firstname',{
    immediate:true,     //初识化时调用 handler
    handler(newValue,oldValue){     //当firstname改变时 handler被调用
    console.log(newValue,oldValue);}
  })

watch:{
      firstname:{
        immediate:true,//初识化时调用 handler
        handler(newValue,oldValue){//当firstname改变时 handler调用
          console.log(newValue,oldValue);
        }
      }
    }
 /*简写  *注意: 无法写deep:true和immediate:true*
          firstname(newValue,oldValue){
          console.log(newValue,oldValue); 
          }
*/

深度监视

1.vue中watch默认不监测对象内部值的改变（一层）

2.配置deep:true可以监测对象内部值的改变（多层）

computed和watch的区别

computed能完成的功能，watch都可以完成，computed有缓存机制，依赖的数据改变才计算，擅长处理多个数据影响一个数据的情况
watch可以进行异步操作，没有缓存，擅长处理一个数据影响多个数据的情况

两个重要原则：

所有被vue管理的函数，最好写成普通函数，这样this指向才是vm或组件实例对象
所有不被vue管理的函数（定时器setTimeout的回调函数，ajax的回调函数，promise的回调函数等），最好写成箭头函数，这样this指向才是vm或组件实例对象

vue学习笔记