Vue笔记

最新推荐文章于 2024-05-07 19:36:48 发布

aoassa

最新推荐文章于 2024-05-07 19:36:48 发布

阅读量66

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_66201697/article/details/129335840

版权

vue简介：

动态构建用户界面的渐进式JavaScript框架。

vue的特点：

遵循MVVVM模式
编辑简洁，体积小，运行效率高，适合移动/PC端开发
它只关注UI，可以引入其它第三方开发项目

与其它JS框架的关联：

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

vue周边库：

vue-cli：vue脚手架
vue-resource
axios
xue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库

MVVM模型：

M：模型（Model），data中的数据
V：视图（View），模板代码
VM：视图模型（ViewMode），Vue实例

<body>
    <div id="app">
        <!-- {{}}为输出某个变量的值 -->
        <p>{{msg}}</p>
    </div>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el:"#app",//找到某个盒子，并把他交给vue管理。值一般用id选择器
            data: {//vue里放数据的地方，可以输出这个变量的值
                msg:'生气'
            }
        })
    </script>
</body>

v-on的使用：

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

<body>
    <div id="app">
        <!-- 点击显示 -->
        <button v-on:click="fn1">点我啊</button>
        <!-- 双击显示 -->
        <button v-on:dblclick="fn2">芜湖</button>
        <!-- 移动显示 -->
        <button v-on:mouseenter="fn3">靓仔</button>
        <h1>以下是简写</h1>
        <button @click="fn1">点我啊</button>
        <button @dblclick="fn2">芜湖</button>
        <button @mouseenter="fn3">靓仔</button>


    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            methods: {
                fn1(){
                    alert('你干嘛...哎呦')
                },
                fn2(){
                    alert('起飞')
                },
                fn3(){
                    alert('吊毛')
                }
                
            }
        })
    </script>
</body>

v-show:

本质上就是标签display设置为none，控制隐藏，只是基于css进行切换
v-show有更高的初始值切换
v-sho适合频繁的切换

<body>
    <div id="app">

        <!-- 火锅，下馆子，辣条 -->
        <h3>根据班长有多少钱，决定中午吃什么</h3>
        <div v-show="money >=10000">海鲜</div>
        <div v-show="money >=5000">火锅</div>
        <div v-show="money >=1000">下馆子</div>
        <div v-show="money >=100">辣条</div>
        <div v-show>吃土</div>

    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                money:8000,
            }
        })
    </script>
</body>

v-if：

动态的向DOM树内添加或删除DOM元素
v-if有更高的消耗切换
v-if适合运行条件很少改变的情况

<body>
    <div id="app">
        <!-- 多分支 -->
        <h3>根据班长有多少钱，决定中午吃什么</h3>
        <div v-if="money >=10000">海鲜</div>
        <div v-else-if="money >=5000">火锅</div>
        <div v-else-if="money >=1000">下馆子</div>
        <div v-else-if="money >=100">辣条</div>
        <div v-else>吃土</div>
        <!-- 火锅 -->
        
        <hr>
        <!-- 双分支 -->
        <div v-if="age >=18">去网吧通宵</div>
        <div v-else>回家种田</div>
        <!-- 去网吧通宵 -->
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                money:8000,
                age:23
            }
        })
    </script>
</body>

v-for的使用：

v-for用于遍历某个数组或对象
使用v-for时需要注意，由于v-for会尝试最大限度的使用复数元素，导致绑定错乱，这是可以在v-for后面加上key属性，key绑定这个数据的唯一值（一般为id）

<body>
    <div id="app">

        <!-- 在数组下标为1的位置添加元素 -->
        
        <button @click="list.splice(1,0,{id:4,name:'老六'})">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                <input type="checkbox">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <script src="../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data :{
                list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'},
                ]
            }
        })
    </script>
</body>

修饰符：

修饰符 (Modifiers)： 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

常见的修饰符有：

