一、Vue基础

于 2021-09-06 18:05:50 发布
阅读量139 收藏
点赞数
分类专栏： VUE学习笔记 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24790247/article/details/120141249
版权

Vue基础

1.js6 变量定义使用

let 定义变量
const 定义常量

2.基本格式

20210902160007

<div id = "app"></div>
<script src="../js/vue.js"></script>
<script>
	//let(变量)、const(常量)
    const app = new Vue({
        el: '#app',//用于挂载要管理的元素
        date: { //用于定义数据
            message: ''
        }
    })
</script>

3.console中为列表添加数据

itmle.moves.push("")

4.Mustache语法，但是只能在元素内容中使用

Mustache语法内可以写变量，也可以写表达式,如：

{{message + " " +date}}

{{message * 2}}

5. 常用指令，后边不跟参数

1) v-once 只在第一次展示数据，后边数据改变页面不变
2) v-html 把字符串当html语法进行展示
3) v-cloak 在vue解析之前隐藏该标签下的数据，解析后渲染

用法：<div id = 'app' v-once v-html v-cloak>

指令后不跟参数，直接使用

6.v-bind 动态绑定属性,语法糖 :src=" "

<div id = "app">
	<img v-bing:src="imgURL" alt="">  <!--通用做法-->
    <h2 :class="{类名1： true, 类名2: false}"> 
        <!--第二种用法，当类名1的值为true时h2标签会使用该类的样式-->
        {{message}}
    </h2>
</div>


<script src="../js/vue.js"></script>
<script>
	//let(变量)、const(常量)
    const app = new Vue({
        el: '#app',//用于挂载要管理的元素
        date: { //用于定义数据
            message: '',
            imgURL: 'http://www.zhaobo.site:5543/uploads/2021/09/20210903090943.png'
        }
    })
</script>
1. v-bind的几种用法

image-20210903134110723

第四种用法例子

image-20210903134253424

练习：

点击列表中的哪一项，那么该项的文字变为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fontClo{
            color:red;
        }
    </style>
</head>
<body>
    <div id = "app">
        <ul>
            <li v-for="(item,index) in message" v-on:click="clo(index)" :class="{fontClo : flage==index}">{{item}}</li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: ['海王','火影忍者','死神','进击的巨人'],
                flage: 0,
            },
            methods: {
                clo: function(index){
                    this.flage=index;
                    console.log(this.flage);
                }
            }
        })
    </script>

</body>
</html>
2. 动态绑定style，对象语法
<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> <!--语法-->
<h2 :style="{fontSize: '50px'}">{{message}}</h2><!--value的值必须要加单引号，否则会当成变量进行解析-->
<h2 :style="{fontSize: finalSize+'px'}">{{message}}</h2><!--value的值可以使变量和表达式 -->

7.计算属性 computed

  1. 用于对属性的值进行计算并返回，是属性，起名不要加动词

  2. 计算属性调用不需要加括号

  3. 计算属性多次调用执行一次，methods每次调用都会执行一次，计算属性的性能会更好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "app">
        <h2>
            {{fullName}}
        </h2>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                firstName: "aaa",
                lastName: "bbb"
            },
            computed:{
                fullName: function(){
                    retrun this.firstName + this.lastName
                }
            }
        })
    </script>

</body>
</html>
1. 计算属性的完整写法
computed:{
	set: function(newValue){
		const names = newValue.split(' ');
		this.firstName = names[0];
		this.lastName = names[1];
},
	get: function(){
		return this.firstName + ' ' + this.lastName
}
}

set 方法要为属性复制，则需要传递参数

2. computed与methods对比

computed 值没有发生改变时，只会调用一次，内部有缓存

methods每次调用，都会重新调用一次

8. v-on

  1. 语法糖
<button @click="increment"></button>

  1. 参数

    1. 事件监听时无参数，则小括号可以不加
    2. 在事件定义是省略了小括号，但是方法本身是需要参数的，如果不传，则默认将浏览器自动生成的event对象传入函数。
    3. 在方法定义时，需要event参数，有需要其他参数时，在event参数的位置传$event即可。

  2. 修饰符

    1. @click.stop,解决事件冒泡问题，如同时监听按钮和按钮的上级div组件事件，使用了.stop修饰符后，点击按钮是只执行按钮的监听事件。
    2. @click.prevent,阻止组件默认事件，如input的submit的自动提交
    3. @keyup.{keyCode|keyAlias}监听键盘键帽点击
    4. @click…once 只触发一次回调

image-20210905000936990

9. 条件判断

1. v-if
  1. v-if ="false"通过改变布尔值判断要不要显示
  2. v-if 和 v-else

