【笔记】前端基础学习

基础用语介绍

cdn 内容分发网络

这是一种加速策略，能从离自己最近的服务器上获得加速资源。

使用vue采用网络引用，如果是单一的服务器，加入距离很远，就会导致请求很慢，所以vue.js在多个服务器上设置了‘分身’，在此基础上，可以从离自己最近的服务器上获取资源，这就是cdn

MVVM

Vue技术是MVVM开发模式的实现者

MVVM : model view viewmodel(连接视图和数据的中间件）
VM: viewmodel中内置了一个观察者，实现了双向数据的绑定

补充知识

1） event.target.value:
比如在响应函数里，可以指名使用 event （内置的参数对象）。该对象表示当前时间，可以通过 event.target.value 来获取当前时间对象的value的值
2）插值表达式
插值表达式不能写在html标签中，不能作为属性的值的一部分。例如这样的使用是错误的：

<body>
    <div id="app">
        <a href="{{link}}">百度</a>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            link:"http://baidu.com"
        }
    })
</script>

在这种情况中，使用v-bind

<body>
    <div id="app">
        <a v-bind:href="link">百度</a>
        <!-- 也可以写成<a :href="link">百度</a> -->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            link:"http://baidu.com"
        }
    })
</script>

Vue绑定事件

1.通过插值表达式

2.计算属性：computed

计算属性首先是属性，其次这个属性拥有计算的能力（这里的计算就是一个函数），他就是一个能将计算结果缓存起来的属性（将行为转化成了静态）
一些常用的函数，可以缓存起来，在调用的时候直接调用缓存的结果，以此来提高效率
注意： computed里面虽然存放的是函数，但在调用的时候computed里的东西是一个属性

3.watch 监控属性

通过watch里给属性绑定函数，当属性的值发生变化时，该函数会自动被调用。调用时可以接收两个参数，第一个参数是属性改变后的值，第二个参数是属性改变前的值

<body>
    <div id="app">
        {{title}}
        <input type="text" v-model="title">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            title:"hello vue"
        },
        watch:{
            title:function(newValue,oldValue){
                console.log(newValue+":"+oldValue);
            }
        }
    })
</script>

Vue改变样式

1.通过给html的class属性绑定vue中的属性值，得到样式的绑定

<style>
        .mydiv{
            width: 100px;
            height: 100px;
            background-color: grey;
        }
        .red{
            background-color: red;
        }
</style>
<body>
    <div id="app">
        <div :class="red:temp"></div>
        如果temp是true--><div class="red"></div>
        否则--><div class=""></div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            temp:true
        },
        
    })
</script>

2.加入computed

通过computed返回一个对象，对象里面放着对个键值对,效果同方法1

<style>
        .mydiv{
            width: 100px;
            height: 100px;
            background-color: grey;
        }
        .red{
            background-color: red;
        }
        .myWidth{
            width: 150px;
        }
</style>
<body>
    <div id="app">
        <div :class="myClassStyle" class="mydiv">
        </div>
        <button type="button"  @click="temp=!temp">点击</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            temp:true
        },
        computed:{
            myClassStyle:function(){
                return {
                    red: this.temp,
                    myWidth:this.temp
                }
            }
        }
        
    })
</script>

3.双向绑定体现

4.多个样式的操作

在html标签中使用多个样式的组合

<div :class="[mycolor,mw]" class="mydiv"></div>
//注意：不能这样写：<div :class="mycolor" :class="mw" class="mydiv"></div>
new Vue({
  el:"#app",
  data:{
    temp:false,
    mw:mywidth,
    mycolor:color
  }
})

5.通过style设置样式

在内嵌的css样式里指明style的值

<div class="mydiv" :style="{backgroundColor:color}"></div>
//注意：style引用了vue中的内容，因此**是一个键值对，所以需要大括号**，对象的键不能出现"background-color"，应改成"backgroundColor"

6.使用computed设置样式

7.设置style属性的多个样式

采用数组的形式

<div class="mydiv" :style="[myStyle,{height:myHeight*2+'px'}]"></div>
//这里的myStyle定义在computed里面

Vue的核心：虚拟DOM和diff算法

vue的高效核心，就是虚拟DOM和diff算法，vue不通过修改dom树来达到修改页面的效果，而是直接在页面上修改该元素，此时这个元素就是一个虚拟的dom。通过diff算法，计算出虚拟的dom修改后和修改前的区别，然后在虚拟dom的基础上进行修改，大大提升了效率。

Vue中的语句

1.分支语句

v-if

!!!

当temp的值为true时,div中的内容才会显示 `v-else` v-if的对立面 `v-else-if`就是在else里面再嵌套一个if ### 2.v-show 用法上和v-if时相同的,v-show="布尔值变量" 是true是就会显示内容但v-show仅改变样式,不会消失(display) 而v-if是直接让元素消失

3.template 模板标签的使用

在vue中可以使用该标签配合v-if实现多个元素一起出现一起消失,如:

<template v-if="temp">
  <div>hello</div>
  <p>world</p>
</temple>

4.循环语句

v-for

Vue对象操作

1.可以通过一个Vue对象操作另外一个Vue对象的属性和方法

格式: Vue对象名. 另一个对象的属性/方法

2.Vue实例属性

直接通过对象.的方式的调用的属性，是来自于data或computed的属性，但是vue中的el、data等等这些键也称为属性，这些属性就是vue对象的实例属性

1)实例属性ref的用法：相当于id

在vue里面常使用ref属性来代替id的使用，那么可以快速的调用ref的值来获得页面中的某个元素

<button type="button" ref="mybtn" @click="showVueObject">点击</button>
。。。
this.$refs.mtbtn1.innerHTML="hello";

2)mount的使用

实现了页面的元素和vue对象的动态绑定，之前都是通过el的方式来绑定

Vue的组件

可以将vue对象作为一个组件，反复使用
1.注册：（全局注册）
Vue。component("组件名，{vue对象})

2.使用组件：
在Vue绑定了的html元素中才能使用组件

3.作为组件的vue对象
1)特点1:
写法的区别。Vue。component("组件名",{vue对象}),这个vue对象和之前的vue对象的data实例属性的写法是存在区别的:

new Vue({
  data:{
    name:"xiaoming",age:19
  }  
})
------>
{
  data:function(){
    return{
      name:'xiaoming',age:19
    }
  }
}

2)特点2:
这种组件中template的写法:template里必须有且只有一个根元素
错误写法:

template:"<h1>{{title}}</h1><button type='button' @click=':btnfn'>点击</button>"

正确写法:

template:"<div><h1>{{title}}</h1><button type='button' @click=':btnfn'>点击</button></div>"

posted @ 2021-03-10 21:39 我不秃阅读(128) 评论(0) 收藏举报

刷新页面返回顶部

0111