Vue笔记(1)

被猫吃的竹子

已于 2022-08-31 16:03:42 修改

阅读量397

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2022-07-26 12:51:28 首次发布

本文链接：https://blog.csdn.net/qq_18594435/article/details/125992235

本文详细介绍了Vue.js的六大指令，包括内容渲染、属性绑定、事件处理、双向数据绑定和条件渲染。深入探讨了class和style的绑定、事件修饰符、v-model的使用以及v-if和v-for的区别。此外，还讲解了过滤器、侦听器、计算属性以及如何初识Axios，涉及GET和POST请求、async/await和解构赋值等知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.六大指令

1.2 内容渲染指令

<p v-text="content"></p>
<p v-html="htmlContent"></p>
<p>{{ content }}</p>

<p>{{ count +1 }}</p>
<p>{{ showContent?content:"无法展示" }}</p>

注意: 因为 defineProperty 的原因，Vue无法监听到对象新增或删除属性，如果data中有对象属性,且这个属性需要动态添加或删除属性需要使用 Vue.set和Vue.delete

1.3 属性绑定

<input type="text" v-bind:placeholder="tips" />
<input type="text" :placeholder="tips"/>

v-bind:placeholder 可以简写为 :placeholder

1.3.1 class和style的绑定

<!-- 当activeIndex为1时div才拥有 active-div 类 -->
<div :class="{'active-div':activeIndex==1}"></div>

<!-- 使用background-color写为backgroundColor 其他的样式也一样写法 -->
<div :style="{backgroundColor:dynamicStyle.bgcolor}"></div>

<div :class="[classname1,classname2]"></div>

data:{
    classname1: 'main'
    classname2: 'active-main'
}

1.4 事件绑定

<!-- html代码 -->
<div id="app">
    当前值为: {{count}} 
    <input type="button" value="+1" v-on:click="add"/>
    <!-- 也可简写为 @click -->
    <input type="button" value="+1" @click="add"/>
</div>

// JS代码
const vm = new Vue({
    el: "#app",
    data(){
        return {
            count:0
        }
    },
    methods:{
        add(){
            this.count += 1;
        }
    }
});

1.4.1 $event

当需要给事件处理方法传递参数且依然想得到事件对象时可以使用$event

<input type="text" @focus="checkContent(12,$event)" v-model="content"></input>

methods:{
    checkContent(arg1,event){
        // ...
    }
}

1.4.2 事件修饰符

@click.stop="fun" 阻止事件冒泡。 @click.prevent="fun" 阻止默认行为。

<input type="submit" value="submit" @click.prevent="submitSomeData" />

1.4.3 按键修饰符

<!-- .esc就是监听esc  .enter就是监听enter 其他的查文档 -->
<input type="text" @keyup.esc="clearInput" @keyup.enter="confirmInput" />

1.5 双向数据绑定

<select name="city" v-model="city" @change="selectChanged">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
</select>

v-model 实现双向数据绑定，页面可以更新数据，数据修改也会更新页面。

v-model的修饰符:

v-model.number=”” 输入的值会自动转为数字
v-model.trim=”” 自动过滤首尾空格
v-model.lazy=”” 在change时更新数据而不是input时

1.6 条件渲染指令

1.6.1 v-if 和 v-show

v-if和v-show:

区别: v-show只是将要隐藏的内容设置为 display:none; 而v-if则是直接将元素从代码中清除。

建议: 如果需要频繁切换应使用v-show如果只切换一次或几次可以使用v-if

v-if v-else-if v-else 必须出现在同一父元素里。

1.6.2 v-for

<ul>
    <li v-for="(item,index) in contents" :key="item.id">
        {{item.id}} == {{item.content}}
    </li>
</ul>

const vm = new Vue({
    el: "#app",
    data(){
        return {
            contents:[
                {id:1,content:"Hi"},
                {id:2,content:"Hello"},
                {id:3,content:"How are you"}
            ]
        }
    }
});

key的要求:

使用v-for时要求指定key，且值必须唯一
不能使用index作为key，因为index不具备唯一性。
推荐使用item.id因为id与item有绑定关系且唯一。这样不会造成数据紊乱

1.6.3 v-for和v-if

v-for和v-if 不推荐在同一元素上使用，因为v-for优先级高于v-if。所以即使使用了v-if也是在循环之后才进行的隐藏和显示。如果想要实现同样的功能推荐使用计算属性来代替

<ul>
    <li v-for="(item,index) in numbers" :key="item.id" v-if="item.num > 10"></li>
</ul>

<!-- 请使用下面的写法 -->
<ul>
    <li v-for="(item,index) in comNumbers" :key="item.id"></li>
</ul>

computed:{
    comNumbers(){
        return numbers.filter((item)=>{
            return item.num > 10;
        });
    }
}

2.过滤器

2.1 基本使用

使用方式: {{ item.price | toFixed }} 左边的值作为右边的参数，最终显示过滤器的返回结果

