Vue01

Vue基础全面解析

最新推荐文章于 2025-11-30 17:18:45 发布

原创最新推荐文章于 2025-11-30 17:18:45 发布 · 1k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

vue

vue基础
vue-cli
vue-router
vuex
element-ui
vue3

vue基础

vue是什么

一套用于构建用户界面的渐进式JavaScript框架

采用组件化模式，提高diamagnetic复用率，让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率

去vue官网下载开发版本，然后在html文件中引入

// 这是在头部引入

细节：

root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
vue实例和容器时一一对应的
真实开发中只有一个Vue实例，并且会配合组件一起使用
{{xxx}} 中xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么模板中的数据也会改变

模板语法

插值语法
指令语法

插值语法，{{name}}

指令语法
我是一个链接

注：v-bind: -----> :(简写)
插值语法
- 功能：用于解析标签体内容
- 写法{{xxx}}
指令语法
- 功能：用于解析标签（标签属性，标签体内容，绑定事件）
- 有很多很多的指令语法（此处只是拿v-bind举例子）
  
  new Vue({
  el:“#root”,
  data:{
  name:‘jack’,
  school:{
  name:‘a’,
  url:‘xxxxx’,
  }
  }
  })
  
  //这里可以

数据绑定

<div id="root">
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>

</div>

v-bind:数据只能从date流向页面
v-model:
- 双向绑定一般应用在表单类元素上（input，select）
- v-model:value 可以简写成 v-model，因为v-model 默认收集的就是value值
  
  //简写后的代码
  
  单向数据绑定：
  双向数据绑定：

el于data的两种写法

<script type="text/javascript">
  Vue.config.productionTip = false
  const v = new Vue({
    el:"#root",
    data:{
        name:"好人"，
        url:'.......'
    }
 })
 console.log(v) //输出vue实例，在Console中可以看到
 v.$mount('#root')
</script>


//$符是给程序员用的
//这种方式写的更灵活

<script type="text/javascript">
  Vue.config.productionTip = false
  new Vue({
    el:"#root",
    data:function(){
        return{
            name:'好人'
        }
    }
})
</script>


//data的两种写法，对象式，函数式
//简写
data(){
        return{  name:'好人'
   }
}

总结：

el的两种写法
- new Vue时候配置el属性
- 先创建Vue实例，随后再通过v.$mount(‘root’)指定el的值
data的两种写法
- 对象式
- 函数时
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

MVVM模型

数据代理

Object.defineproperty

<script type="text/javascript">
    number = 18
    let person = {
        name:'xx',
        sex:'xxx',
    }
   Object.defineProperty(person,'age',{value:18,
 enumerable:true,
 writable:true,
 configurable:true,
 get:function(){
    return number
}
 set(value){
    console.log('有人修改了age属性，且值是，value')
    number = value
}
})
</script>


//enumerable是配置是否可以枚举，默认是不可以
//writable配置属性能不能修改，默认是不能
//configurable配置属性能不能删除，默认是不能
//当有人读取person的age值时，会先走getter
//可以简写为get(){...}
//当有人修改person的age值时，stter就会被调用，且会收到修改的具体值
//若要真正修改age属性，需要修改number的值

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = {x:100}
let obj2 = {y:200}


Object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    }
    set(value){
        obj.x = value
    }
})

在这里插入图片描述

右边的两条线用了数据代理，这里也解释了，为什么在界面里改了数据，但是源码里的数据没有改变

Vue中的数据代理：
- 通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处
- 更加方便的操作data中的数据
基本原理
- 通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在这两个函数内部去读/写data中对应的属性

事件处理

<body>
    <div id="root">
        <button v-on:click="showInfo">点我</button>
        <button @click="showInfo2($event,66)">点我</button>
    </div>
</body>


<script type="txt/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'好人'
        }
        methods:{
            showInfo(event){
                alter('hh')
            }
            showInfo2(event,number){
                alter('haha')
            }
        }
    })

</script>

事件的基本使用
- 使用v-on:xxx 或 @xxx绑定使劲按，其中xxx是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中的配置函数，不需要用箭头函数！否者this就不是vm
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例
- @click=“demo” 和 @click="demp($event)"效果是一致的，但后者可以传参

事件修饰符

事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件

事件捕获：由外向内

事件冒泡：由内向外

Vue中的事件修饰符
- prevent:阻止默认事件
- stop：阻止事件冒泡
- once：事件只触发一次
  
  <a href=“xxxx” @click.prevent=“showInfo”>点我

键盘事件

Vue提供常见的按键别名
- 回车 => enter
- 删除=> delete
- 退出=> esc
- 空格=> space
- 换行=> tab
- 上 => up
- 下 => down
- 左 => left
- 右 => right
  
  <input typr=“text” placeholder=“按下回车提示输入” @keyup.enter=“showInfo”>

注：ctrl,alt,shift,meta 特殊。配合keydown能正常使用，因为这是系统修饰键

注：修饰符可以连续写

计算属性

属性：在Vue里，默认data里的数据是属性

计算属性：通过对属性的操作获得一个全新的属性

<san>{{fullname}}</span>


....



new Vue({
    el:'#root',
    data:{
        firstname:'张',
        lastname:'三'
    },
    computed:{
        fullname:{
            get(){
                //这里的this是vm
                return this.firstname + '-' + this.lasname
            },
            set(value){
               const arr = value.split('-')
                this.firstname = arr[0]
                this.lastname = arr[1]
            }
        }
    }
})


//get调用的时机
//1，当人第一次读fullname时，get就会被调用
//2，所依赖的数据发生变化时，get会被调用

//set调用的时机
//1，当fullname被修改时

计算属性，相对于methods的优势是，有缓存机制。

计算属性：

定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter 和setter
get函数什么时候执行
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
优势：于methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
- 计算属性最终会出现在vm上，直接读取使用即可
- 如果计算属性要被修改，那么必须写set函数去相应修改，且set中哟啊硬气计算时依赖的数据发生改变

计算属性的简写 computed:{ fullname(){ … } } //这里的computed是vue的一个配置对象

监视属性

watch:{
    ishot:{
        immediate:true,//初始化时让handler调用一下
        handler(newValue,oldValue{
            //这里可以对新旧数据进行一个对比，然后进行后续的逻辑处理
        }
    }
}


vue实例创建好后

vm.$watch('ishot',{
  immediate:true,//初始化时让handler调用一下
        handler(newValue,oldValue{
            //这里可以对新旧数据进行一个对比，然后进行后续的逻辑处理
        }

})

监视属性
- 当被监视属性变化是，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视
- 监视的两种方法
  - new vue时传入watch配置
  - 通过vm.$watch监视

深度监视

监视多级结构中某个属性的变化
监视多级结构中所有的属性变化
深度监视
- Vue中的watch默认不监测对象内部值的改变（一层）
- 配置deep:true 可以监测对象内部值的改变（多层）
- Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
- 使用watch时根据数据的具体结构，决定是否采用深度监视

当配置项里只有handler时，可以简写 watch:{ isHot:{ immediate:true, deep:true, handler(newValue,oldValue){ console.log(“ishot被修改了”,newValue,oldValue) } } } //简写 watch:{ isHot(newValue,oldValue){ onsole.log(“ishot被修改了”,newValue,oldValue) } }

computed和watch之间的区别