Vue.js基础

Liberty'

于 2024-09-22 14:56:07 发布

阅读量1.9k

点赞数 19

文章标签： vue.js 前端 javascript html5 前端框架

本文链接：https://blog.csdn.net/Queen741740155/article/details/142437153

版权

Vue.js

https://v2.cn.vuejs.org/

https://cn.vuejs.org/

初识Vue

官网：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

初始Vue

1.想让vue工作，就必须创建一个vue实例，且要传入一个配置对象

2.root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的Vue语法

3.root 容器里的代码被称为 Vue模板

4.Vue 实例和容器是一一对应的；

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用

6.{{XXX}}中 XXX要写js表达式，且XXX可以自动读取到data中的所有属性

7.一旦data 中数据发生改变，那么页面中用到该数据得地方也会自动更新

注意区分： js表达式和 js 代码（语句）

1.表达式：一个表达式会生成一个值，可以放任何一个需要值得地方：

(1)a

(2)a+b

(3)demo(1)

(4)x === y ? a : b

2.js 语句

(1)if(){}

(2)for(){}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 引入vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
    
    <title>Document</title>
</head>
<body>
   
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 插值语法 -->
        <h1>hello, {{name.toUpperCase()}}, {{address}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        //创建Vue 实例
        const x = new Vue({
            el:"#root", //el 用于指定当前Vue实例为哪个容器服务， 值通常为css选择器字符串
            // el:document.getElementById('root')
            data:{  //data用于存储数据， 数据供el所指定的容器去使用， 值我们暂时先写成一个对象
                name:'jack',
                address:'beijing'
            }


        })

    </script>
</body>
</html>

在这里插入图片描述

模板语法

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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> 

    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>

        <h1>指令语法</h1>
        <a v-bind:href="url">{{name}}一下</a>   
        <a :href="school.url.toUpperCase()">{{school.name}}一下</a>
    </div>
    

    <script>
         Vue.config.productionTip = false
         new Vue({
            el:'#root',
            data:{
                name:'百度',
                url:'http://www.baidu.com',

                school:{
                    name:'淘宝',
                    url: 'http://www.taobao.com',
                }
            }
         })
    </script>
</body>
</html>

在这里插入图片描述

数据绑定

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

1.单向绑定(v-bind):数据只能从data流向页面。

2.双向绑定(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">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>
 
    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value = "name"><br> -->
        <!-- 双向数据绑定：<input type="text" v-model:value="name"> -->
        <!-- v-model 只能应用在表单元素（输入类元素）上 -->
        
        
        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br>
        双向数据绑定：<input type="text" v-model="name">

    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el:'#root',
            data:{
                name:'huyq',
            }
        })

    </script>
</body>

</html>

MVVM模型

1.M:模型(Model)data中的数据

2.V:视图(View):模板代码

3.VM:视图模型(ViewModel):Vue实例

data中所有的属性,最后都出现在了vm身上。

vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

在这里插入图片描述

事件处理

事件的基本使用

1.使用v-on :xxx或@xxx绑定事件，其中xxx是事件名;

2.事件的回调需要配置在methods对象中，最终会在vm上;

3.methods中配置的函数,不要用箭头函数! 否则this就不是vm了;

4.methods中配置的函数，都是被Vue所管理的函数。

this的指向是vm或组件实例对象5.@click="demo”和@click="demo($event)”效果一致，但后者可以传参;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click = "showInfo1">点我提示信息(不传参)</button>
        <!-- 简写形式 -->
        <button @click="showInfo2(66, $event)">点我提示信息(传参)</button> 
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: '哈佛大学',
            },
            methods:{
                showInfo1(event) {
                    // console.log(event.target.innerText);  //点我提示信息(不传参)
                    // console.log(this); //此处的this是vm
                    
                    alert('同学你好!')
                },

                showInfo2(number){
                    console.log(number, event); //66
                    
                    alert('同学你好!!')
                }
            }
           
        })

    </script>
</body>

</html>

事件修饰符

vue中的事件修饰符:

1.prevent: 阻止默认事件（常用）;

2.stop:阻止事件冒泡（常用）;

3.once:事件只触发一次（常用）;

4.capture:使用事件的捕获模式;

5.self:只有event.target是当前操作的元素时才触发事件;

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>


<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

键盘事件

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

回车 => enter

