Vue.js学习笔记（二）

最新推荐文章于 2022-08-28 20:35:46 发布
最新推荐文章于 2022-08-28 20:35:46 发布
阅读量246 收藏 1
点赞数
分类专栏： 前端学习笔记 文章标签： vue js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43249043/article/details/106768688
版权

文章目录

1.v-if v-else v-else-if

代码用法：

<body>
<div id="app">
    <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">良好</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            score: 80
        }
    })
</script>
</body>

效果：（文字从良好变成及格）
在这里插入图片描述

2.v-if 输入框切换小案例

意义：想象一个场景，切换一个账号的登录方式，点击切换邮箱登录/切换账号登录
实现方式：v-if切换组件
具体写法：

<body>
<div id="app">
    <span v-if="isUser">
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="在此输入用户名">
    </span>
    <span v-else>
        <label for="email">邮&nbsp;&nbsp;&nbsp;箱：</label>
        <input type="text" id="email" placeholder="在此输入邮箱">
    </span>
    <button @click="isUser = !isUser">切换</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            isUser: true
        }
    })
</script>
</body>

效果：
在这里插入图片描述
ps：点击切换输入框里面内容不变，涉及Vue复用元素

3.v-show和 v-if

<body>
<div id="app">
    <!--v-if:当条件为false时，dom不渲染        -->
    <div v-if="isShow">v-if</div>
    
    <!--v-show为false时，dom渲染，增加内联样式style="display:none"    -->
    <div v-show="isShow">v-show</div>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            isShow: true
        }
    })
</script>
</body>

结果：
在这里插入图片描述 在这里插入图片描述

4.v-for遍历对象

和v-for遍历数组类似
具体代码：

<body>
<div id="app">
    <ul>
    	<!--注意，（）里面一定是value,key，因为先读取value再读取key   -->
        <li v-for="(value, key)  in info">{{key}}:{{value}}</li>
        <li v-for="(value, key, index)  in info">{{key}}:{{value}}</li>  <!--也可以获取下标  -->
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            info:{
                name: "jhz",
                height: 180,
                age: 19
            }
        }
    })
</script>
</body>

效果：
在这里插入图片描述
ps:v-for里面有:key能更高效利用dom,利用diff算法

5.哪些数组的方法是响应式的

有：push pop shift unshift splice,sort, reverse,set

直接改变值是非响应式的，如：

this.letters[0] = "aaa";

上述5个方法使用具体代码：（所有代码均验证可以运行）

<body>
<div id="app">
    <ul>
        <li v-for="item in letters">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            letters: ["a", "b", "c", "d"]
        },
        methods:{
            btnClick() {
                //0.不动态改变
                this.letters[0] = "aaa";

                //1.PUSH 在数组最后面添加元素，可添加多个
                //this.letters.push("c");

                //2.pop 删除数组最末尾的元素
                //this.letters.pop();

                //3.shift  删除数组最开始元素
                //this.letters.shift();

                //4.unshift 在数组头部添加元素，可添加多个
                //this.letters.unshift("aaa", "bbb");

                //5.splice 剪切 源代码有如下两种形式
                //splice(start: number, deleteCount: number, ...items: T[])
                //插入/剪切，填写三个参数，第三个参数可以是多个内容
                //splice(start: number, deleteCount?: number)  //只删除内容，填两个参数
                // ↓  在第2个元素后插入3个元素，同时删除第三个元素，
                //this.letters.splice(2, 1, "aaa", "bbb", "ccc")
                
				//6. set(要修改的对象， 索引值，修改后的值)
				// Vue.set(this.letters, 0, 'bbbbb') 替换数组第一个元素为'bbbbb'
            }
        }
    })
</script>
</body>

6.过滤器

意义：可被用于一些常见的文本格式化
具体用法：

html：
{{item.price | showPrice(item.price)}}
js：
const aaa = new Vue({
    el:"#app",
    data:{
        message:"hello,guys",
        list: [
            {  
                price: 85.00,
            },
            {
                price: 59.00,
            },
            {
                price: 39.00,
            },
            {
                price: 128.00,
            },
        ]
    },
    filters:{
        showPrice(price){
            return "¥" + price.toFixed(2);
        }
    }
})

效果：
在这里插入图片描述（添加了¥和小数点，但只是改变格式）

7.filter/map/reduce 高阶函数

介绍：
filter函数：通过自己设立条件过滤数字
map函数： 让数组中所有元素都执行某操作
reduce函数： 汇总数组中内容

意义：能让代码可读性更强
场景举例：数组[1, 2, 3, 4, 5, 6, 7]中小于5的数字*2再求和
代码：（两种方法，方1简单写法，方2函数式编程）

