前端学习笔记—Vue2基础

作者: 木溪bo | 来源:发表于2024-06-24 15:41 被阅读0次

HTML基础学习笔记
web前端入门基础
前端测试
2018-01-04
前端基础学习笔记
前端基础学习笔记
零基础前端学习笔记01
前端学习笔记_HTTP基础
前端jQuery基础学习笔记
无标题文章

一、基础知识

vm代表：new Vue()实例对象，vc代表：VueComponent实例对象，一个vc可认为就是一个组件对象

基础知识大纲

1.创建Vue示例，new Vue(括号内写配置内容对象);

绑定模版：
第一种是在构造Vue实例对象的时候通过el:"选择器名称"绑定
第二种是创建好Vue对象后，通过对象实例调用绑定方法.$mount()去设置绑定选择器。

选择器优先id选择器，因为和vue实例是需要一一对应的。如果使用class选择器，则只有第一个绑定的选择器才能绑定成功，后面的同名选择器容器绑定无效。

绑定模版

vue初始化1

vue初始化2

模板指令

2.数据绑定

单向绑定v-bind，类似观察者模式单方向监听变化，数据变化作用于界面显示上。一般用于非输入型控件元素。
双向绑定v-modle，和安卓mvvm框架原理类似，且v-model只能应用在表单类元素(输入类元素)，输入和输出互相影响。
image.png
image.png

3.data与el的2种写法

el有2种写法
(1)new Vue()时候配置el属性。
(2)先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
data有2种写法
(1)对象式data:{}
(2)函数式data:function(){ return { } }简写data(){ return { } }，vue3只支持函数式写法。
如何选择:一般两种都行，但是写组件时，data必须使用函数式，否则会报错。养成习惯推荐使用函数式data
一个重要的原则:一但写了箭头函数，this就不再是Vue实例了，箭头函数的this会向上一层寻找。由Vue管理的函数，一定不要写箭头函数。
image.png

4.vue数据代理和双向绑定原理

双向绑定原理是基于mvvm模式理念来的，底层通过Object.defineProperty()将vm实例的“_data”变量中的子属性添加到vm实例中，与“_data”同级。添加到vm后才能在页面中简写{{name}}否则需要{{_data.name}}

image.png

image.png
Vue检测对象改变都是通过setter()来实现的，也是通过它来实现响应式数据。数组特殊，不能通过直接索引值赋值“=”，可通过响应式的方法push()，pop()等设置，否则不会触发响应式。如：this.mylist.splice(1,1,666);在下标1的地方删除1个元素，加上666

image.png
针对数组，filter本身不响应式数据，但是旧数组被重新赋值后却可以响应。遍历每一项，过滤后生成新数组，用新数组赋值给旧数组。

数组响应式

image.png
Vue.set 和 this.$set 都可以用来添加或修改对象的属性，并确保视图更新。

以下方式均可以响应式确保视图更新
 <div>
            <h1>学生信息</h1>
            <button @click="student.age++">点击年龄+1</button><br />
            <button @click="addStudentSex">添加性别属性，默认是男</button><br />
            <button @click="student.sex='不晓得'">修改性别属性，未知</button><br />
            <button @click="addFriend">在列表首位添加一个盆友，打乱数据结构</button><br />
            <button @click="changeFriend">修改第一个朋友的名字</button><br />
            <button @click="addHobby">添加一个爱好</button><br />
            <button @click="changeHobby">修改一个爱好</button><br />
            <h3>姓名：{{student.name}}</h3>
            <h3>年龄：{{student.age}}</h3>
            <h3 v-if="student.sex">性别：{{student.sex}}</h3>
            <h2>爱好</h2>
            <ul>
                <li v-for="(item,index) in student.hobby" :key="index">{{item}}</li>
            </ul>
            <h2>盆友们</h2>
            <ul>
                <li v-for="(item,index) in student.friends" :key="index">{{item}}</li>
            </ul>
 </div>

 var vm = new Vue({
        el: '#app-root-el',
        data: {
            student: {
                name: "张三",
                age: 18,
                hobby: ['篮球', '足球'],
                friends: [
                    { "name": "李四", "age": 18 },
                    { "name": "王五", "age": 20 },
                ]
            }
        },
        methods: {
            addStudentSex() {
                // Vue.set(this.student, 'sex', '男')没有则会先添加sex属性，等价于
                this.$set(this.student, 'sex', '女')
            },
            changeStudentSex() {
                Vue.set(this.student, 'sex', '未知')
            },
            addFriend() {
                this.student.friends.unshift({ "name": "流星", "age": 28 })
            },
            changeFriend() {
                this.student.friends[0].name = '旺旺'
            },
            addHobby() {
                this.student.hobby.push("打篮球")
            }
            ,
            changeHobby() {
                  //====综合使用=====
                 //过滤赋值，更改源数组，均可以响应式确保视图更新
                // this.student.hobby = this.student.hobby.filter(function (item) {
                //     return item.indexOf('足') > -1
                // })
                // this.student.hobby.splice(0,1,'乒乓球1')
                // this.$set(this.student.hobby,0,'乒乓球2')
                Vue.set(this.student.hobby,0,'乒乓球3')
            }
        }
    })

