开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vuejs量化知识 -> 正文阅读

[JavaScript知识库]vuejs量化知识

vuejs量化知识

1、邂逅vuejs

1.1、vuejs的特点

解耦视图和数据
可复用的组件
前端的路由技术（vue-route）
状态管理（vue-x）
虚拟DOM

1.2、vue.js的安装

常见的安装的方式

CDN的引入（建议的话使用开发版本）
下载和引入
- 下载地址： https://vuejs.org/v2/guide/installation.html 。
NPM安装
- 后续都是使用这个方式

1.3、初识vue.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
 
</head>
<body>
<div id="app">{{message}}</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>
</body>
</html>

1.4、vue的列表显示(v-for遍历)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的列表显示</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">{{message}}
    <ul>
<!--        对数组进行遍历-->
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script>
    var app =new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            movies:['海贼王','火影忍者','星际穿越','大话西游'],
        }
    })
</script>
</body>
</html>

1.5、计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue案例-计数器</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>当前计数：{{counter}}</h2>
<!--    v-on设置事件-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
<!--    进行函数的绑定-->
    <button v-on:click="add">点击</button>
    <button v-on:click="sub">点击</button>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            counter:0,
        },
        methods:{
            //在methods设置函数，并且也是按照对象的方式进行存储
            add:function (){
                alert("add被执行");
                this.counter++;
            },
            sub:function (){
                console.log("--被执行");
                this.counter--;
            }
        }
    })
</script>
</body>
</html>

1.6、理解vue的mvvm（Model View ViewModel）

vue实例中的添加的属性的属性值的类型

del：
- 类型：Sring||HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM
data：
- 类型：Object（对象类型）|function（函数类型）组件之中data必须是一个函数
- 作用：Vue实例对应的数据对象
methods：
- 类型：{[key：string],function}其放置的一些函数
- 作用：定义属于Vue的一些方法，可以在其他的地方进行使用，也可以在指令中进行调用

方法和函数的区别：

方法：method
函数：function
在类里面的一般称为方法，直接定义的是函数

1.7、Vue的生命周期

生命周期：事物从的诞生到消亡的过程。

vue的生命周期函数：

created：function(){}
mounted:function(){}
beforeCreate:function(){}

1.8、插值操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{method}}</h2>
<!--    通过这种方式进行字符串的拼接-->
    <h2>{{firstName+''+lastName}}</h2>
<!--可以通过此进行简单的数字运算-->
    <h2>{{counter*2}}</h2>
</div>
<script>
    var  app =new Vue({
        el:'#app',
        data:{
            method:'你好世界',
            name:'李四',
            role:'老师',
            lastName:'学工办主任',
            firstName:'bryant',
            counter:100
        }
    })
</script>
</body>
</html>

1.8.1、v-once指令的使用

当指令使用的时候，只会显示最初的数据，当数据发生改变的时候，数据依然显示最原始的数据，不会随之改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once语法的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-once>{{message}}</h2>
    <h2 >{{message}}</h2>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'你好世界'
        }
    })
</script>
</body>
</html>

1.8.2、v-html指令的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once语法的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    通过这个标签进行html代码的接收-->
   <h2 v-html="url"></h2>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'你好世界',
            url:"<a href='http://www.baidu.com'>百度一下</a>"
        }
    })
</script>
</body>
</html>

1.8.3、v-text指令的使用（不常用）

注：一般不推荐使用，容易对拼接的字符串进行覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    通过这个标签进行html代码的接收-->
   <h2 v-html="url"></h2>
<!--    通过v-text来获取数据中的内容,但是一般不使用-->
    <h2 v-text="message"></h2>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'你好世界',
            url:"<a href='http://www.baidu.com'>百度一下</a>"
        }
    })
</script>
</body>
</html>

1.8.4、v-pre标签的使用（不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre标签的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    pre标签的使用,当所接受的数据不需要进行解析的时候采用-->
    <h2 v-pre>{{message}}</h2>
    <h2>{{message}}</h2>

</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'你好世界',
            url:"<a href='http://www.baidu.com'>百度一下</a>"
        }
    })