const nums = [1, 2, 3, 4, 5, 6, 7];
//method1:
//filter函数：通过自己设立条件过滤数字
let nums1 = nums.filter(function (n) {
    if(n < 5) return true;
});
console.log("nums1:" + nums1);
//map函数： 让数组中所有元素都执行某操作
let nums2 = nums1.map(function (n) {
    return n * 2;
});
console.log("nums2:" + nums2);
//reduce函数： 汇总数组中内容
let nums3 = nums2.reduce(function (preNum, n) {
    return n + preNum;
}, 0);
console.log("nums3:" + nums3);

//method2:
let nums4 = nums.filter(function (n) {
    if(n < 5) return true;
}).map(function (n) {
    return n * 2;
}).reduce(function (preNum, n) {
    return preNum + n;
});
console.log("nums4:" + nums4);
console.log("nums:" + nums);//打印是为了验证nums从头到尾没变化

结果：
在这里插入图片描述

8.v-model（与表单搭配使用）

介绍：Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据到视图的绑定，v-model实现 视图到数据绑定
代码例子：

<body>
<div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
<!--本质：-->
<!--    <input type="text":value="message" @input="message = $event.target.value">-->
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
        }
    })
</script>
</body>

效果：
在这里插入图片描述输入框每次发生改变，message也发生改变，渲染到页面好观察
解释：当输入框内容发生改变，自动改变vue里的message。实质上是

<input type="text":value="message" @input="message = $event.target.value">

v-on:input帮忙把输入框里面的内容传到后台，v-model就是个简写，语法糖

9.v-model与radio

代码：


<body>
<div id="app">
    <label for="male">
        <input type="radio" name="sex" id="male" value="男" v-model="sex">男
        <!-- name可以省略，此时v-model包含name的功能-->
    </label>
    <label for="female">
        <input type="radio" name="sex" id="female" value="女" v-model="sex">女
    </label>
<!--    <input type="checkbox"> 和 <input type="radio"> 中必须设置 value(定义与输入相关联的值) 属性。-->
    <h2>你选择了：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            sex:"男"
        }
    })
</script>
</body>

效果:
在这里插入图片描述

10.v-model与checkbox

意义：当用户选择的时候记录选择，在本地进行一些响应的操作，比如不同意下一步按钮锁死
代码：
案例：单个多选框做同意框，多个多选框记录到本地

<body>
<div id="app">
    <label for="protocal">
        <input type="checkbox" id="protocal" v-model="isAgree">同意
    </label>
    <h2>isAgree的值{{isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>
    <br>
    <label for="basketball">
        <input id="basketball" type="checkbox" value="篮球" v-model="balls">篮球
    </label>
    <label for="football">
        <input id="football" type="checkbox" value="足" v-model="balls">足球
    </label>
    <!-- 值绑定方式，涉及值传递，不太好用：-->
    <label v-for="item in balls" :for="item">
        <input type="checkbox" :id="item" :value="item" v-model="balls">{{item}}
    </label>
    <h2>balls的值{{balls}}</h2>
    
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            isAgree: false,
            balls:[]
        }
    })
</script>
</body>

效果：
在这里插入图片描述

11.v-model与select

代码：

<body>
<div id="app">
    <select name="a" id="a" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="梨">梨</option>
    </select>
    <h2>{{fruit}}</h2>

    <select name="b" id="b" multiple v-model="fruits">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="梨">梨</option>
    </select>
    <h2>{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            fruit:"",
            fruits:[]
        }
    })
</script>
</body>

效果：
在这里插入图片描述

12.v-model的修饰符

v-model.lazy:lazy修饰符，不再每时每刻传值，等鼠标点击其他地方和敲下回车才传值给js
v-model.number：number修饰符，v-model默认传string类型，改成传number类型
v-model.trim：trim修饰符，消除输入者输入的空格(删前后，中间不删)
代码样例：