lazy：不会即时把输入框中的内容添加到data中
trim：屏蔽空格
number：把string字符转换成number数字

侦听器：

作用：由于侦听数据有没有发生变化，一旦有变化就调用函数
语法：在和data，methods这些平级位置写一个watch

侦听器的基本使用：

newValue：变化后的数据
oldValue：变化之前的数据

侦听器在对象中的使用：

普通写法侦听不到对象内部属性的变化，只能侦听到对象指向的变化
如果想要侦听到对象里属性的变化，可以在对象名添加引号
如果希望侦听到对象里所有属性的变化，就要开启深度监听（deep：true）
让页面一打开就立即调用handler函数，true表示立即调用（immediate：true）

侦听器在数组中的使用：

彻底替换成一个新数组，那么可以侦听到
如果使用push（）等标准的数组操作方法，那么可以被侦听到
如果直接修改数组的元素，那么无法被侦听到

<!--
    【对数组进行侦听】
    数组是引用类型，存在比较复杂的侦听规则。
    从理论上说，修改一个数组的内容，比如修改数组中某个元素的值，或者给数组添加新元素，都不会修改数组数组本身的地址。
    为此，Vue.js对数组做了特殊处理，使得使用标准的数组操作方法对数组所做的修改，都可以被侦听到。

    1.Vue不能检测以下数组的变动：
    a.当你利用索引值直接设置一个数组时，例如： vm.items[indexOdItem] = newValue。
    b.当你修改数组的长度时，例如： vm.items.length = newLength

    2.使用标准方法修改数组可以被侦听到
    push() 尾部添加
    pop() 尾部删除
    unshift() 头部添加
    shift() 头部删除
    splice() 删除、添加、替换
    sort() 排序
    reverse() 逆序
    (Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发属视图更新，以上就是被包裹的方法。) 
-->

    <div id="app">
        <button @click="list.push('电王')">添加</button>
        <button @click="list.pop()">删除</button>
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data: {
                list:['空我','亚极陀','响鬼','甲斗']
            },
            watch: {
                //复杂数据类型，这两个参数没有意义，因为地址没有变。
                //所以复杂类型中，一般不会写这两个参数，因为这两个参数的值是一样的，所以写一个就行了
                list(newValue,oldValue){
                    console.log('数组改变了',newValue,oldValue);
                }
            }
        })
    </script>

事件对象：

<script>
        // 用户界面事件：涉及与BOM交互的通用浏览器事件
        // load事件：在整个页面(包括所有外部资源如图片，JavaScript文件和css文件)加载完成后触发
        window.onload = function(){
            alert("页面加载完成")
        };
        
        // 焦点事件：在元素获得或失去焦点时触发事件
        window.onfocus = function(){
            alert("获得焦点");
        }
        window.onblur = function(){
            alert("失去焦点");
        }
        // 鼠标事件：使用鼠标在页面上执行某些操作时触发的事件
        window.onclick = function(){
            alert("鼠标点击");
        }
        // 滚轮事件：使用鼠标滚轮时触发的事件
        window.onwheel = function(){
            alert("滚轮")
        }
        // 输入事件：向文档中输入文本时触发的事件
        window.oninput = function(){
            alert("输入")
        }
        // 键盘事件：使用键盘在页面上执行某些操作时触发的事件
        window.onkeydown = function(){
            alert("按下键盘");
        }
    </script>

事件修饰符：

<!-- 
    事件修饰符
    event.preventDefault()/阻止默认行为或者event.stopPropogation()/阻止事件冒泡
    以上方法需要处理DOM事件细节，代码繁琐
    为了解决这个问题，Vue.js提供了事件修饰符
    修饰符是点开头的指令后缀来表示的
     -->

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

     <!-- .self当事件目标是当前元素自身时，触发事件 -->
     <ul @click.self="ulclick"></ul>

     <!-- .caputer将原本默认的冒泡方式改为捕捉方式 -->

     <!-- .prevent阻止事件默认行为 -->
     <!-- @submit.prevent提交事件不再重载页面 -->
     <form v-on:submit.prevent="onSubmit"></form>

     <!-- .stop.prevent修饰符可以串联，即阻止事件冒泡，有阻止默认行为 -->
     <a v-on:click.stop.prevent="doThat"></a>

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

