vuejs量化知识

最新推荐文章于 2023-03-13 00:07:24 发布

梦里无羡

最新推荐文章于 2023-03-13 00:07:24 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46524280/article/details/123876564

版权

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())