image-20210905001406871

  1. v-else-if

image-20210905001559713

小问题：vue的v-if和v-else会共享input中的内容，即切换不清空input中的文本，如希望清空，则可以在组件上增加一个key属性，值设置不一样，则切换时文本清空

2. v-show

v-if: 值为false时，整个dom元素都没有，用于不需要频繁切换的情况。

v-show: 值为false时，dom元素display，元素隐藏。

10. v-for

  1. 遍历数组
v-for =" {item, index} in message"
  1. 遍历对象
v-for = "{value, key, index} in message"
  1. 使用时最好能够加一个key，便于复用,提升性能,高效的提升虚拟DOM的性能
<li  v-for = "item in message" :key = "item" > {{item}} </li> //key必须保证唯一
  1. 响应式的方法有
    1. push()//在数组最后添加元素，可以添加多个元素
    2. pop() //删除数组中的最后一个元素
    3. shift() //删除数组第一个元素
    4. splice(start,) //在数组中间插入元素第二个元素传0，并且后面跟上要插入的元素，删除元素第二个参数传入删除几个元素（如果没传则删除所有），替换元素第二个元素传入要替换几个元素，在第三个以后的参数出入要替换成的元素
    5. unshift()//在数组前面添加元素，可以添加多个元素
    6. sort()//排序
    7. reverse//排序

通过索引值改变数组的话，不是响应式的。如果需要改变单独一个数组元素，可以用替换函数splice()或者Vue.set(要修改的对象this.letters,要修改的索引0，要修改的值‘bbbbbb’)

11. 过滤器

过滤器是一个函数，参数传入过滤器需要格式化的数据

const app = new Vue({
    el: '#app',
    data: {},
    methods: {},
    filters: {
        showPrice(price){
            return '¥'+price.toFixed(2)
        }
    }
})
//前端调用过滤器
<li>{{item.price | showPrice}} </li>

12. v-model

表单和数据的双向绑定

  1. 普通绑定

实现效果，input的value值和message实时双向绑定。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <div id = "app">        <h2>            <input type = "text" v-model = "message"></input>        </h2>    </div>        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>    <script>        const app = new Vue({            el: '#app',            data: {                message: "aaa",            },            computed:{                fullName: function(){                    retrun this.firstName + this.lastName                }            }        })    </script></body></html>
  1. v-model与radio结合使用
<label for="man">    <input type="radio" id = "man" name ="sex" value = "男" v-model = "sex">男</input></label><labe for="woman">    <input type="radio" id = "woman" name ="sex" value = "女" v-model = "sex">女</input></labe>//当两个radio拥有相同的name时，两个互斥显示//该例子用sex变量接收选择的性别//v-model绑定了用一个变量时，自动互斥//label 的

  1. v-model与checkbox结合使用

    1. 单选框
    <label for="agree">    <input type="checkbox" id = "agree" v-model="isAgree">同意协议</input></label>//isAgree变量获取选择框的是否被选定，对应布尔值//for属性规定label与哪个表单元素绑定。绑定表单的id属性
    1. 多选框
    <label for="agree">    <input type="checkbox" value="篮球" v-model="hobbiex">篮球    <input type="checkbox" value="足球" v-model="hobbiex">足球    <input type="checkbox" value="乒乓球" v-model="hobbiex">乒乓球</label>//使用hobbiex数组变量获取用户选择的所有内容，对应数组

  2. v-model与select结合

    1. 单选
<select name = "abc" id = "" v-model="fruit">    <option value="苹果" >苹果</option>    <option value="香蕉" >香蕉</option>    <option value="葡萄">葡萄</option></select>//v-model必须写到select标签内，fruit获取用户选择内容，fruit为字符串类型

​ 2. 多选

<select name = "abc" id = "" v-model="fruit" multiple>    <option value="苹果" >苹果</option>    <option value="香蕉" >香蕉</option>    <option value="葡萄">葡萄</option></select>//select增加了multiple属性后即可多选，fruit为数组类型

  1. 修饰符

    1. lazy

    不需要实时绑定，敲回车或者失去焦点之后在绑定

    v-model.lazy="message"
    1. number

    v-model默认绑定的类型为字符串类型，使用该修饰符之后默认为数字类型，使用时不需要在进行转换

    v-model.number="message"
    1. trim

    去除两边空格

    v-model.trim="message"

13.whatch

可以监听变量值的改变，whatch内部是以变量名为名的函数，函数可以有newValue和oldValue两个参数。

14. vue的生命周期

1102036-582b0953653a8e87

FWKC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值