vue学习笔记二：vue开发基础上

夜上夏叶

已于 2022-02-25 14:19:53 修改

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue.js

于 2021-09-24 21:40:44 首次发布

本文链接：https://blog.csdn.net/jinyeran/article/details/115109081

版权

vue 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

文章目录

一、vue实例

vue项目中，每个vue应用都是通过vue构造器创建新的vue实例开始。
1、创建vue实例

在这里插入图片描述

<script>
var vm=new Vue({
//选项
})
</script>

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例
通过对象（选项）定义多个属性；所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。
在这里插入图片描述

2、el唯一根标签
在这里插入图片描述

tips：vs code中，对HTML页面结构初始化方法为：先输入！然后按tab键。~~（这样就省事太多了）~~
操作步骤：

步骤：
1.引入vue.js
2.定义一个div
3.实例化vue
4.将数据显示到界面上
//下面是代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            {{name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',//el选项 通过el将VM与div绑定，接收的是字符串
            //通过el将vue实例与div进行绑定，绑定之后，vue就可以操作div及其子元素，并且数据也可以显示在div内部。
            data:{
                name:'vue实例绑定成功'//data数据
            }
        });
    </script>
</body>
</html>

此外，也可通过先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
在这里插入图片描述
3、data初始数据

vue实例创建后，可以通过vm.$data访问原始数据对象。
由于VM实例代理data对象上的所有属性，因此vm.name<=>vm.$data.name

//vue实例的时候定义根实例对象的data属性既可以是一个对象，也可以是一个函数
//但组件中定义data属性，只能是一个函数
//因为vue组件可能会有很多个实例，采用函数返回一个全新data形式，使每个实例对象的数据不会受到其他实例对象数据的污染（函数返回的对象内存地址并不相同，而对象形式会共用同一个内存地址）
//对象可以以键值对的形式写出，但函数只能不能以键值对形式表示其值，可以借助return返回对象方式写成键值对。
const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{name}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{//必须是函数，
                name:"定义初始数据"
            }
        });
        console.log(vm.$data.name)
        console.log(vm.name)//同第一类写法，第一类更繁琐
    </script>
</body>
</html>

★{{}}语法将data初始数据绑定到p元素中。
在这里插入图片描述
4、methods定义方法