5.Vue的点击事件使用：v-on:click="xxx"或者简写@click="xxx"。

前端事件触发：捕获动作是由外到内捕获，冒泡事件是由内到外传递。$event参数可以将当前事件的对象通过绑定的函数参数传递出去。

事件.png
image.png

Vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用);
4.capture:使用事件的捕获模式;可以逆转一下冒泡顺序。
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;（移动端常用）

<!--事件触发后就会执行show方法，并且滚动条也会移动，类似异步操作。
如果不加.passive修饰，则必须等待show函数方法跑完才会触发滚动条-->
<ul @wheel.passive="show" class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

methods:{
   show(){
     //响应方法
   }
}

键盘事件

按键别名和按键码
自定义按键名

image.png

6.计算属性computed

只含get()时可简写为 fullName(){ return xxx }。计算属性还自带缓存机制。

image.png

7.侦听属性：可以运用于某个属性变化后需要的一系列配套变化响应功能

侦听属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视!!
3.immediate:ture可开启初始化即执行监视
4.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

简写形式：
watch:{
   isHot(newValue,oldValue){
     console.log('isHot被修改了',newValue,oldValue)
   }
}
或
vm.$watch('isHot',(newValue,oldValue)=>{
   console.log('isHot被修改了',newValue,oldValue,this)
})

image.png

深度监视:
(1)vue中的watch默认不监测对象内部值的改变(第一层)
(2)配置deep:true可以监测对象内部值改变(多层)。
备注:
(1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2)使用watch时根据数据的具体结构，决定是否采用深度监视。开启会影响vue运行效率。

深度.png

监视总结.png

8.样式绑定

image.png

绑定class样式，在class前加冒号，其实就是v-bind:class=" "

image.png

image.png

style样式，v-bind:style=" " ：给系统属性的“-”去掉，后面的字母大写开头作为对象属性的key值，如font-size变更为fontSize

image.png

9.判断语句，条件渲染

v-if简介

示例

10.for数组遍历

image.png
观察输入框值

index为key.png
观察输入框值

唯一id为key.png

11.表单数据收集

type="radio"

<!DOCTYPE html>
<html lang="zh">
<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>vue2-练习表单数据</title>
    <!-- 尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，
        跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue： -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 或者： -->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
    <style>
    </style>