</script>
</body>
</html>

1.8.5、v-cloak标签的使用（一般不用）

保证所监视的标签部分却ing由vue.js代码部分的运行

1.9、v-bind的使用

对象语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once语法的使用</title>
    <script src="../js/vue.js"></script>
    <style>
        .test{
           color: red;
            font-weight: bolder;
            font-size: 20px;
            font-family: '威雅软黑';
        }
        .test1{
            background-color: black;
        }
    </style>
</head>
<body>
<div id="app">
<!--    v-bind在标签内获取相关的数据-->
    <a v-bind:href="url">点击一下</a>
<!--    简写的方式-->
    <a :href="url">点击一下</a>
<!--    类标签的绑定-->
    <h2 v-bind:class="active">{{message}}</h2>
<!--    通过修改Boolean值来修改class中的值，在进行class的动态获取的时候，我们仍然可以进行class的写定-->
    <h2 v-bind:class="{test:isTest,test1:isTest1}">{{message}}</h2>
    <button v-on:click="bt"></button>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'你好世界',
            url:'http://www.baidu.com',
            active:'test',
            isTest:true,
            isTest1:true,
        },
        methods:{
            bt:function (){
                //进行值的取反
                this.isTest=!this.isTest;
            }
        }

    })
</script>
</body>
</html>

数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once语法的使用</title>
    <script src="../js/vue.js"></script>
    <style>
        .test{
           color: red;
            font-weight: bolder;
            font-size: 20px;
            font-family: '威雅软黑';
        }
        .test1{
            background-color: black;
        }
    </style>
</head>
<body>
<div id="app">
<!--    通过函数的方式，对class进行赋值-->
    <h2 v-bind:class="getClass()">{{message}}</h2>
    <button v-on:click="bt"></button>
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            message:'你好世界',
            url:'http://www.baidu.com',
            isTest:true,
            isTest1:true,
        },
        methods:{
            bt:function (){
                //进行值的取反
                this.isTest=!this.isTest;
            },
            //通过函数的形式，对class推送数组
            getClass:function (){
                //注意：一定要写this，时刻保证自己所取的参数为自己的
                return {test:this.isTest,test1:this.isTest1}
            }
        }
    })
</script>
</body>
</html>

动态绑定样式

对象语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app">
<!--    通过v-bind动态的绑定属性额style的值-->
<!--    <h1 :style="{key:value,key1:value1}">{{message}}</h1>-->
    <h1 :style="{color:size}">{{message}}</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world',
            size:"red",
        }
    })
</script>
</body>
</html>

数组语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app">
<!--    通过数组对标签的样式进行修改-->
    <h1 :style="[baseStyle,baseStyle1]">{{message}}</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'hello world',
            size:"red",
            baseStyle:{
                fontSize:"50px",
                color:"red"
            },
            baseStyle1:{
              backgroundColor:"black"
            }
        }
    })
</script>
</body>
</html >

2、计算属性computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    获取数据时对数据进行处理整合-->
<!--    第一种方法-->
    <h1>{{message+" "+name}}</h1>
<!--    第二种方法-->
    <h1>{{message}} {{name}}</h1>
<!--    第三种方式 通过函数进行整合-->
    <h1>{{realName()}}</h1>
<!--    通过计算属性进行数据整合-->
    <h1>{{fullName}}</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'李',
            name:'四'
        },
        computed:{
            fullName:function (){
                return this.message+" "+this.name;
            }
        },
        methods:{
            realName:function (){
                return this.message+" "+this.name;
            }
        }
    })
</script>
</body>
</html>

复杂操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app">总价：{{num}}</div>
<script>
    new Vue({
        el:'#app',
        data:{
            Books:[
                {name:"算法大全",price:119,author:'张三'},
                {name:"java全解",price:98,author:'张三'},
                {name:"算法导论",price:57,author:'张三'}
            ]
        },
        computed:{
            num:function (){
                var num1=0;
                for (var i=0; i<this.Books.length;i++){
                    num1=num1+this.Books[i].price;
                }
                return num1;
            }
        }
    })