案例：在methods选项中定义showInfo()方法，实现页面内容的更新：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
//初始页面结构
    <div id="app">
         <button @click="showInfo">请单击</button>
         <p>{{msg}}</p>
    </div>
    <script>
    //定义VM实例
        var vm=new Vue({
            el:'#app',
            data:{
               // msg:''
                msg:'原始值'
            },
            //在vue配置对象中定义的showinfo方法，实现页面内容 更新
            methods:{
                showInfo(){
                    //this.msg='单击触发事件'
                    this.msg='点击之后的内容'
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
5、computed计算属性
★响应式属性

计算属性其实是一个方法，但用法类似属性；
应用场景：当数据随其他数据变化而变化时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>总价格:{{totalPrice}}</p>
        <p>单价:{{price}}</p>
        <p>数量:{{num}}</p>
        <div>
            <button @click="num==0?0:num--">//@click后可以是方法名，也可以是表达式
                减少数量
            </button>
            /**
            <button @click="num++">
                增减数量
            </button>
            **/
            <button @click="logTotalPrice">
            打印总价格
            </button>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                price:20,
                num:0
            },
            computed:{
                totalPrice(){
                    return this.price*this.num;
                }//计算属性一般返回结果，num改变，totalprice随之改变
            },methods:{
           		  logTotalPrice(){
           		      console.log('totalPrice的结果'+this.totalPrice);//计算属性，所以无（）
           		      }
        });
    </script>
</body>
</html>

1.computed：计算
6、watch状态监听
用来监测vue实例中的数据变动。
（监听当前vue实例中的数据变化，调用当前数据所绑定的事件处理方法）
对比computed和watch：
在这里插入图片描述
watch适用场景: watch和computed很相似，watch用于观察和监听页面上的vue实例，当然在大部分情况下我们都会使用computed，但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。
在这里插入图片描述
computed和watch之间的区别：
computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

7、filters过滤器
对数据进行格式化。

过滤器也可以接收额外参数、多个过滤器也可以串联，也并没有改变原本的数据, 是产生新的对应的数据
☆插值语法：{{xxx}},功能是解析标签体内容，xxx为js表达式，且可以直接读取data的所有属性。
|：管道符号：
管道符之前代码的执行结果会传到后面作为参数进行处理。
使用过滤器：
①插值表达式使用:{{data属性名 | 过滤器名称}}
②属性绑定使用：v-bind:id=‘data属性名|过滤器名称’，id与data属性通过v-bind绑定，通过管道符传递给过滤器名称进行处理，所得结果为id值。此时可以简写为:id='data属性名|过滤器名称'，使用指令语法，该语法功能为：解析标签（包括：标签属性、标签体内容、绑定事件…）。

<div>{{msg|toUpperCase}}</div>//msg作为参数传递到过滤器中执行
filters:{
	toUppercase(value){//方法
		return value?value.toUpperCase():' ';
}
}

在这里插入图片描述

二、vue数据绑定

1、样式绑定

内联样式：v-bind将样式数据绑定给DOM元素
绑定样式：以类名定义元素样式
绑定表达式结果类型可以为：字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

在这里插入图片描述
2、内置指令

指令必须写在DOM元素上。

v-model：主要实现数据双向绑定，通常用在表单元素上，如input。双向数据绑定是数据驱动视图的结果。v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

v-text：在DOM元素内部插入文本内容。与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html：在DOM元素内部插入HTML标签内容。v-html的内容可以是HTML标签结构。
v-bind：属性单向数据绑定。
v-on：事件监听指令，负责给DOM元素绑定事件，配合事件类型使用。v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
v-for：实现列表渲染，常用来循环数组，用于展示列表数据。语法：v-for="(item, index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
v-if：控制元素显示或隐藏，属性为布尔值；对元素删除重新创建。

v-if="表达式"
v-else-if="表达式"
v-else="表达式"
//结构不能被“打断”

v-show：操作元素的display属性。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

三、vue事件

1、事件监听
在这里插入图片描述

2、事件修饰符

.prevent：HTML标签具有自身特性，可以使用.prevent修饰符来阻止标签的默认行为。

.once:只触发一次事件处理函数。

在这里插入图片描述
事件修饰符可以控制事件按照一定规则触发，使用修饰符时，书写顺序很重要。

v-on:click.prevent.self阻止所有单击
v-on:click.self.prevent只会阻止对事件本身的单击

四、vue的组件

1、组件
即自定义标签
在这里插入图片描述 Vue中使用组件的三大步骤：
定义组件(创建组件)
注册组件
使用组件(写组件标签)

调用：

Vue.component('参数1：组件名称',{参数2：配置对象//component是注册组件API方法
data(){}//定义组件可使用的数据，必须使用函数处理（见data讲解）
template//组件的模板，定义组件的界面
})

组件名可使用驼峰命名法
在这里插入图片描述
2、局部注册组件

components:{
	//key：组件名，驼峰命名法
	//value：组件的配置对象
}

在这里插入图片描述 3、template模板：

4、组件之间的数据传递：

因为组件实例具有局部作用域。
父组件子组件的依赖关系是完成数据传递的基础。
props:规定组件可以通过哪些属性传递数据。

props是从上到下的单向数据流传递，且父级组件的props更新会向下流动到子组件中，反过来不行。
在这里插入图片描述

$emit：调用自定义的事件，然后传递数据。
在这里插入图片描述

在这里插入图片描述

5、组件切换

此外可以通过组件的is属性来实现，使用is属性匹配组件名称。
6、关于this指向：
组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

五、vue生命周期

生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。
1、钩子函数
在这里插入图片描述

2、实例创建
钩子函数beforeCreate和created
在这里插入图片描述

在这里插入图片描述

3、页面挂载
beforeMount和mounted：在实例创建后，如果挂载点el存在，就进行页面挂载。
通过this.$el获取el的DOM元素。
挂载之前，数据没有被关联到$el对象上，所以页面无法展示页面数据。
将data中的数据挂载到组件vm上,这样就可以通过this.xxx访问到组件上的数据
4、数据更新
beforeUpdate和updated:vue实例挂载完成后，当数据发生变化时，会执行beforeUpdate和pudated钩子函数。
5、实例销毁
beforeDestroy和destroyed：生命周期函数最后阶段是实例的销毁，会执行beforeDestroy和destroyed钩子函数。
vm实例在beforeDestroy和destroyed函数执行时都存在，但销毁之后获取不到div元素，因此实例销毁后无法操作DOM元素。
在这里插入图片描述
$refs：一个小细节，具体看这