</head>
<body>
    <div id="app-root-el">
        <form @submit.prevent="showAlert(userinfo)">
            <div><label for="zhanghao">账号：</label><input id="zhanghao" type="text" placeholder="请输入账号"
                    v-model="userinfo.name"></div>
            <div><label for="mima">密码：</label><input id="mima" type="password" placeholder="请输入密码"
                    v-model="userinfo.pwd"></div>
            <div><label for="age">年龄：</label><input id="age" type="number" placeholder="请输入年龄"
                    v-model.number="userinfo.age"></div>
            <div>性别：
                      男<input type="radio" name="sex" v-model.number="userinfo.sex" value="0">
                      女<input type="radio" name="sex" v-model.number="userinfo.sex" value="1"></div>
            <div>爱好：
                            打篮球<input type="checkbox" v-model="userinfo.hobby" value="lq">
                            打羽毛球<input type="checkbox" v-model="userinfo.hobby" value="ymq">
                            打乒乓球<input type="checkbox" v-model="userinfo.hobby" value="ppq">
            </div>
            <div>所属地方
                <select title="city" v-model="userinfo.city">
                    <option value="bj">北京</option>
                    <option value="sh">上海</option>
                    <option value="gz">广州</option>
                    <option value="sz">深圳</option>
                </select>
            </div>
            <div style="display: inline-flex;align-items: flex-start;margin-top: 20px;">其他信息<textarea title="content"
                    style="height: 300px;width: 200px;">{{userinfo}}</textarea></div>
            <div><input title="xy" type="checkbox" placeholder="">阅读并接受</div>
            <button>提交</button> <button>提交2</button>
        </form>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app-root-el',
        data: {
            userinfo: {
                name: "张三",
                pwd: '123',
                sex: 0,
                age: 18,
                hobby: [],
                city: "bj",
                content: "",
                friends: [
                    { "name": "李四", "age": 18 },
                    { "name": "王五", "age": 20 },
                ]
            }
        },
        methods: {
            showAlert(e) {
                console.log('showAlert')
                alert('Hello Vue!' + JSON.stringify(e))
            }
        },
        computed: {
            WeatherInfo() {
                return '冷'
            }
        }
    })
</script>
</html>

显示结果

12.过滤器

image.png

过滤器第一个参数message不用写入括号

13.v-html指令详解，不要在内容提交输入框等地方使用，不安全。

image.png

14.v-cloak属性使用：等待加载完毕后显示节点

image.png

15.v-pre属性使用：跳过节点编译

image.png

16.v-once属性使用：只动态显示初次数据内容

image.png

17.v-函数名，自定义属性使用

在directives:{ }中定义自定义属性函数，在函数方法内操作真实的DOM元素。element是DOM元素，binding是一个绑定的对象。
全局指令：通过在main.js或main.ts文件中全局注册v-xxx指令，你可以在任何Vue组件中使用它，而不需要重复定义指令的逻辑。这使得代码更加模块化和可维护。

局部自定义.png

全局自定义.png

//===界面显示冷/热===
        <div>
            <span v-muxi="isHot"></span>
        </div>

 //===方式1，全局自定义属性===
首先，在项目的入口文件（通常是`main.js`或`main.ts`）中全局注册`muxi`指令：

    Vue.directive('muxi', {
        bind(el, binding) {
            console.log(el)
            console.log(binding)
            el.textContent = binding.value ? '热' : '冷'
        }
    });
//===方式2，局部自定义属性===  
new Vue({
        directives: {
            muxi:function(el,binding){
                //简写，合并bind(el, binding)，update(el, binding)两个函数
                console.log(el)
                console.log(binding)
                el.textContent = binding.value ? '热' : '冷'
            }
            muxi: {
                //默认全写方法
                bind(el, binding) {
                    //绑定自定义属性
                    console.log(el)
                    console.log(binding)
                    el.textContent = binding.value ? '热' : '冷'
                },
                install(el, binding) {
                    //绑定插入页面后触发
                    el.focus()
                 },

                update(el, binding) {
                    //遍历模板，更新时触发
                    console.log(el)
                    console.log(binding)
                    el.textContent = binding.value ? '热' : '冷'
                }
            }
        }
)}

二、生命周期

生命周期:

1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或组件实例对象。
5.在beforeUpdate()中页面和数据还没有保持同步，此时只是改变了data:{}对象数据，只有updated()周期才把数据和页面绑定改变。
6.beforDestroy()执行数据释放、清除定时器、资源回收等。在这个生命周期如果对data:{}做出更改，数据会改变，因为vm还没销毁，但是不会触发数据监听和updated()。
7.mounted是一个重要的生命周期，在里面执行网络操作、开启定时器、操作业务逻辑等