</script>
</body>
</html>

注：在vue中，计算属性（computed）具有缓存，当执行第一次的时候，所产生的结果会存放在内存之中，当再次使用结果的时候直接在内存中读取，但是methods不具有缓存效果，当再次使用数据结果的时候，需要再次执行，效率不高

2.1、计算属性的setter与getter

在computed（计算属性）中存在setter与getter方法

2.2、ES6中常见的一些方法

2.2.1、let/var的使用

在ES6中设立的参数，当设立的参数需要变化的时候我们使用let
当我们设立的参数不进行变化的时候，我们使用const（const的指定的对象，对象是不可以进行修改的，但是对象中的内容可以进行修改）

注：let与var的区别

let具有块级作用域，但是var却不存在。

2.3、事件监听（v-on）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
<!--    v-on的简写-->
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>
<script>
    const appp=new Vue({
        el:'#app',
        data:{
            message:0
        },
        methods:{
            add:function (){
                this.message++;
            },
            sub:function (){
               this.message--;
            }

    }
    })
</script>
</body>
</html>

监听事件的参数的传递

在事件监听的时候，所写的方法如果不需要进行参数的传递，我们可以省掉方法中的小括号。
传参的两种情况：
- 直接传输常量写死
- .传递一个参数，但是参数的值需要在vue实例中的data中进行体现。否则胡报错

v-on修饰符的使用

Vue提供的修饰符
- .stop–调用event。stopPropagation()
- .prevent – 调用 event.preventDefault()
- .{keyCode | keyAlias} --只当事件从特定的建触发时才会回调
- .native – 监听组件根元素的原生事件
- .once – 只触发一次回调。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on的修饰符的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--当给一个元素的与他的父元素一块设置了事件时，当触发子元素的事件活带动父元素的事件一块启动-->
    <div @click="divClick">
<!--        通过修饰符对相关的函数进行叫停-->
        <button @click.stop="btnClick">按钮</button>
    </div><br/>

<!--    .prevent修饰符的使用-->
<!--    屏蔽某些元素自带的事件-->
<!--    例子：input标签的submit具有自己的提交功能，.prevent可以进行屏蔽-->
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="inputClick">
    </form>

<!--    监听键盘的键帽的点击-->
    <input type="text" @keyup="keyUp">

<!--    .once修饰符-->
    <button @click.once="btn2Click">按钮2</button>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello world'
        },
        methods:{
            btnClick:function (){
               alert('你好世界');

            },
            divClick:function (){
                alert('你好世界hhhhhhhh');
            },
            inputClick:function (){
                alert("进行数据的提交");
            },
            keyUp:function (){
                alert("点击了一下");
            },
            btn2Click:function (){
                alert("只能点击一次")
            }
        }
    })
</script>
</body>
</html>

2.4、条件判断、循环

2.4.1、v-if、v-else、v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-if="isAction">{{message}}</h2>
    <h2 v-else>{{message1}}</h2>
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello world',
            message1:'hhhhhh',
            score:85,
            isAction:false
        }
    })
</script>
</body>
</html>

案例：切换登录的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个小案例</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    在进行切换账号进行登录的时候，可以通过属性，来防止其中input标签的复用-->
   <span v-if="isShow">
       <label>账号登录</label>
       <input type="text" placeholder="请输入账号" key="username"/>
   </span>
    <span v-else>
       <label>邮箱登录</label>
       <input type="email" placeholder="请输入邮箱" key="email"/>
   </span>
    <button @click="btn">切换登录方式</button>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            isShow:true
        },
        methods:{
          btn:function (){
              // alert("你好世界");
              this.isShow=!this.isShow
              console.log(this.isShow)
              // alert(this.isShow)
          }
        }
    })
</script>
</body>
</html>

在进行切换账号进行登录的时候，可以通过属性，来防止其中input标签的复用

2.4.2、v-if与v-show的区别

v-if：当v-if的值魏flase时，包含他的元素根本不存在dom之中

v-show：当v-show的值魏flase时，包含他的元素只是添加了一个行内的样式，将包含他的元素给隐藏起来了。

