当前位置：首页 > article >正文

前端学习笔记-Vue篇-01

article 2025/3/3 4:44:07

第一章 Vue核心

1.1 Vue的基本认识

1.1.1 官网

英文官网Vue.js - The Progressive JavaScript Framework | Vue.js

中文官网Vue.js - 渐进式 JavaScript 框架 | Vue.js

【注意：Vue2：Vue.js | 介绍 — Vue.js】

1.1.2 介绍描述

渐进式JavaScript框架
作者：尤雨溪
作用：动态构建用户界面

1.1.3 Vue的特点

遵循 MM 模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注 U,可以轻松引入 vue 插件或其它第三库开发项目

1.1.4.与其它前端JS框架的关联

借鉴 angular 的模板和数据绑定技术
借鉴 react 的组件化和虚拟 DOM 技术

1.1.5.Vue 扩展插件

vue-cli: vue 脚手架
vue-resource(axios): ajax 请求
vue-router:路由
vuex:状态管理
vue-lazyload:图片懒加载
vue-scroller:页面滑动相关
mint-ui: 基于 vue 的 UI组件库(移动端)
element-ui: 基于 vue 的UI组件库(PC端)

1.2 Vue的基本使用

1.2.1 Hello小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始Vue</title>
    
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue实例
        const x = new Vue({
            el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供e1所指定的容器去使用，值暂时先写成一个对象
                name:'hjjj'
            }
        })
    </script>
</body>
</html>

初识Vue:

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
root容器里的代码依然符thtm1规范只不过混入了一些特殊的Vue语法;
root容器里的代码被称为【Vue模板】
Vue实例和容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新;

1.3 模板语法

Vue模板语法有2大类:
1.插值语法

功能:用于解析标签体内容。
写法:{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法:

功能:用于解析标签(包括:标签属性、标体内容、定事件....)。
举例:v-bind:href="xxx"或简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令，且形式都是:v-????，此处我们只是拿v-bind举个例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>Hello,{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="url">点我去主页</a>
        //"v-bind:"可以简写为"："
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue实例
        const x = new Vue({
            el:'#root',
            data:{
                name:'hjjj',
                url:'https://www.baidu.com/index.htm'
            }
        })
    </script>
</body>
</html>

1.4 数据绑定

Vue中有2种数据绑定的方式:

单向绑定(v-bind):数据只能从data流向页面。
双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue实例
        new Vue({
            el:'#root',
            data:{
                name:'hjjj'
            }
        })
    </script>
</body>
</html>

穿插Tips1- data与el的2种写法：
1.el有2种写法
(1).new Vue时候配置e1屈性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值.
2.data有2种写法
(1).对象式
(2).所数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

    //el的两种写法
    const v = new Vue({
        //el:'#root'，
        //第一种写法data: {
            name:'尚硅谷
    })
    console.log(v)v.$mount('#root')//第二种写法
    //data的两种写法new Vue({
        el:'#root'
    }
    //data的第一种写法:对象式/* 
    data:{
        name:'尚硅谷
    } 
    //data的第二种写法:函数式
    data(){
        console.log('@@@',this)//此处的this是Vue实例对象
    return{
        name:'尚硅谷
    }
}

穿插Tips2-Object.defineProperty：

011_尚硅谷Vue技术_Object.defineProperty_哔哩哔哩_bilibili

穿插Tips3-数据代理：

013_尚硅谷Vue技术_Vue中的数据代理_哔哩哔哩_bilibili

1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)

2.Vue中数据代理的好处:更加方便的操作data中的数据

3.基本原理:

通过0bject.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。

1.5 MVVM模型

M:模型(Model):对应 data 中的数据
V:视图(View):模板
VM:视图模型(ViewModel): Vue 实例对象

1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。

1.6 事件处理

事件的基本使用:

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

Vue中的事件修饰符:

prevent:阻止默认事件(常用)I:
stop:阻止事件冒泡(常用);
once:事件只触发一次(常用)
capture:使用事件的捕获模式;
self:只有event.target是当前操作的元素时才触发事件;
passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

键盘事件

1.Vue中常用的按键别名:

回车 =>enter
删除 => delete(捕获“删除”和“退格”键)
退出 =>esc
空格 =>space
换行 =>tab(特殊，必须配合keydown去使用)
上=> up
下=> down
左=>left
右=>right

2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-caseK短横线命名)
3.系统修饰键(用法特殊):ctr1、alt、shift、meta

配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
配合keydown使用:正常触发事件。

4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes,自定义键名 =键码，可以去定制按键别名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
    <style>
        *{
            margin: 20px;
        }
        .demo1{
            height: 50px;
            background: skyblue;
        }
        .box1{
            padding: 5px;
            background: skyblue;
        }
        .box2{
            padding: 5px;
            background: pink;
        }
    </style>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>欢迎来到{{name}}</h1>
        <!-- 阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="showInfo1">点我提示信息</a>
       <!-- 阻止冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo1">点我提示信息</button>
        </div>
        <!-- 事件只触发一次 -->
        <button @click.once="showInfo1">点我提示信息</button>
        <!-- 事件捕获 -->
        <div class="box1" @click.capture="showMsg">
            div1
            <div class="box2" @click="showMsg">
                div2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素时才触发事件 -->
         <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
         </div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
        //创建Vue实例
        new Vue({
            el:'#root',
            data:{
                name:'hjjj'
            },
            methods:{
                showInfo1(e){
                    e.stopPropagation()
                    alert('hello~')
                },
                showInfo1(msg){
                    e.stopPropagation()
                    alert('hello~')
                }
            }
        })
    </script>
</body>
</html>

1.7 计算属性与监视

使用插值语法设计姓名案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-插值语法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true
    //创建Vue实例
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        }
    })
</script>
</html>

使用methods设计姓名案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-methos方法实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        全名：<span>{{fullName()}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true
    //创建Vue实例
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        methods:{
            fullName(){
                return this.firstName+'-'+this.lastName
            }
        }
    })
</script>
</html>

使用computed方法实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例-computed实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true
    //创建Vue实例
    new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三'
        },
        computed:{
            fullName:{
                get(){
                    return this.firstName+'-'+this.lastName
                },
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.fullName = arr[1]
                } 
            }
        }
    })
</script>
</html>

computed简写【只考虑展示，不考虑修改的时候可以简写，就当成getter使用】：

computed:{
//简写fullName(){
    console.log('get被调用了')
    return this.firstName +-'+ this.lastName
    }
}

get有什么作用?

当有人读取fullName时，get就会被调用，且返回值就作为fullName的值

get什么时候调用?

1.初次读取fullName时。2.所依赖的数据发生变化时。

set什么时候调用?

当fullName被修改时。

计算属性:
1.定义:要用的属性不存在，要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?

初次读取时会执行一次。
当依赖的数据发生改变时会被再次调用。

4.优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。

5.备注:

计算属性最终会出现在vm上，直接读取使用即可。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

监视属性watch:

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视!!
监视的两种写法:

new Vue时传入watch配置
通过vm.$watch监视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例-监视属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true
    //创建Vue实例
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        /* watch:{
            isHot:{
                immediate:true,//初始化时让handler调用一下
                //handler什么时候调用?当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            }
        } */
    })
    vm.$watch('isHot',{
        immediate:true,//初始化时让handler调用一下
        //handler什么时候调用?当isHot发生改变时
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    })
</script>
</html>

深度监视:

Vu中的watch默认不监测对象内部值的改变(一层)
配置deep:true可以监测对象内部值改变(多层)