删除 => delete(捕获删除”和"退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3.系统修饰键（用法特殊）:ctrl、alt、 shift、 meta

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

(2).配合keydown使用:正常触发事件。

4.也可以使用keyCode去指定具体的按键（不推荐)

5.Vue.config.keyCodes.自定义健名=键码，可以去定制按键别名

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

计算属性

计算属性:

1.定义:要用的属性不存在,要通过已有属性计算得来。

2.原理:底层借助了0bjcet.defineproperty方法提供的getter和setter.

3.get函数什么时候执行?

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

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

5.备注:

1.计算属性最终会出现在vm上,直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变


<body>

    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName:'三',
            },
            computed:{
                // 计算属性
                fullName: {
                    // get作用：当有人读取fullname时，get就会被调用，且返回值就是fullname的值
                    //get 什么时候调用， 1.初次读取fullName, 2.所依赖的数据发生变化时

                    get(){
                        console.log('get 被调用了');
                        return this.firstName + '-' + this.lastName
                    },
                    //当    fullName 被修改时，set调用
                    set(value){
                        console.log('set 被调用了');
                        console.log(value);
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                        
                    }
                }
            }
           
        })

    </script>
</body>

计算属性简写


<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model:value="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        姓名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                firstName: '张',
                lastName:'三',
            },
            computed:{
                // 简写
                //只考虑读取,不考虑修改
                fullName(){
                    console.log('get 被调用了');
                    return this.firstName + '-' + this.lastName
                }
            }
           
        })

    </script>
</body>

监听属性

监视属性watch

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在，才能进行监视!!

3.监视的两种写法:

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

<body>     
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 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调用
            //         handler(newValue, oldValue){
            //             console.log('isHot 被修改了', newValue, oldValue);
                        
            //         },

                   
            //     }
            // }


        })

        vm.$watch('isHot', {
            immediate: true, //初始化时， 让handler调用一下

            // handler什么时候调用？当isHot发生改变时。handler调用
            handler(newValue, oldValue){
                console.log('isHot 被修改了', newValue, oldValue);
                        
            },
        })

    </script>
</body>

深度监视

深度监视:

(1). vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变。

备注:

(1).vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watch时根据数据的具体结构,决定是否采用深度监视。

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        
        <h3>a的值是{{numbers.a}}</h3>
        <button @click="add">点我让a+1</button>

        <h3>b的值是{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 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
                },

                add(){
                    this.numbers.a++
                }
            },

            // 监视属性
            watch:{
                isHot :{
                    immediate: true, //初始化时， 让handler调用一下
                    // handler什么时候调用？当isHot发生改变时。handler调用
                    handler(newValue, oldValue){
                        console.log('isHot 被修改了', newValue, oldValue);   
                    },
                },
                
                //监视多级结构中所有属性的变化
                numbers:{
                    deep:true,//深度监视
                    handler(){
                        console.log('numbers改变了');
                        
                    }
                }


            }


        })

      

    </script>
</body>

监视属性简写

<body>   
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
       
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 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(newValue, oldValue){
                   console.log('isHot 被修改了', newValue, oldValue);
               },
               

            }
        })

      

      

    </script>
</body>

绑定样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>绑定样式</title>
    <style>
        .basic{
            width: 300px;
            height: 200px;
            border: 1px solid black;
        }

        .happy{
            background-color: pink;
        }

        .sad {
            background-color: gray;
        }

        .normal{
            background-color: skyblue;
        }

        .w1{
            background-color: green;
        }
        .w2{
            font-size: 30px;
        }

        .w3{
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <!-- 绑定样式:
        1.class样式
            写法:class="xxx"xXx可以是字符串、对象、数组。
            字符串写法适用于:类名不确定,要动态获取。
            对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
            数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用.
        2. style样式
            :style="{fontsize: xxx}"其中xxx是动态值。
            : style="[a,b]"其中a、b是样式对象。 -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 绑定class样式--字符串写法， 适用于：样式类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br><br>

        <!-- 绑定class样式--数组写法， 适用于：要绑定的样式个数不确定，名字不确定 -->
        <div class="basic" :class="classArr">{{name}}</div><br><br>

        <!-- 绑定class样式--对象写法， 适用于：要绑定的样式个数不确定，名字不确定  但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div><br><br>


        <!-- 绑定class样式--对象写法 -->
        <!-- <div class="basic" :style="{fontSize: fsize + 'px'}">{{name}}</div> -->
        <div class="basic" :style="styleObj">{{name}}</div><br><br>


        <!-- 绑定class样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div><br><br>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷',
                mood: 'normal',
                classArr:['w1','w2','w3'],
                classObj:{
                    w1:false,
                    w2:false,
                    w3:true,
                },
                // fsize:40,

                styleObj:{
                    fontSize:'40px',
                    color: 'red',
                    backgroundColor : 'orange',
                },


                styleArr:[
                    {
                        fontSize: '50px',
                        color: 'red',
                    },
                    {
                        backgroundColor: 'blue',
                    },
                ]

                


            },
            
            methods: {
                changeMood(){
                   const arr = ['happy', 'sad', 'normal']
                   let i = Math.floor(Math.random() * 3)
                   this.mood = arr[i]
                }
            },
        })


    </script>
