vue开发快捷键的总结

Posted 2023-03-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue开发快捷键的总结相关的知识，希望对你有一定的参考价值。

参考技术A Ctrl + ` 打开默认终端;

Ctrl + Shift + ` 新建新的终端;

Ctrl + Shift + Y 打开调试控制台,然后再自行切换终端选项;

vue系统总结1

整体目录:

插值操作

绑定属性

计算属性

事件监听

条件判断

循环遍历

阶段案例

v-model

1.1ES6的基本使用

块级作用域:js中使用var 来声明一个变量时,变量的作用域主要是和函数的定义有关

建议:在ES6开发中,优先使用const 只有需要改变某一个标识符的时候才使用let

1.2Mustache语法:

操作中用到快捷键:

alt+B 在默认浏览器打开

fn+f12 打开浏览器调试窗口

alt+f4 关闭当前浏览器

alt + tab 快速切换页面

ctrl+ S 保存vscode中代码

ctrl+ R 重新载入新的代码(刷新)

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}},王</h2>
    <h2>{{firstName + \' \' +lastName}}</h2>
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{counter*16}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            message:\'你好啊\',
            firstName: \'kobe\',
            lastName: \'btyant\',
            counter: \'200\'
        }
    })

</script>

v-once

该指令后面不需要跟任何表达式,比如之前v-for后面是有表达式的

该指令表示元素和组件只会渲染一次,不会随着数据的改变而改变

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

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data:{
            message: \'你好啊\'
        }
    })
</script>

2.1v-html

使用v-html指令后面跟上一个string类型,会将string的html解析出来并且进行渲染

2,2v-text

作用和Mustache一致

通常情况下,接收一个string类型

2.3v-pre

用于跳过这个元素和它子元素的编译过程,用于显示原本Mustache语法

2.4v-cloak

在某些情况下浏览器可能会直接显示出未编译的Mustache标签

3.1 v-bind绑定基本属性

动态绑定a元素的href属性

动态绑定img元素的src属性

<div id="app">
    <img :src="imgURL" alt="">
    <br>
    <a :href="aHref">百度一下</a>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            message: \'你好啊\',
            imgURL: \'https://img10.360buyimg.com/pop/s590x470_jfs/t1/200486/28/1541/87728/610b8395E9ff1b349/6a15308952d24f74.jpg.webp\',
            aHref: \'https://www.baidu.com\'
        }
    })
</script>

3.2 v-bind 动态绑定class

两种方法:对象语法,数组语法(用的少)

<div id="app">
    <!-- <h2 class="active">{{message}}</h2> -->
    <h2 :class="{active:isActive,line:isLine}">{{message}}</h2>
    <button v-on:click="btnClick">点击改变颜色</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            message: \'你好啊\',
            isActive: true,
            isLine: true

        },
        methods:{
            btnClick: function() {
                this.isActive = !this.isActive
            }
        }
    })
</script>

3.3 v-bind动态绑定style

<div id="app">
    <!-- 注意点:font-size类型不加-用大写字母代替 -->
    <h2 :style="{color:\'red\',fontSize:\'30px\'}" class="active">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            message: \'测试文件\'
        }
    })
</script>

需求:三个菜单栏,点击哪一个,对应改变颜色样式

<div id="app">
    <ul>
            <!-- 判断active 属性是否为true -->
        <li :class="{active:newindex === index}" 
        v-on:click=\'btnClick(index)\'
        v-for="(item,index) in movies">
        {{index}}-{{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            movies: [\'新建应用\',\'打开应用\',\'获取应用\'],
            newindex: \'\'

        },
        methods: {
            btnClick: function(index){
                console.log(index)
                this.newindex = index
            }
        }
    })
</script>

4.1计算属性

实际开发中,需要对数据进行一些转化后再显示,或者将多个数据结合起来

计算属性computed 和methods的区别

计算属性会进行缓存,如果使用多次,计算属性只会调用一次