{{ item.price | toFixed }}

new Vue({
    el:"#app",
    data:{
        item:{ id:1,name:'Huawei Nova10',price:2900 }
    },
    filters:{
        toFixed(data){
            return data.toFixed(2);
        }
    },
});

2.2 全局过滤器

刚刚的过滤器只存在于它当前的Vue实例中，使用 Vue.filter(name,function(arg){}); 注册全局过滤器。

Vue.filter('toFixed',(arg)=>{
   return arg.toFixed(2); 
});

使用的时候也是一样的 {{ item.price | toFixed }} 如果有重名的过滤器采用就近原则。

2.3 其他用法

串联调用

{{ item.createTime | getTime | formatTime }} 从左到右依次执行

传递参数

{{ item.createTime | getTime('aaaa') }}

filters:{
    getTime(arg1,arg2){
        // 通过管道符传递来的参数永远是第一个
        // arg1 就是 item.createTime
        // arg2 是手动传递来的参数
    }
}

2.4 格式化时间

dayjs是一个用于格式化时间的第三方工具, npm install dayjs -S 安装。并使用 var dayjs = require('dayjs') 引入。

使用CDN引入: <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.4.1/dayjs.min.js"></script>

使用:

dayjs().format(); dayjs()获取当前时间,format()默认格式化
dayjs().format(“YYYY-MM-DD HH:mm:ss”);
dayjs(new Date()).format(); 根据给定的date来格式化

Vue.filter("formatDate",(date)=>{
    return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
});

<td>{{ item.createTime | formatDate }}</td>

3.侦听器

watch 侦听器就是监听数据的变化并作出对应的操作，本质上是一个函数，函数名与数据名一致。

new Vue({
    el:"#app",
    data:{ username:'' },
    watch:{
        username(newVal,oldVal){
            // username变化后执行,newVal是新值,oldVal是旧值
        }
    }
})

3.1 immediate

侦听器不会再进入页面后立刻触发，只有数据改变时才会触发，如果希望页面一进入就触发则需要执行 immediate:true

new Vue({
    el:"#app",
    data:{ username:'' },
    watch:{
        username:{
            handler(newVal,oldVal){
                // 监听器处理函数
            },
            immediate:true
        }
    }
})

3.2 deep

如果监听的是一个对象那么必须指定deep:true

new Vue({
    el:"#app",
    data:{ 
        info:{ username:"" }
    },
    watch:{
        info:{
            handler(newVal,oldVal){
                // 监听器处理函数
            },
            deep:true
        }
    }
})

或直接监听某个属性

watch:{
    info:{
        'info.username'(newVal){
            // 注意这里要用引号引起来，直接监听username属性。 不需要指定deep
        }
    }
}

4.计算属性

计算属性本质上就是属性，只是它是通过一系列计算而得到的值。

new Vue({
    el:"#app",
    data:{
        r:'255',
        g:'0',
        b:'0'
    },
    computed:{
        rgb(){
            return `rgb(${this.r},${this.g},${this.b})`;
        }
    }
});

// 使用
<div :style="backgroundColor:rgb"></div>

5.初识Axios

5.1 第一次使用Axios

安装：

// 1.npm方式
npm install axios

// 2.直接引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

基本语法：

axios({
    method:'请求类型',
    url:''
}).then((res)=>{
    // then指定请求成功后的回调函数
    // res是响应结果，Axios会将返回结果进行封装,真正的响应内容是 res.data其他的属性都是axios的信息
});


axios({
    method: 'GET',
    url: 'https://aa.api/findById/154444'
}).then((res)=>{
    
});

5.2 传递参数

POST请求使用 data 属性传递参数

axios({
    method: 'POST',
    url: 'https://aa.api/addBook',
    data:{
        id:154444,
        name:'孙子兵法'
    }
}).then((res)=>{});

GET请求使用params属性传递参数

axios({
    method: 'GET',
    url: 'https://aa.api/findByName',
    params:{
        name:'孙子兵法'
    }
}).then((res)=>{});

5.3 async/await

如果一个方法返回的是Promise对象它就可以使用await。 await只能用在被async修饰的方法中。

methods:{
    async getBooks(){
        let result = await axios({
            method:'GET',
            url: 'https://aa.api/getBooks'
        });
    }
}

5.4 解构赋值

let {data} = await axios({...}); 就是从返回的对象中直接取出data属性。

let {data:res} = await axios({...}); 取出data属性并重命名为res

methods:{
    async getBooks(){
        let {data:res} = await axios({
            method:'GET',
            url: 'https://aa.api/getBooks'
        });
    }
}

5.5 axios.get()和axios.post()

axios.get('https://aa.api/findByName',{
    params:{
        name:'孙子'
    }
});

axios.post('https://aa.api/addBook',{
    id:157777,
    name:'面纱'
});

暴富，暴富，暴富