</body>

</html>

条件渲染

条件渲染:

1.v-if

写法:

(1).v-if=“表达式”

(2).v-else-if=“表达式”

(3).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">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
       <!-- 使用v-show做条件渲染 -->
        <h2 v-show="a">欢迎来到{{name}}</h2>
        
        <!-- 使用v-if做条件渲染 -->
        <h2 v-if="a">欢迎来到{{name}}</h2>


        <h2>当前 n 的值是{{n}}</h2>
        <button @click="n++">点我 n 加 1</button>

        <div v-show="n === 1 ? true : false">Angular</div>
        <div v-show="n === 2 ? true : false">React</div>
        <div v-show="n === 3 ? true : false">Vue</div> 

        <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 v-show="n === 1">你</div>
        <div v-show="n === 1">好</div>
        <div v-show="n === 1">啊</div>

        <template v-if=" n === 1">
            <div >你</div>
            <div >好</div>
            <div >啊</div>
        </template>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: '安徽',
                // a:false,
                n:0
            },
        })

    </script>
</body>

</html>

列表渲染

基本列表

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

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <!-- <li v-for="p in persons" :key="p.id">
                {{p.name + '-' + p.age}}
            </li> -->

            <li v-for="(p, index) in persons" :key="index">
                {{p.name + '-' + p.age}}
            </li>   
            
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value, k) of car" :key="k">
               {{k}} --- {{value}}
            </li>
        
        </ul>

        <!-- 遍历字符串 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(char, index) of string" :key="index">
                {{index}} --- {{char}}
            </li>
        
        </ul>


        <!-- 遍历指定次数 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(number, index) of 5" :key="index">
                {{index}}--- {{number}}
            </li>
        
        </ul>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                persons:[
                    { id: '001', name: '张三',  age: 18 },
                    { id: '002', name: '李四', age: 13 },
                    { id: '003', name: '王五', age: 19 },
                ],

                car:{
                    name:'audi',
                    price:'70w',
                    color:'黑色',
                },

                string : 'hello world',
            },
        })

    </script>
</body>

列表的过滤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>列表的过滤</title>
</head>

<body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p, index) in filPersons" :key="p.id">
                {{p.name + '-' + p.age + '-' + p.sex}}
            </li>   
            
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        //computed 实现
         const vm = new Vue({
                el: '#root',
                data: {
                    keyWord: '',
                    persons: [
                        { id: '001', name: '马冬梅', age: 18, sex: '女' },
                        { id: '002', name: '周冬雨', age: 13, sex: '女' },
                        { id: '003', name: '周杰伦', age: 19, sex: '男' },
                        { id: '004', name: '曾汪伦', age: 20, sex: '男' },

                    ],
                    
                    
                },
                
                computed:{
                    //数字的过滤方法
                    filPersons(){
                       return  this.persons.filter((p) => {
                            return p.name.indexOf(this.keyWord) !== -1
                        })
                    }
                }

            })
    
    </script>
</body>

</html>

列表的排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>列表的排序</title>
</head>