<div id="app">
    <h2>衣服总价格: {{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            closes:[
                {id: 10, name: \'男士上衣\', price: 129},
                {id: 11, name: \'女士上衣\', price: 159},
                {id: 12, name: \'男士裤子\', price: 149},
                {id: 13, name: \'女士裤子\', price: 29},
            ]
        },
        computed: {
            totalPrice: function(){
                let result = 0
                for (let i=0; i<this.closes.length; i++){
                    result +=this.closes[i].price
                }
                return result
            }
        }
    })
</script>

5.1事件监听

v-on 绑定事件监听器语法糖:@ 参数:event

情况一如果该方法不需要额外参数,那么方法后的()可以不添加

但是注意:如果方法本身有一个参数,那么会默认将原生事件event参数传递进去

情况二如果需要同时传入某个参数,同时需要event时,可以通过$传入事件

<div id="app">
    <!-- 事件调用的方法没有参数时 -->
    <p>
        <button @click=\'btnClick()\'>测试按钮1.1</button>
        <button @click=\'btnClick\'>测试按钮1.2</button>
    </p>

    <!-- 在事件定义时,写方法是省略了小括号,但是方法本身是需要一个参数的
    这个时候 Vue会默认将浏览器生产的event事件对象作为参数传入到方法 -->
    <p>
        <button @click="btn2Click(abc)">测试按钮2.1</button>
        <button @click="btn2Click()">测试按钮2.2</button>
        <button @click="btn2Click">测试按钮2.3</button>
    </p>
    
    <!-- 方法定义时,我们需要event对象,同时又需要其他参数 -->
    <!-- 在调用方法时,如何手动的获取到浏览器参数的event对象: $event  固定写法 -->
    <button @click="btn3Click(abc,$event)">测试按钮3.1</button>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            message: \'你好啊\',
            abc: \'123\'
        },
        methods: {
            btnClick () {
                console.log(\'btnClick\')
            },
            btn2Click () {
                console.log(\'-----\',event)
            },
            btn3Click (abc,event) {
                console.log(\'+++++\',abc,event)
            }
        }
    })
</script>

5.2在某些情况下,我们拿到event的目的可能是进行一些事件处理

Vue提供了修饰符来帮助我们方便的处理一些事件

<!-- 1. .stop修饰符的使用 阻止事件冒泡 -->
    <div @click="btnClick">
        <h2>{{message}}</h2>
        <button @click.stop="btnClick">测试按钮</button>
    </div>
    <!-- 2.prevent 阻止默认事件 -->
    <form action="https://www.baidu.com">
    <input type="submit" value="提交" @click.prevent="btn2Click">
    </form>
    <!-- 3..监听某个键盘的键帽 -->
    <!-- <form action=""> -->
        <input type="text" @keyup.enter=\'keyup\'>
        <button>提交</button>
    <!-- </form> -->

6.1条件判断

v-if v-else-if v-else

v-if的原理:

v-if后面的条件为false时,对应的元素以及其子元素不会被渲染

也就是根本没有对应的标签出现在DOM中

<div id="app">
    <span v-if="isUser">
        <label for="username">用户账号登录</label>
        <input type="text" name="username" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="username">用户邮箱登录</label>
        <input type="text" name="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">点击切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            isUser: true
        },
    })
</script>

6.2 v-show

v-show和v-if非常相似,也用于决定一个元素是否渲染

开发中如何选择:

当需要在显示与隐藏之间切换很频繁时,使用v-show

当只有一次切换时,通常使用v-if

<div id="app">
    <!-- v-if:当条件为false时,包含v-if指令的元素,根本不会存在DOM中 -->
    <button v-if="isShow">测试按钮1</button>
    <!-- v-show:当条件为false时,v-show只是给我们的元素添加一个行内样式
    display:none -->
    <button v-show="isShow">测试按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            isShow: true
        }
    })
</script>

7.1 v-for遍历数组

当有一组数据需要渲染时,就使用v-for来完成

格式如下: v-for="item in items" 的形式

//遍历数组
<ul>
    <li v-for="(item,index) in moves">
        {{index+1}}.{{item}}
    </li>
</ul>
//遍历对象
<ul>
    <li v-for="item in userinfo">{{item}}</li>
</ul>

重点:组件的唯一属性

给对应的元素和组件添加一个 :key 属性

使用:key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点

找到正确的位置去插入新的节点

所以 key的作用主要是为了高效的更新虚拟DOM

阶段案例: 购物车案例:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍购物车案例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
    <div v-if="books.length">
        <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.date}}</td>
                    <td>{{item.price | showPrice}}</td>
                    <td>
                        <button @click="decrement(index)" :disabled="item.count==1">-</button>
                        {{item.count}}
                        <button @click="increment(index)">+</button>
                    </td>
                    <td><button @click="remove(index)">remove</button></td>
                </tr>
            </tbody>
        </table>
        <h2>总价格: {{totalPrice | showPrice}}</h2>
    </div>
    <div v-else>
        <h2>购物车空空如也</h2>
    </div>

</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>

</body>
</html>

main.js :

const app = new Vue({
    el: \'#app\',
    data: {
        books: [
            {
                id: 1,
                name: \'《算法导论》\',
                date: \'2006-9\',
                price: 85.00,
                count: 1
            },
            {
                id: 2,
                name: \'《UNIX编程艺术》\',
                date: \'2006-2\',
                price: 59.00,
                count: 1
            },
            {
                id: 3,
                name: \'《编程珠玑》\',
                date: \'2006-10\',
                price: 39.00,
                count: 1
            },
            {
                id: 4,
                name: \'《代码大全》\',
                date: \'2006-4\',
                price: 128.00,
                count: 1
            }
        ]
    },
    methods: {
        decrement(index){
            this.books[index].count--
        },
        increment(index){
            this.books[index].count++
        },
        remove(index){
            this.books.splice(index,1)
        }
    },
    computed: {
        totalPrice() {
            //第一种方法
            // let totalPrice = 0
            // for (let i=0; i<this.books.length; i++){
            //     totalPrice += this.books[i].price * this.books[i].count
            // }
            // return totalPrice

            //第二种方法:
            // let totalPrice = 0
            // for (let i in this.books) {
            //     const book =this.books[i]
            //     totalPrice += books.price * book.count
            // }
            // return totalPrice

            //第三种方法
            // let totalPrice = 0
            // for (let item of this.books) {
            //     totalPrice += item.price *item.count
            // }
            // return totalPrice

            //第四种方法
            return this.books.reduce(function(preValue,book){
                return preValue + book.price * book.count
            },0)
        }
    },
    filters: {
        showPrice(price) {
            return \'$\' + price.toFixed(2)
        }
    }

})