当需要切换的频率很高的时候，我们采用v-show，当频率不高的时候，我们采用v-if

2.4.3、v-for

官方推荐：当我们在使用v-for的时候我们尽量给相关的标签添加一个:key的属性，使其更好的复用。

常用的方法

push往数组之中存放数据
pop删除一个数组中的最后一个数据
shift删除数组中的第一个数据
unshift，在数组最前面添加元素（可以同时添加多个元素）
splice():删除元素、插入元素、替换元素
- 删除元素：第二个参数传入的是你要删除几个元素
对数组进行赋值，在vue中自带的vue.set（this.name,‘index’,‘value’）

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个案例</title>
    <script src="../js/vue.js"></script>
</head>
<style>
    .test1{
        color: red;
    }
</style>
<body>
<div id="app">
    <ul>
        <li v-bind:class="{test1:currentIndex===index}" v-for="(item,index) in message" @click="test(index)">{{item}}</li>
    </ul>
</div>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            message:['猫和老鼠','舒克贝塔','黑猫警长','火影忍者'],
            currentIndex: 0,
        },
        methods:{
            test:function (index){
                this.currentIndex=index;
            }
        }
    })
</script>
</body>
</html>

2.4.4、图书购买系统

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link type="text/css" href="index.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div v-if="books.length>0">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.data}}</td>
                <!--            使用过滤器-->
                <td>{{item.price | filterBefore}}</td>
                <td>
                    <button @click="disincress(index)" v-bind:disabled="item.count<=1">-</button>
                    {{item.count}}
                    <button @click="incress(index)">+</button>
                </td>
                <td>
                    <button @click="remove(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <h3>总价:{{totalPrice | filterBefore}}</h3>
    </div>
    <div v-else>
        <h1>购物车空空如也，快去看看吧！！！！</h1>
    </div>


</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

css

table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}
th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}

const app=new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                name:'算法导论',
                data:'2006-9',
                price:85,
                count:1
            },
            {
                id:2,
                name:'UNIX编程艺术',
                data:'2006-2',
                price: 55.00,
                count:1
            },
            {
                id:3,
                name:'代码大全',
                data:'2006-3',
                price: 128.00,
                count:1
            }
        ]
    },
    //过滤器，可以自动传参数，
    filters:{
        filterBefore:function (price){
            return "￥"+price.toFixed(2);
        }
    },
    //函数、方法
    methods:{
        //通过下边对数组内的内容进行修改
        disincress:function (index){
            let  i=this.books[index].count
            this.books[index].count=i-1
        },
        incress:function (index){
            let  i=this.books[index].count
            this.books[index].count=i+1
        },
        remove:function (index){
            // alert('进入了这个方法');
            this.books.splice(index,1);
        }
    },
    //计算属性
    computed:{
      totalPrice:function (){
          let totalPrice=0;
          for (let i=0; i<this.books.length;i++){
               let num =this.books[i].count * this.books[i].price;
               totalPrice=totalPrice+num;
          }
          return totalPrice;
      }
    }
})

当全部移除之后呈现一下的情况

2.5、v-model表单绑定(是一个双向绑定)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model的使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        }
    })
</script>
</body>
</html>

2.5.1、v-model结合radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model与radio的结合</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
        <label for="man">
            <input type="radio" id="man" name="sex" value="男" v-model="sex"/>男
        </label>
    <label for="woman">
        <input type="radio" id="woman" name="sex" v-model="sex" value="女"/>女
    </label>
    <h1>您的性别是：{{sex}}</h1>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好世界',
            sex:''
        }
    })
</script>
</body>
</html>

2.5.2、v-model与checkbox的结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model与checkbox结合</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--checkbox单选-->
    <label for="test1">
        <input type="checkbox" id="test1" value="同意协议" v-model="agree" >同意协议
    </label>
    <h2>你选择的是{{agree}}</h2>
    <button v-bind:disabled="!agree">下一步</button>