<body>
    
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" 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="p.id">
                {{p.name + '-' + p.age + '-' + p.sex}}
            </li>   
            
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        //computed 实现
         const vm = new Vue({
                el: '#root',
                data: {
                    keyWord: '',
                    sortType: 0, //0 原顺序 2 升序 1 降序
                    persons: [
                        { id: '001', name: '马冬梅', age: 18, sex: '女' },
                        { id: '002', name: '周冬雨', age: 13, sex: '女' },
                        { id: '003', name: '周杰伦', age: 19, sex: '男' },
                        { id: '004', name: '曾汪伦', age: 20, sex: '男' },

                    ],
                },
                
                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>

表单数据的收集

若:，则v-model收集的是value值，用户输入的就是value值

若:，则v-model收集的是value值，且要给标签配置value值。
若:

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">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>
  <!-- 准备好一个容器 -->
    <div id="root">
      <form @submit.prevent="demo">
        <label for="demo">账号：</label><input type="text" id="demo" v-model.trim="userInfo.account"><br><br>
        
        <label for="pwd">密码：</label><input type="password" id="pwd" v-model="userInfo.password"><br><br>

        <label for="age">年龄：</label><input type="number" id="age" v-model.number="userInfo.age"><br><br>
        
        性别：男<input type="radio" name="sex" value="male" v-model="userInfo.sex"> 
              女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br><br>
        爱好：
        吃饭<input type="checkbox" name="hobbby" value="eatting" v-model="userInfo.hobby">
        睡觉<input type="checkbox" name="hobbby" value="sleeping" v-model="userInfo.hobby">
        打豆豆<input type="checkbox" name="hobbby" value="hitting" v-model="userInfo.hobby">
        
        <br><br>
        所属校区：
        <select v-model="userInfo.city">
            <option value="">请选择校区</option>
            <option value="beijing">北京</option>
            <option value="anhui">安徽</option>
            <option value="zhejiang">浙江</option>
            <option value="jiangsu">江苏</option>
            <option value="fujian">福建</option>
        </select>
        <br><br>
        
        其他信息：<textarea name="" id="" v-model.lazy="userInfo.other"></textarea>
        
        <br><br>
        
        <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.baidu.com" style="text-decoration: none;">《用户协议》</a>
        
        <br><br>
        
        <button>提交</button>
      </form>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                userInfo:{
                    account: '',
                    password: '',
                    age:'',
                    sex: 'female',
                    hobby: [],
                    city: '',
                    other: '',
                    agree: '',
                }
               

            },

            methods: {
                demo(){
                    console.log(JSON.stringify(this.userInfo));

                }
            },
        })

    </script>
</body>

</html>

过滤器

过滤器:

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

语法:

1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}

2.使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名"

备注:

1.过滤器也可以接收额外参数、多个过滤器也可以串联

2.并没有改变原本的数据,是产生新的对应的数据

<body>
  
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>显示格式化后的时间</h2>
        
        <!-- 计算属性实现 -->
        <h3>现在是{{fmTime}}</h3>
        
        <!-- methods实现 -->
         <h3>现在是{{getFmtTime()}}</h3>

         <!-- 过滤器实现 -->
          <h3>现在是{{time | timeFormater}}</h3>

        <!-- 过滤器实现 (传参)-->
        <h3>现在是{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

        <h3 :x="msg | mySlice">world</h3>

    </div>


    <div id="root2">
        <h2>{{msg | mySlice}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示
        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0,4)
        })

        new Vue({
            el: '#root',
            data: {
                time: 1723081550375,
                msg:'hello, world',
            },

            computed:{
                fmTime(){
                    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, str='YYYY年-MM月-DD日 HH:mm:ss'){
                    return dayjs(value).format(str)
                },

                // mySlice(value){
                //     return value.slice(0,4)
                // }
            }
        })


        new Vue({
            el:'#root2',
            data:{
                msg: 'hello,world',
            }
        })

    </script>
</body>

</html>

内置指令

v-text指令

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>{{name}}</div>
        <div v-text="name"></div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'hello',
            },
        })

    </script>
</body>

在这里插入图片描述

v-html指令

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <div>{{name}}</div>
        <div v-html="str"></div>
       
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                name: 'hello',
                str:' <h3>你好</h3>'
            },
        })

    </script>
</body>

在这里插入图片描述

v-once指令

<body>
    <!-- 
    v-once指令:
        1.v-once所在节点在初次动态渲染后，就视为静态内容了。
        2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
     -->
        
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-once>初始化的n值是{{n}}</h2>

        <h2>当前的n值是{{n}}</h2>

        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                n:1,

            },
        })

    </script>