<body>
<div id="app">
    <input type="text" v-model.lazy="text1">
    <h2>text1是：{{text1}}</h2>

    <input type="text" v-model.number="text2">
    <h2>text2类型是:{{typeof text2}}</h2>

    <input type="text" v-model.trim="text3">
    <h2>text3:{{text3}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const aaa = new Vue({
        el: "#app",
        data: {
            message: "hello,guys",
            text1: "",
            text2: "",
            text3: ""
        }
    })
</script>

效果：
在这里插入图片描述

greenhand coder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础（二）
weixin_59675867的博客
07-27 239
v-bind基础使用，v-bind动态绑定class，v-for的基础使用，v-for和v-bind结合案例（tab切换），计算属性
Vue.js学习笔记（一）
greenhand_coder
02-01 303
1.vue是渐进式的框架：可以在原来用jQuery写的项目新开一个页面用vue写，以前的页面慢慢把以前jQuery项目的代码去除掉，可以不全部重构 2.Vue响应式 <body> <div id="app">{{message}}</div> <script src="../js/vue.js"></script> <script> const aaa = new Vue({
Golang——接口interface使用
llslinliansheng的博客
08-28 1297
golang接口interface简单使用记录
Vue学习(六)-v-if的使用
weixin_44038881的博客
12-05 5020
v-if 的使用 v-if 满足一定条件渲染数据 使用 <div id="app"> <section v-if="isShow"> <!-- isShow 为 true 时，显示下面的div --> <div>我是div，isShow为True时我显示</div> </section&gt...
3.Vue.js前端框架：条件判断与列表渲染
小白_xm
04-13 4509
3.1 条件判断 在视图中，经常需要控制某些DOM元素的显示或隐藏。Vue.js提供了多个指令来实现条件的判断，包括 v-if、v-else、v-else-if、v-show指令。下面分别进行介绍。 3.1.1 v-if指令 v-if 指令可以根据表达式的值来判断是否输出DOM元素及其包含的子元素。如果表达式的值为 true，就输出DOM元素及其包含的子元素；否则，就将DOM元素及其包含的子元素移除。例如，输出数据对象中的属性 a 和 b 的值，并根据比较两个属性的值，判断是否输出比较结果。代码如下：
vue.js学习笔记
11-28
vue.js是前端一个轻量级框架，使用相当灵活。可以将页面功能模块化开发。
-vue.js学习笔记
最新发布
01-10
vuejs学习笔记
Vue.js学习笔记之修饰符详解
12-09
本篇将简单介绍常用的修饰符。 在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定...当查看Vue开发的页面时，按F12就可以在开发者工具里看到Vue页签。这里需要注意，只有在引用V
vue.js学习笔记以及注意事项
02-04
vue.js学习笔记以及注意事项
Vue.js学习笔记之 helloworld
12-28
Vue.js 是用于构建交互式的 Web 界面的库。 Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。 先来看一个简单的示例，Hello,World! <!DOCTYPE html> <html> <head> <...
vue中disabled 的用法
热门推荐
lomenw的博客
04-03 9万+
&lt;input type="text" :disabled="disabled"&gt; data:{ disabled:false }
shiro中的initMap()被调用了两次
cmsj00的博客
09-02 660
配置中 init-method 调用了一次，创建bean的时候调用无参构造调用了一次 &lt;bean id="shiroFilter" class="MyShiroFilterFactoryBean" init-method="initMap()"&gt; &lt;property name="securityManager" ref="securityManag
十日谈 : 基于Vue的购物车案例
qq_36013952的博客
02-25 289
十日谈 : 基于Vue的购物车案例欢迎阅读我的Vue学习日记基于Vue的购物车案例过滤器的使用改变购买数量移除按钮和总价计算移除按钮总价计算完整版index.html完整的main.js 欢迎阅读我的Vue学习日记 基于Vue的购物车案例 建立文件: 写CSS简单样式: table{ border: 1px solid #e9e9e9; border-collapse: collapse...
vue（购物车案例）
lbs311709000127的博客
11-25 172
css代码 <style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th ,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-a...
关于input标签disabled="disabled"属性的一个坑
cuishao
04-03 1万+
一，问题代码： 1.原始HTML代码：<li><button class="normal-btn" id="start_capture" "startPktCapture()">开始抓包</button></li> <li><button class="normal-btn" id="stop_capture" style="dis...
小程序出现 net::ERR_SSL_PROTOCOL_ERROR 的错误
greenhand_coder
01-12 8752
前几天在小程序前后端交互的时候，调用wx.request的时候出现了net::ERR_SSL_PROTOCOL_ERROR 这个错误。 如图 找了很多篇CSDN上的博客，都说要把https转化为http 我寻思着，小程序不能用http啊 就跟后端到处搜资料找 最后发现是证书的问题，后端那里没有把证书在服务器上装好 就这么简单一个小bug，CSDN上没找到，可能是小程序的开发者都不喜欢在CSDN...
Access to XMLHttpRequest at ‘http://127.0.0.1:8080 from origin ‘http://localhost:8080‘ XXXCORS 报错
greenhand_coder
09-14 5635
问：本地开springboot后台居然会跨域？ 答: 两个请求的端口号不一样，一个是8080，一个是8081
CSS基础复习
greenhand_coder
02-17 653
建议选择器，属性名，属性关键字全都使用小写 选择器和{}中间保留空格 内联式 style里面(控制整个html页面) 嵌入式写在标签中 外联式 css作为单独文件 外联式link标签： <link rel="stylesheet" href="css文件路径"> 通常写在style标签的同一个位置 属性：rel(定义文档间的联系，连接css的时候需要指定为stylesheet, 表示被连接的文档是一个样式表), href(所连接样式表的url) 1...
vue.config.js配置 不生效
09-05
- *1* *2* *3* [Vue学习笔记 —— 关于vue.config.js不生效的解决方案](https://blog.csdn.net/qq_33638188/article/details/125343763)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值