<!--    多选框-->
        <input type="checkbox" value="篮球" v-model="hobbyes">篮球
        <input type="checkbox" value="足球" v-model="hobbyes">足球
        <input type="checkbox" value="乒乓球" v-model="hobbyes">乒乓球
        <input type="checkbox" value="排球" v-model="hobbyes">排球
    <h1>你选择的爱好是{{hobbyes}}</h1>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello world',
            agree:false,
            //注意采用数组的形式进行接收
            hobbyes:[]
        }
    })
</script>
</body>
</html>

注：在进行多选框的数据存储的时候，一定要采用数组的形式进行数据的接收

2.5.3、v-model与select的结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model与select结合</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    选择一个-->
    <select name="abc"  v-model="fruit">
        <option value="苹果" >苹果</option>
        <option value="香蕉" >香蕉</option>
        <option value="留恋" >榴莲</option>
        <option value="葡萄" >葡萄</option>
    </select>
    <h1>您选择的说过是:{{fruit}}</h1>

<!--    多选-->
    <select name="abc"  v-model="fruits" multiple>
        <option value="苹果" >苹果</option>
        <option value="香蕉" >香蕉</option>
        <option value="留恋" >榴莲</option>
        <option value="葡萄" >葡萄</option>
    </select>
    <h1>您选择的说过是:{{fruits}}</h1>
</div>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello world',
            fruit:"香蕉",
            fruits:[]
        }
    })
</script>
</body>
</html>

修饰符

lazy:在进行值的双向绑定的时候，当input的焦点失去的时候才会有值的互换。
number:默认v-model输入的值都是String类型
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r5IkQdYB-1648715189976)(…/AppData/Roaming/Typora/typora-user-images/image-20220215102937895.png)]
trim：v-model.trim去掉空格

2、组件化开发

2.1、组件化的基本使用

组件化的使用必须是在vue实例的范围之内

作用，可以很大程度的提高代码的复用

创建组件构造器对象
注册组件
使用组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <test></test>
</div>
<script>
<!--    创建组件的构造器-->
    const cpnC=Vue.extend({
        template:
            "<div>" +
                "<h1>我是标题</h1>" +
                "<p>我是内容111111</p>"+
                "<p>我是内容222222</p>"+
            "</div>"

    });
    //注册组件
    Vue.component('test',cpnC)
    const app=new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>
</body>
</html>

2.2、全局组件和局部组件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>注册组件的语法糖简写</title>
   <script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div id="app">
   <cpn1></cpn1>
   <cpn2></cpn2>
</div>
<script>
<!--    全局作用与的组件的简写-->
Vue.component('cpn1',{
    template:"<div>" +
        "<h1>我是全局作用域的标题</h1>" +
        "<p>我是内容</p>"+
        "</div>"
})
//局部作用域的组件的简写
const app=new Vue({
   el:'#app',
   components:{
       'cpn2':{
           template: "<div>" +
               "<h1>我是局部作用域的标题</h1>" +
               "<p>这是内容1111111</p>"+
               "</div>"
       }
   }
})
</script>
</body>
</html>

2.3、组件模板抽离的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件模板抽离方法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <my-cpn></my-cpn>
</div>
<template id="cpn2">
    <div>
        <h1>我是标题</h1>
        <p>我是内容1111222</p>
    </div>
</template>
<script type="text/x-template" id="cpn1">
<div>
    <h1>我是标题</h1>
    <p>我是内容1111111</p>
</div>
</script>

<script>
    Vue.component('cpn',{
        template:"#cpn2",
    })
    const app=new Vue({
        el:'#app',
        components:{
            'my-cpn':{
                template: '#cpn'
            }
        }
    })
</script>
</body>
</html>

2.4、组件数据的获取

注：在vue中，组件时一个独立的模块，组件中的数据无法直接在vue的实例之中直接获取。

组件数据的存放的位置

组件对象也有一个data属性（也可以有methods属性）
只是这个data属性必须是一个函数
而且这个函数返回类型是一个对象，对象内部保存着数据

2.4.1、组件中的data为什么必须是函数