备注:

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
使用watch时根据数据的具体结构，决定是否采用深度监视。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气案例-监视属性实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr/>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
        <button @click="numbers = {a=666,b=888}">彻底替换掉numbers</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true
    //创建Vue实例
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                //immediate:true,//初始化时让handler调用一下
                //handler什么时候调用?当isHot发生改变时
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            numbers:{
                deep:true,
                handler(){
                    console.log('number改变了')
                }
            }
        }
    })
</script>
</html>

watch简写：如果不需要immediate或者不需要deep则可简写

computed和watch之间的区别:

computed能完成的功能，watch都可以完成。
watch能完成的功能，computed不一定能完成，例如:watch可以进行异步操作。

两个重要的小原则:

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数,这样this的指向才是vm或组件实例对象。

1.8 class与style绑定

在应用界面中, 某个(些)元素的样式是变化的。

class/style 绑定就是专门用来实现动态样式效果的技术

1.class样式
写法:class="xxx”xxx可以是字符串、对象、数组。

字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用

2.style样式

:style="{fontsize:xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

<style>
    .classA {
        color: red;
    }
    .classB {
        background: blue;
    }
    .classC {
        font-size: 20px;
    }
</style>

<div id="demo">
    <h2>1. class 绑定: :class='xxx'</h2>
    <p class="classB" :class="a">表达式是字符串: 'classA'</p>
    <p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
    <p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
    
    <h2>2. style 绑定</h2>
    <p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize +
'px' }"</p>
    <button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
    el : '#demo',
    data : {
        a: 'classA',
        isA: true,
        isB: false,
        color: 'red',
        fontSize: '20px'
    },
    methods : {
        update () {
            this.a = 'classC'
            this.isA = false
            this.isB = true
            this.color = 'blue'
            this.fontSize = '30px'
          }
        }
    })
</script>

1.9 条件渲染

如果需要频繁切换 v-show 较好

当条件不成立时, v-if 的所有子节点不会解析 ( 项目中使用 )

1.v-if
写法:

v-if="表达式”
v-else-if="表达式"
v-else="表达式"

适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”

2.v-show
写法:v-show="表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 使用v-show做条件渲染 -->
        <!-- <h2 v-show="true">欢迎来到{{name}}</h2>
        <h2 v-show="false">欢迎来到{{name}}</h2>
        <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

        <!--使用v-if做条件渲染-->
        <!--<h2 v-if="false">欢迎来到{{name}}</h2>-->
        <!--<h2 v-if="1 ===1">欢迎来到{{name}}</h2>-->

        <!--v-else和v-else-if -->
        <!--<div v-if="n === 1">Angular</div>
        <div v-else-if="n === 2">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else>哈哈</div>-->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true
    new Vue({
        el:'#root',
        data:{
            name:'hjj'
        }
    })
</script>
</html>

1.10 列表渲染

v-for指令

用于展示列表数据
语法:v-for="(item, index)in xxx" :key="yyy"
可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

面试题:
vue中的key有什么作用?(key的内部原理)react
1.虚拟DOM中key的作用:

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

3.用index作为key可能会引发的问题:

（1）若对数据进行:逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==>界面效果没问题，但效率低。

（2）如果结构中还包含输入类的DOM:

会产生错误DOM更新 ==>界面有问题。

4.开发中如何选择key?:

最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,使用index作为key是没有问题的。