</body>

v-pre指令

<body>
    <!-- 
        V-pre指令:
        1.跳过其所在节点的编译过程。
        2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点，会加快编译。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2 v-pre>hello world</h2>

        <h2 v-pre>当前的n值是{{n}}</h2>

        <button @click="n++">点我n+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                n: 1,

            },
        })

    </script>
</body>

v-cloak指令

<div id="app" v-cloak>  
  {{ message }}  
</div>

当 Vue 实例开始编译时，它会移除所有元素的 v-cloak 属性。因此，一旦 Vue 完成编译，[v-cloak] 选择器将不再匹配任何元素，这些元素将变得可见。这确保了用户不会看到未编译的模板。

自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>
    <!-- 需求1:定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
        需求2:定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点 
        -->
        
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前值是: <span v-text="n"></span></h2>
        <h2>放大10倍后n的值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n加1</button>

        <hr>

        <input type="text" v-bind:value="n"><br><br>
        <input type="text" v-fbind:value="n">

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            data: {
                n: 1,

            },
            directives:{
                //big函数何时会被调用？
                // 1， 指令与元素成功绑定时
                // 2, 指令所在的模板被重新解析时

                big(element, binding){
                    //element       =>      <span> </span>
                    //binding.value =>          n
                    element.innerText = binding.value * 10
                },
                

                fbind:{
                    //指令与元素成功绑定时调用
                    bind(element, binding){
                        element.value = binding.value
                    },
                    // 指令所在元素被插入页面时
                    inserted(element, binding){
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element, binding){
                        element.value = binding.value
                    }
                }
            }
        })

    </script>
</body>

</html>

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

生命周期

引出生命周期

生命周期:

1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm或组件实例对象。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>

    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity:opacity}">hello, world</h2>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
               a:false,
               opacity:1,
            },

            methods: {
                // change() {
                //     setInterval(() => {
                //         this.opacity -= 0.01
                //         if (this.opacity <= 0) { this.opacity = 1 }
                //     }, 16);
                // }
            },

            // Vue完成模板的解析并把真实的DOM元素放入页面后（挂在完毕），调用mountd
            mounted() {
                setInterval(() => {
                        this.opacity -= 0.01
                        if (this.opacity <= 0) { this.opacity = 1 }
                    }, 16);



                setTimeout(() => {
                    this.a = true
                }, 2000);
            },
        })

        //通过外部的定时器实现， 不推荐
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if(vm.opacity <= 0) {vm.opacity = 1}
        // }, 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">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        new Vue({
            el: '#root',
            template:` <div>
                <h2>当前值是: <span v-text="n"></span></h2>
                <button @click="add">点我n加1</button>
                <button @click="bye">点我销毁vm</button>
                </div>`,
            data: {
                n:1,

            },
            methods: {
                add(){
                    this.n++
                },
                bye(){
                    this.$destroy()
                    console.log('销毁');
                    
                }
            },
            watch:{
                n(){
                    console.log('n 变了');
                    
                }
            },

            // 挂载流程

            beforeCreate() {
                //初始化：生命周期、事件、但数据代理还未开始，
                //此时无法通过vm访问到data中的数据，methods中的方法
                console.log('beforeCreate');
                // console.log(this);

            },
            created() {
                //初始化：数据监测、数据代理
                //此时可以通过vm访问到data中的数据，methods中的配置方法
                console.log('created');
                // console.log(this);
            },

            // vm.$mount(#root)

            beforeMount() {
                //此时页面呈现的是未经过Vue编译的DOM结构，所有的Dom的操作最终都不奏效
                console.log('mount');
                // console.log(this);
            },

            mounted() {
                //此时，页面中呈现的是经过Vue编译的DOM， 对dom的操作均有效
                // 一般在此进行： 开启定时器，发送网络请求， 订阅消息， 绑定自定义事件等初始化操作
                // console.log('mounted', this.$el);
                console.log('mounted')
                
            },


            // 更新流程
            beforeUpdate() {
                //此时，数据是新的，但页面是旧的
                console.log('beforeUpdate');
                // console.log(this.n);
            },

            updated() {
                //此时数据是新的，页面也是新的
                console.log('Updated');
                // console.log(this.n);
            },

            beforeDestroy() {
                // 此时vm中所有的data， methods、指令等等，都处于可用状态
                //马上要执行销毁过程
                //一般此阶段，关闭定时器，取消订阅消息、解绑自定义事件等收尾工作
                console.log('beforeDestroy');
                

            },
            destroyed() {
                console.log('destroyed');
                
            },



        })

    </script>