计算属性：

可以在里面可以写一些计算逻辑的属性
它不像普通函数那样直接返回结果，而是经过一系列计算之后在返回结果
同时只要在它当中应用了data中的某个属性，当这个属性发生变化时，计算属性可以探嗅到这些变化，并自动执行
定义：要用的属性不存在，通过已有的计算属性计算得来
使用：在computer对象中定义计算属性，在页面中使用{{方法名}}

计算属性的缓存特性：

第一次调用计算属性时，会产生一个结果，这个结果会被缓存起来，后面每次用这个属性都会从缓存里取
当它的依赖项发生改变，会重新计算得到一个结果，再缓存起来

计算属性的基本使用：

<div id="app">
        <p>原始字符串:{{message}}</p>
        <p>计算反转后的字符串:{{reverseMessage}}</p>
        <p>将字符串转换成小写:{{toLowerCase}}</p>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                message:'ABCDEFG'
            },
            computed:{
                // 计算反转后的字符串
                reverseMessage:function(){
                    // split()//把一个字符串分割成字符串数组
                    // reverse()//颠倒数组中元素的排序
                    // join()//把数组中的所有元素转换为一个字符串
                    return this.message.split('').reverse('').join('')
                },
                toLowerCase(){
                    // substring(from,to)提取字符串中介于两个指定下标之间的字符
                    // toLowerCase()用于把字符串转换为小写
                    // return this.message.substring(0.7).toLowerCase('')
                    return this.message.substring(0,1).toLowerCase('')
               }
            }
        })
    </script>

 <div id="app">
        姓：<input type="text" v-model="lastName"> <br><br>
        名：<input type="text" v-model="fristName"> <br><br>
        全名: <span>{{fullName}}</span><br><br>
        <button @click="btn">修改计算属性的值</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    fristName:'俊杨',
                    lastName:'刘'
                }

            },
            computed:{
                fullName:{
                    // get:获取值时触发
                    // 当有人读取fullName时，get就会调用，且返回值就作为fullName的值
                    get(){
                        return this.lastName + '-' +this.fristName;
                    },
                    // set:设置值时触发
                    // 当计算属性被修改时，调用set
                    set(value){
                        console.log('set',value);
                    }
                }
            },
            methods:{
                btn(){
                    this.fristName = '英俊';
                    this.lastName = '胡'
                } 
            }
        })
    </script>

以对象方式绑定style属性：

 <div id="app">
        <!-- 在行内属性书写样式 -->
        <div style="color: red; font-size: 48px;">我是小黑子</div>

        <!-- 把行内属性改造成对象，以对象方式绑定style属性 -->
        <!-- 外部增加{}，属性值改造成字符串，分号改造成逗号，属性名到对象名的改变 -->
        <div v-bind:style="{color: 'yellow',fontSize: '48px'}">我是小黑子</div>

        <!-- 把属性值改为变量 -->
        <!-- 第一个color是样式名，第二个color是变量名，和data中的变量保持一致 -->
        <div v-bind:style="{color: color,fontSize: fontSize}">我是小黑子</div>

    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                color:'blue',
                fontSize:'96px'
            }

        })
    </script>

以对象方式绑定class属性：

<div id="app">
        <!-- 想要动态的设置class，也是给一个对象 -->
        <!-- 属性名：就是类名 -->
        <!-- 属性值：就是布尔值，如果为true，就代表有这个类名；false：就代表没有 -->
        <div class="box" v-bind:class="{bg:isag}"></div>
        <!-- 点击按钮改变颜色 -->
        <button @click="fn" style="color:red;font-size: 24px;">我黄了</button>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data: {
                isag:false,
                num:0
            },
            methods:{
                fn:function(){
                    if (this.num==0) {
                        this.isag=true;
                        this.num=1;
                    }else{
                        this.isag=false;
                        this.num=0;
                    }
                }
            }
        })
    </script>