注：因为组件的存在可以使代码进行多次的复用，如果直接对data中写入数据时，会产生组件之间的数据的相互的影响，但是通过函数来解决，则会避免这个问题，通过函数进行数据的返回，类似于在内存中开辟一个新的地址，之后各个值之间互不影响

2.5、父子组件通信，父传子（props）

父级向子级元素传递数据的方式

通过props向子组件传递数据
通过时间进行数据的传递

props数据验证的类型

String
Number
Boolean
Array
Object
Date
Function
Symbol

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父级向子级进行数据传输</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <cpn v-bind:cmmessage="message" v-bind:cmmoves="moves"></cpn>
</div>
<div id="app1">
    <cpn1 v-bind:cmmoves1="moves1"></cpn1>
</div>
<template id="test">
    <div>
        {{cmmessage}}
        <ul>
            <li v-for="item in cmmoves">{{item}}</li>
        </ul>
    </div>
</template>

<template id="test1">
    <ul >
        <li v-for="item1 in cmmoves1">{{item1}}</li>
    </ul>
</template>
<script>
<!--    常见的写法-->
    const ctn={
        template: '#test',
        //对数据类型进行相应的限制
        props:{
            cmmessage:String,
            cmmoves:Array
        }
    }

    //进行设置默认值
    const ctn1={
        template: '#test1',
        props:{
            cmmessage1:{
              type:String,
              //  设置默认值
              default:'aaa',
              //  设为必须传入参数
              required:true
            },
            cmmoves1:{
                //设置数据类型
                type:Array,
                //default: []  //在vue的2.5.17以上的版本这个写法格式胡出现错误
                // default: function (){
                //     return [];
                // }
            }
        }
    }

    const app=new Vue({
        el:'#app',
        data:{
          message:'你好世界',
          moves:['海贼王','火影忍者','七龙珠','不良人','魔道祖师'],
        },
        components:{
            'cpn':ctn,
            'cpn1':ctn1
        }
    })

const app1=new Vue({
    el:'#app1',
    data:{
        moves1:['天龙八部','射雕英雄传','神雕侠侣'],
    },
    components:{
        'cpn1':ctn1
    }
})
</script>
</body>
</html>

props驼峰标识

在进行v-bind绑定的时候，在vue中式不支持驼峰标识的

解决方式：在大写字母前边通过-进行连接，之后大写字母改成小写字母

子级向父级传输数据（需要进行自定义事件）****$(emit)进行传输

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件向父级组件传输</title>
    <script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<!--    在自己进行自定义函数的时候，函数的名字一定要与$emit中的设定的函数名字一样-->
    <hello @submites1="submites2"></hello>
</div>
<!--设置组件-->
<template id="test1s">
    <div>
        <h1>11111</h1>
        <button @click="submites(item)" v-for="item in books">{{item.name}}</button>
    </div>
</template>
<script>
    const ct={
    template:'#test1s',
    //    组件中的数据必须是一个函数
    data:function (){
        return{
            books:[
                {
                    id:111,
                    name:'古代史学文书'
                },
                {
                    id:222,
                    name:"现代史学文书"
                },
                {
                    id:333,
                    name:'道家文化'
                },
                {
                    id:444,
                    name:'儒家文化'
                }
            ]
        }
    },
    methods:{
        submites:function (item){
            // alert("点击的按钮式"+item)
            //用过$emit来进行参数的传递和函数的反射
            this.$emit("submites1",item)
        }
    }
}
    const app=new Vue({
        el:'#app',
        //进行组件注册
        components:{
            'hello':ct
        },
        //创建函数
        methods: {
            submites2:function (item){
                console.log("所接收的数据是"+item)
                console.log(this.submites2)
            }
        }
    })

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

2.6、父子组件通信，结合双向绑定

2.7、js模块化即调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js模块化</title>
</head>
<body>
<!--为避免在引用多个js文件时，js文件中设定的参数重复而引发的问题，我们采用将js代码模块化-->
<!--通过设定type的类型，将索引入的js的文件设为独立的模块,type的类型一定得是module-->
<script type="module" src="./aa.js"></script>
<script type="module" src="./bb.js"></script>
</body>
</html>

aa.js 内容的导出