</body>

</html>

总结生命周期

常用的生命周期钩子:

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效,但原生DOM事件依然有效。

3.一般不会再beforeDestroy操作数据,因为即便操作数据，也不会再触发更新流程了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>Document</title>
</head>

<body>

  
    <div id="root">
        <h2 v-if="a">你好啊</h2>
        <h2 :style="{opacity:opacity}">hello, world</h2>
        <button @click="stop">点我停止变换</button>
        <button @click="opacity =  1">点我透明度变 1</button>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                a: false,
                opacity: 1,
                timer:0,
            },
            methods: {
                stop(){
                    this.$destroy()
                   
                }
            },

            // Vue完成模板的解析并把真实的DOM元素放入页面后（挂在完毕），调用mountd
            mounted() {
                this.timer = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0) { this.opacity = 1 }
                }, 16);



                setTimeout(() => {
                    this.a = true
                }, 8000);
            },

            beforeDestroy() {
                 clearInterval(this.timer)
            },
        })

    </script>
</body>

</html>

浏览器本地存储

localStorage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>localStorage</title>
  </head>
  <body>
    <h2>localStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>

    <button onclick="readData()">点我读取一个数据</button>

    <button onclick="deleteData()">点我删除一个数据</button>

    <button onclick="deleteAllData()">点我清空数据</button>

    <script>
      let p = { name: "jack", age: 18 };
      function saveData() {
        window.localStorage.setItem("msg", "hello");
        window.localStorage.setItem("person", JSON.stringify(p));
      }

      function readData() {
        const result = localStorage.getItem("person");
        console.log(JSON.parse(result));
      }

      function deleteData() {
        localStorage.removeItem("msg");
      }

      function deleteAllData() {
        localStorage.clear();
      }
    </script>
  </body>
</html>

sessionStorage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sessionStorage</title>
  </head>
  <body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>

    <button onclick="readData()">点我读取一个数据</button>

    <button onclick="deleteData()">点我删除一个数据</button>

    <button onclick="deleteAllData()">点我清空数据</button>

    <script>
      let p = { name: "jack", age: 18 };
      function saveData() {
        window.sessionStorage.setItem("msg", "hello");
        window.sessionStorage.setItem("person", JSON.stringify(p));
      }

      function readData() {
        const result = sessionStorage.getItem("person");
        console.log(JSON.parse(result));
      }

      function deleteData() {
        sessionStorage.removeItem("msg");
      }

      function deleteAllData() {
        sessionStorage.clear();
      }
    </script>
  </body>
</html>

localStorage

点我保存一个数据

<button onclick="readData()">点我读取一个数据</button>

<button onclick="deleteData()">点我删除一个数据</button>

<button onclick="deleteAllData()">点我清空数据</button>

<script>
  let p = { name: "jack", age: 18 };
  function saveData() {
    window.localStorage.setItem("msg", "hello");
    window.localStorage.setItem("person", JSON.stringify(p));
  }

  function readData() {
    const result = localStorage.getItem("person");
    console.log(JSON.parse(result));
  }

  function deleteData() {
    localStorage.removeItem("msg");
  }

  function deleteAllData() {
    localStorage.clear();
  }
</script>




## sessionStorage

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sessionStorage</title>
  </head>
  <body>
    <h2>sessionStorage</h2>
    <button onclick="saveData()">点我保存一个数据</button>

    <button onclick="readData()">点我读取一个数据</button>

    <button onclick="deleteData()">点我删除一个数据</button>

    <button onclick="deleteAllData()">点我清空数据</button>

    <script>
      let p = { name: "jack", age: 18 };
      function saveData() {
        window.sessionStorage.setItem("msg", "hello");
        window.sessionStorage.setItem("person", JSON.stringify(p));
      }

      function readData() {
        const result = sessionStorage.getItem("person");
        console.log(JSON.parse(result));
      }

      function deleteData() {
        sessionStorage.removeItem("msg");
      }

      function deleteAllData() {
        sessionStorage.clear();
      }
    </script>
  </body>
</html>