vue生命周期：

<div id="xsk">{{msg}}</div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#xsk",
            data: {
                msg:'dsid'
            },
            // 组件实例被创建之初
            beforeCreate() {
                console.log('beforeCreate');
            },
            // 组件实例已经完全创建
            created() {
                console.log('created');
            },
            // 组件挂载之前
            beforeMount() {
                console.log('beforeMount');
            },
            // 组件挂载到实例上去之后
            mounted() {
                console.log('mounted');
            },
            // 组件数据发生变化更新之前
            beforeUpdate() {
                console.log('eforeUpdate');
            },
            // 组件数据更新之后
            updated() {
                console.log('updated');
            },
            // 组件实例销毁之前
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            // 组件实例销毁之后
            destroyed() {
                console.log('destroyed');
            }
        })
    </script>

v-bind：

<div id="app">
        <a href="http://www.baidu.com">百度</a>
        <a v-bind:href="url">淘宝</a>
        <button @click="change" target="_blank">换小米</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data : {
                url:'http://www.taobao.com'
            },
            methods:{
                change(){
                    this.url='http://xiaomi.com'
                }
            }
        })
    </script>

v-model：

<div id="app">
        <button @click="msg='你好'">修改msg的值</button>
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <!-- v-model:获取表单元素或者设置表单元素的值 -->
        <select v-model="fruit">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>
        </select>
        <input type="checkbox" v-model="chk">
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data: {
                msg:'',
                fruit:'',
                chk:true
            }
        })
    </script>

AXIOS：

Axios是一个基于promise的网络请求库，可以用于浏览器和node.js
在终端使用npm install axios下载

axios发送POST请求：

    <!-- AJAX发送post请求
    1.实例化一个请求对象
    2.调用open方法，设置请求方式和请求地址
    3.设置请求头
    4.设置请求完成后回调函数
    5.发送请求 -->

    <!-- get请求传递参数：直接在url地址后拼接，安全性不高
    post请求传递参数：在send()方法里传递 -->

    <script>
    //  1.实例化一个请求对象 
    let xhr = new XMLHttpRequest
    //2.调用open方法，传递请求方法以及请求地址
    xhr.open('post','https://autumnfish.cn/api/user/register')
    //3.设置请求头(固定语法，负责就可以了)
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    //4.设置请求成功后的回调函数
    xhr.onload = function () {
    // console.log(xhr.response);
    let jokes = JSON.parse(xhr.response)
    console.log(jokes);
    }
    // 5.发送请求
    // 请求格式：'key = value'
    xhr.send('username=刘俊杨')
    </script>

axios发送GET请求：

    <!-- 1.实例化一个请求对象
    2.调用open方法，设置请求方式和请求地址
    3.设置请求完成后回调函数
    4.调用send方法，完成请求 -->

    <!-- get传递参数
    语法：url?key=value
    url? key1 = value1&key2 = value2&key3 = value3 -->

    <script>
        // 1.实例化一个请求对象
        let xhr = new XMLHttpRequest

        // 2.调用open方法，设置请求方式和请求地址
        xhr.open('get',"https://autumnfish.cn/api/joke/list?num=10")
        // 3.调用onload方法，设置请求完成后回调函数
        xhr.onload = function() {
            // console.log(xhr.response);

            // xhr.response是服务器响应回来的内容
            // JSON.pares方法是将相应回来的JSON对象转换为普通的js对象

            let jokes = JSON.parse(xhr.response)
            console.log(jokes);
        }
        // 4.调用send方法，完成请求
        xhr.send()
    </script>
</body>