style.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;
}

其中用到的高阶函数:

filter/map/reduce

//编程范式:命令式编程/声明式编程
//编程范式:面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
//filter/map/reduce
//filter中的回调函数有一个要求:必须返回一个boolean值
//true : 当返回true时,函数内部会自动将这次回调的n加入到新的数组中
//false : 当返回false时,函数内部会过滤掉这次的n
//需求1:去除所有小于100的数字
//需求2:将所有小于100的数字进行转化,全部*2
//需求3:将所有数字求和
const nums = [10,20,111,222,444,40,50]

// let total = nums.filter(function(n){
//     return n <=100
// }).map(function(n)
// {return n*2
// }).reduce(function(preValue,n){
//     return preValue+n},0)

// let total = nums.filter((n)=>{n<100}).map((n)=>{n*2}).reduce((preValue,n)=>{preValue+n},0)
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n) => pre + n);

// let newNums = nums.filter(function(n){
//     return n <= 100
// })
// // console.log(newNums)
// let new2Nums = newNums.map(function(n){
//     return n * 2
// })
// // console.log(new2Nums)
// let total = new2Nums.reduce(function(preValue,n){
//     return preValue + n
// },0)
console.log(total);

8.1 表单的双向绑定v-model 很重要

特别在对用户信息的提交,需要大量的表单

Vue中使用v-model指令来实现表单元素和数据的双向绑定

案例的解析：

当我们在输入框输入内容时

因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。

当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。

所以，通过v-model实现了双向的绑定

<div id="app">
    <input type="text" v-model="message">
    <h2>获取到的值是: {{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            message: \'你好啊\'
        }
    })
</script>

v-model的原理:

其实就是一个语法糖,背后的本质是包含两个操作:

1v-bind 绑定一个value属性

2v-on 指令给当前元素绑定input 事件

8.2v-model 结合radio 单选框:

<div id="app">
    <label for="man">
        <input type="radio" id="man" value="男" v-model="sex">男
    </label>
    <label for="woman">
        <input type="radio" id="woman" value="女" v-model="sex">女
    </label>
    <h2>你的性别是: {{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            sex: \'男\'
        }
    })
</script>

8.3 v-model 结合checkbox 实现多选框

单个勾选框(常用在我同意协议然后才能进行下一步注册)

v-model即为布尔值

此时input 的value并不影响v-model的值

多个复选框

当时多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组

当选中某一个时,就将input的value值添加到数组中

<div id="app">
    <!-- 1.checkbox单选框 -->
    <!-- <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <h1>你选择的意见是: {{isAgree}}</h1>
    <label for="login">
        <button id="login" v-bind:disabled="!isAgree">登录</button>
    </label> -->

    <!-- 2.checkbox多选框 -->
    <label for="">
        <input type="checkbox" value="篮球" v-model="hobbies">篮球
        <input type="checkbox" value="足球" v-model="hobbies">足球
        <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    </label>
    <h2>你的爱好是: {{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            isAgree: false,  //单选框对应boolean值
            hobbies: []      //多选框对应数组
        }
    })
</script>

8.4 v-model 结合select

和checkbox一样,select 也分单选框和多选两个

单选:只能选中一个值

v-model绑定的是一个值

当选中option中的一个时,会将它对应的value赋值到meSelect中

多选:可以选中多个值

v-model绑定的是一个数组

当选中多个值时,就会将选中的option对应的value添加到数组meSelect中

<div id="app">
    <!-- 选择一个 -->
    <!-- <select name="abc" id="" v-model="first">
        <option value="新建应用" >新建应用</option>
        <option value="获取应用">获取应用</option>
        <option value="打开应用">打开应用</option>
    </select>
    <h2>你选择的方式是: {{first}}</h2> -->

    <!-- 选择多个 -->
    <!-- <select name="abcd" v-model="second" multiple>
        <option value="新建应用">新建应用</option>
        <option value="获取应用">获取应用</option>
        <option value="打开应用">打开应用</option>
    </select>
    <h2>你想要的方式是: {{second}}</h2> -->

    <label v-for="item in thirds">
        <input type="checkbox" :value="item" v-model="second">{{item}}
    </label>
    <h2>你想要的方式是: {{second}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: \'#app\',
        data: {
            first: \'新建应用\',
            second: [],
            thirds: [\'篮球\',\'乒乓球\',\'羽毛球\',\'足球\',\'台球\',\'网球\']
        }

    })
</script>

8.5 v-model的修饰符

lazy修饰符:默认情况下,v-model默认是input事件中同步输入框的数据

以上是关于vue开发快捷键的总结的主要内容，如果未能解决你的问题，请参考以下文章

IntelliJ IDEA常用快捷键总结

Android Studio开发工具常用快捷键。部分总结，不全面，只包含新手可能少用的