<body>
    <div id="root">
        <h2>列表人员</h2>
        <button>添加一个老刘</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}--{{p.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
        
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'Boa',age:18},
                    {id:'001',name:'Bob',age:17},
                    {id:'001',name:'Boc',age:16}
                ]
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>列表人员</h2>
        <input type="text" placeholder="Please Input Name" v-model="keyword">
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
        //使用watch实现
        /* new Vue({
            el:'#root',
            data:{
                keyword:'',
                persons:[
                    {id:'001',name:'Boa',age:18,sex:'woman'},
                    {id:'002',name:'Bob',age:17,sex:'woman'},
                    {id:'003',name:'Boc',age:16,sex:'man'},
                    {id:'004',name:'Aod',age:15,sex:'man'}
                ],
                filPersons:[]
            },
            watch:{
                keyword:{
                    immediate:true,
                    handler(val){
                        this.filPersons = this.persons.filter((p=>{
                        return p.name.indexOf(val) !== -1 //indexOf的值最终只要不是-1就代表找到了
                    }))
                   } 
                }
            }
        }) */
       
        //使用computed实现
        new Vue({
            el:'#root',
            data:{
                keyword:'',
                persons:[
                    {id:'001',name:'Boa',age:18,sex:'woman'},
                    {id:'002',name:'Bob',age:17,sex:'woman'},
                    {id:'003',name:'Boc',age:14,sex:'man'},
                    {id:'004',name:'Aod',age:25,sex:'man'}
                ]
            },
            computed:{
                filPersons(){
                    return this.persons.filter((p=>{
                        return p.name.indexOf(this.keyword) !== -1
                    }))
                }
            }
        })
    </script>
</body>
</html>

功能更新：

<body>
    <div id="root">
        <h2>列表人员</h2>
        <input type="text" placeholder="Please Input Name" v-model="keyword">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) in filPersons" :key="index">
                {{p.name}}--{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
       
        //使用computed实现
        new Vue({
            el:'#root',
            data:{
                keyword:'',
                sortType:0, //0原 1降 2升
                persons:[
                    {id:'001',name:'Boa',age:18,sex:'woman'},
                    {id:'002',name:'Bob',age:17,sex:'woman'},
                    {id:'003',name:'Boc',age:14,sex:'man'},
                    {id:'004',name:'Aod',age:25,sex:'man'}
                ]
            },
            computed:{
                filPersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword) !== -1
                    })
                    //判断一下是否需要排序
                    if(this.sortType){
                        arr.sort((p1,p2)=>{
                            return this.sortType ===1 ? p2.age-p1.age : p1.age-p2.age
                        })
                    }
                    return arr
                }
            }
        })
    </script>
</body>
</html>

API — Vue.js

Vue监视数据的原理:
1.vue会监视data中所有层次的数据。
2.如何监测对象中的数据?
通过setter实现监视，且要在new Vue时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API:

Vue.set(target,propertyName/index，value)或

vm.$set(target, propertyName/index,value)
3.如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事:

调用原生对应的方法对数组进行更新。
重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法:

使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set()或vm.$set()

特别注意:Vue.set()和 vm.$set()不能给vm 或 vm的根数据对象添加属性!!!

1.11 收集表单数据

若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
岩:<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注:v-model的三个修饰符:

lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model="userInfo.account"> <br/><br/>
            密码：<input type="password" v-model="userInfo.password"> <br/><br/>
            年龄：<input type="number" v-model="userInfo.age.number"> <br/><br/>
            性别：
            男：<input type="radio" name="sex" v-model="userInfo.sex" value="male">
            女：<input type="radio" name="sex" v-model="userInfo.sex" value="famale"> <br/><br/>
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            睡觉<input type="checkbox" v-model="userInfo.hobby" value="sleep">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br/><br/>
            所属校区
            <select v-model="userInfo.city">
                <option value="" >请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>
            <br/><br/>
            其他信息：
            <textarea v-model="userInfo.other"></textarea><br/><br/>
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
       new Vue({
        el:'#root',
        data:{
            userInfo:{
                account:'',
                password:'',
                sex:'female',
                age:'',
                hobby:[],
                city:'beijing',
                other:'',
                agree:''
            }
        },
        methods:{
            demo(){
                console.log(JSON.stringify(this.userInfo))
            }
        }
       })
        
    </script>
</body>
</html>

1.12 Vue实例生命周期

又名:生命周期回调函数、生命揭期函、生命周期钩子。
是什么:Vue在关键时刻帮我们用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象。

常用的生命周期钩子:
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会再beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了.