//通过export直接将函数getSum进行导出，保证该函数在其他的js文件中仍然可以被调用
export function getSum(sum,sum1){
    return sum+sum1;
}
export let name="小明"

//通过export对aa.js文件中所设的的函数进行以对象的当时进行导出


let name1="小李"
function getSum1(num1,num2){
    return num1*num2;
}
export {name1,getSum1}


export class parent{
    run(){
        alert("小王跑步得了一个第一")
    }
}

bb.js内容的导入

//对aa.js文件中导出的函数进行调用
import {getSum,name} from "./aa.js";
//对函数进行相应的调用
// alert(getSum(10,20))
console.log(getSum(10, 20));
//对设定的参数进行相应的调用
// alert(name)
console.log(name);


//都如export一对象的形式导出的相关的函数
import {name1,getSum1} from "./aa.js";
// alert(name1)
// alert(getSum1(10,20))

//当我们导出的参数和函数的数量非常多的时候我们通过*来代替所有的函数和参数通过as来对导入的对象进行封装
import * as aaa from "./aa.js"  //在进行导入其他的js文件的时候建议将其他js文件的文件的名称写全，文件后缀一丁要加上
alert(aaa.getSum1(20,30));
alert(aaa.name1)
let parent =new aaa.parent()
alert(parent.run())

3、脚手架

3.1、简介

vue的一种架构

4、路由

4.1、路由的搭建框架

下载router插件
```
npm install router --save
```
查看是否下载成功package.json
在src目录下创建router目录并在里面书写index.js文件

在index.js文件中进行相关的配置并进行导出

//配置路由相关的路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Vue from 'vue'
//通过Vue.use来安装插件
Vue.use(VueRouter)
//创建路由对象
const routers=[];
// eslint-disable-next-line no-unused-vars
const router =new VueRouter({
    //在其中配置映射关系
    routers:routers
})
//讲router挂在到vue实例中
// 进行导出
export {router}

在mian.js文件中的vue实例中进行配置

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip=false
new Vue({
    el:'#app',
    router:router,
    render:h =>h(App)
})

export {name1,getSum1}

export class parent{
run(){
alert(“小王跑步得了一个第一”)
}
}


**bb.js内容的导入**

```js
//对aa.js文件中导出的函数进行调用
import {getSum,name} from "./aa.js";
//对函数进行相应的调用
// alert(getSum(10,20))
console.log(getSum(10, 20));
//对设定的参数进行相应的调用
// alert(name)
console.log(name);


//都如export一对象的形式导出的相关的函数
import {name1,getSum1} from "./aa.js";
// alert(name1)
// alert(getSum1(10,20))

//当我们导出的参数和函数的数量非常多的时候我们通过*来代替所有的函数和参数通过as来对导入的对象进行封装
import * as aaa from "./aa.js"  //在进行导入其他的js文件的时候建议将其他js文件的文件的名称写全，文件后缀一丁要加上
alert(aaa.getSum1(20,30));
alert(aaa.name1)
let parent =new aaa.parent()
alert(parent.run())

3、脚手架

3.1、简介

vue的一种架构

4、路由

4.1、路由的搭建框架

下载router插件
```
npm install router --save
```
查看是否下载成功package.json

[外链图片转存中…(img-caho3uAR-1648715189978)]
在src目录下创建router目录并在里面书写index.js文件

[外链图片转存中…(img-Fs3AQ1PR-1648715189979)]

在index.js文件中进行相关的配置并进行导出

//配置路由相关的路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Vue from 'vue'
//通过Vue.use来安装插件
Vue.use(VueRouter)
//创建路由对象
const routers=[];
// eslint-disable-next-line no-unused-vars
const router =new VueRouter({
    //在其中配置映射关系
    routers:routers
})
//讲router挂在到vue实例中
// 进行导出
export {router}

在mian.js文件中的vue实例中进行配置

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip=false
new Vue({
    el:'#app',
    router:router,
    render:h =>h(App)
})

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2022-04-01 23:16:14 更:2022-04-01 23:18:49

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 4:23:33-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码