1.13 过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
语法:

注册过滤器:Vue.filter(name,callback)或 new Vue{filters:{}}
使用过滤器:{{xxx|过滤器名}}或v-bind:属性 ="xxx| 过滤器名

备注:

过滤器也可以接收额外参数、多个过滤器也可以串联
并没有改变原本的数据，是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../JS/vue.js"></script>
    <script type="text/javascript" src="../JS/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的时间</h2>
        <!-- 计算属性实现 -->
        <h3>现在是：{{fmtTime}}</h3>
        <!-- methods实现 -->
         <h3>现在是：{{getFmtTime()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在是：{{time | timeFormater}}</h3>
        <!-- 过滤器实现（传参） -->
        <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
        <h3 :x="msg | mySlice">hjj</h3>
    </div>
    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        Vue.config.devtools = true
        /* 全局过滤器 */
        Vue.filter('mySlice',function(value){
            return value.slice(0,4)
        })
       new Vue({
        el:'#root',
        data:{
            time:111111111 //时间戳
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods:{
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        /* 局部过滤器 */
        filters:{
            timeFormater(value){
                return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss')
            },
            mySlice(value){
                return value.slice(0,4)
            }
        }
       })
        
    </script>

</html>

1.14 内置指令与自定义指令

1.14.1 内置指令

v-bind:单向绑定解析表达式，可简写为:xxx
v-model:双向数据绑定
v-for:遍历数组/对象/字符串
v-on:绑定事件监听，可简写为@
V-if:条件渲染(动态控制节点是否存存在)
v-else:条件渲染(动态控制节点是否存存在)
v-show:条件渲染(动态控制节点是否展示)

v-text指令:

作用:向其所在的节点中渲染文本内容。
与插值语法的区别:v-text会替换节点中的内容，{{xx}}则不会

v-html指令:
1.作用:向指定节点中渲染包含html结构的内容。

2.与插值语法的区别:

v-html会替换掉节点中所有的内容，{{xx}}则不会。
v-html可以识别html结构。

3.严重注意:v-html有安全性问题!!!!

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!

v-cloak指令(没有值):

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

v-once(没有值):

v-once所在节点在初次动态渲染后，就视为静态内容了。[只读一次]
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令:

跳过其所在节点的编译过程。【不会再解析了，写的是啥呈现的就是啥】
可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加编译。

1.14.2 自定义指令

1.定义语法:
局部指令:

new Vue({
    directives:{指令名：配置对象}
})
或
new Vue({
    directives(){指令名：回调函数}
})

全局指令:

Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)

2.配置对象中常用的3个回调

bind:指令与元素成功绑定时调用。
inserted:指令所在元素被插入页面时调用。
update:指令所在模板结构被重新解析时调用。

3.备注

指令定义时不加v-，但使用时要加v-;
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

查看全文

http://www.kler.cn/a/421753.html

前端用到的一些框架

python蓝桥杯刷题3

游戏引擎学习第25天

【XGlassTerminal.js】快速构建炫酷终端网页以及 Linux 模拟器在线！！

android视频播放器之DKVideoPlayer

C语言编程1.21波兰国旗问题

【VPX312-0】基于3U VPX总线架构的XC7VX690T FPGA数据预处理平台

机器学习概述，特征工程简述2.1——2.3

QT实战-qt各种菜单样式实现

Milvus×OPPO：如何构建更懂你的大模型助手

【王道计算机组成原理·个人笔记】开头

leetcode 之二分查找（java）(2)

微软表示不会使用你的 Word、Excel 数据进行 AI 训练

云服务器重装系统后一些报错与解决[ vscode / ssh / 子用户]

case的用法3

软件工程——期末复习（2）

JavaSE学习心得（APL与算法篇）

机器学习面试八股总结

Java学习笔记（10）--面向对象基础

Qt桌面应用开发第十天（综合项目二翻金币）