Vue基础01

最新推荐文章于 2024-05-15 22:50:31 发布

abigele

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量478

点赞数 1

分类专栏：前端学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/abigele/article/details/124671849

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

5/9vue笔记

1、v-text/v-html 内容绑定

<p v-text="'年龄'+age"></p>
<p v-html="address"></p>

new Vue({
	el:'#app',
	data(){
		return {
			age:23,
			address:'<h3>成都市</h3>'
		}
	}
})

2、once指令

作用：

用于指定标签，内容挂载之后，即使数据发生了变化，也不更改内容；

<p>
    不使用v-once指令：{{num}}
</p>
<p v-once>
    使用v-once指令：{{num}}
</p>

const vm = new Vue({
    el:'#app',
    data(){
        return {
            num:1
        }
    }
})
setInterval(()=>{
    vue.num++;
},1000)

3、v-bind指定

作用：

用于给标签属性绑定属性值

v-bind十分常用，语法糖简写为:属性名='表达式'

<a :href="baidu.url" :title="baidu.title">{{baidu.website}}</a>

const vm = new Vue({
    el:'.app',
    data(){
        return {
            baidu: {
                url:'https://www.baidu.com',
                website:'百度',
                title:'点击一下，调转百度'
            }
        }
    }
})

4、bind绑定class

作用：

v-bind绑定class值

1）只绑定一个class值，可以直接绑定class的名字即可；

2）如果绑定多个class值，可以采用拼接法、对象法和数组法。

.class1 {
    color:red;
}
.class2 {
    color:green;
}

<p :class="className">
    我是一个p标签
</p>
<p :class="className+''+className2">
    我是一个用拼接方法写class属性值的p标签
</p>
<p :class="classObject">
    我是一个用对象方法写class属性值的p标签
</p>
<p :class=“classArray”>
    我是一个用数组方法写class属性值的p标签
</p>

const vm = new Vue({
    el:'.app',
    data(){
        return {
            className:'class1',
            className2:'class2',
            classObjetc:{
                class1:true,
                class2:true
            },
            classArray:[
                'class1','class2'
            ]
        }
    }
})

5、颜色切换【v-bind案例】

.red {
    color:red;
}
.green {
    color:green;
}

<p :class="classObject">
    我是用对象来写class属性值的p标签
</p>
<p :class="classArray">
    我是用数组来写class属性值的p标签
</p>

const vm = new Vue({
    el:'.app',
    data(){
        return {
            colorFlag:true
        }
    },
    computed:{
        classObject(){
            return {
                red:this.classFlag,
                green:!this.classFlag
            }
        },
        classArray(){
            return [
                this.classFlag? 'red':'green';
            ]
        }
    }
})

6、v-bind绑定style属性

绑定style属性的方法：

方法一：绑定对象，对象的属性为style属性名，值为style属性值；

方法二：绑定数组，数组中的元素是方法一中的对象，最终会将对象中的属性进行合并。

<p :style="styleColor">
    我是一个用对象方法改变style值的p标签
</p>
<p :style="[styleColor,styleBorder]">
    我是一个用数组方法改变style值的p标签
</p>

const vm = new Vue({
    el:'.app',
    data(){
        return {
            styleObject:{
                color:'red',
                background:'green'
            },
            styleArray:{
                border:'1px solid red',
                boderRedius:'15px'
            }
        }
    }
})

7、v-on指令

v-on指令的作用：

v-on指令用于绑定事件处理函数，语法为：v-on:事件名=“函数名”

·、函数名可以不加括号，vue会自动进行方法绑定；

2、函数推荐定义在methods里面，如果定义在全局（window）也可以绑定上，但是不推荐。

关于绑定事件时的实际参数问题

1、如果handleClick没有加上括号，那么默认会将事件对象，作为第一个实际参数传入；

2、可以使用$event作为占位符，写明为事件对象；

3、传入其他参数：vue可以把任意数据类型，传递给事件绑定函数。

事件绑定修饰符：

修饰符用于描述指令的细节，事件修饰符重要用于阻止事件默认行为和阻止事件冒泡

语法：v-on:事件名.修饰符

prevent:阻止事件默认行为；

stop:阻止事件继续传播（阻止事件冒泡）；

once:只处理一次事件

v-on:简写

使用@可以代替v-on;所以v-on:click简写为@click

<button @click="handleClick">
    按钮
</button>
<button @click="handleClick($event)">
    按钮
</button>
<button @click="handleClick(person,$event)">
    按钮
</button>
<a href="https://www.baidu.com" @click.prevent>百度一下</a>

const vm = new Vue({
    el:'.app',
    data(){
        return {
            person : {
                name:'杨洋',
                age；17
            }
        }，
        methods: {
            handleClick(e) {
                console.log(e == window.event);
            },
            handleClick2(e){
                console.log(e == window.event);
            }
        }
    }
})

8、v-if&v-show属性

v-if和v-show:

共同点：

都会在页面上显示逻辑判断成功后的DOM；

不同点：

v-if还有v-else，有逻辑分支控制。但是v-show没有else的支路；
v-if对于判断失败的节点，会直接不渲染该节点（页面中，无法查看到节点，v-show也会渲染节点，只是使用display属性将其隐藏）
v-if由false便为true的时间，会重新渲染节点（重新触发组件的声明周期）

<button @click="handleClick(1)">
    +
</button>
<button @click="handleClick(-1)">
    -
</button>
<p>
    你的分数是：{{score}}
</p>
<br>
<h2>
    v-if
</h2>
<p v-if="score>=60">
    及格了
</p>
<p v-else="60>score">
    没及格
</p>
<br>
<h2>
    v-show
</h2>
<p v-show="score>=60">
    及格了
</p>
<p v-show="60<score">
    没及格
</p>
<br>
<h2>
   v-if,v-else-if,v-else
</h2>
<p v-if="score>=80">
    优秀
</p>
<p v-else-if="score>=60">
    及格
</p>
<p v-else="60>score">
    不及格
</p>

const vm = new Vue({
    el:'.app',
    data(){
        return {
            score:54
        }
    },
    methods:{
        handleClick(v){
            this.score+=v;
        }
    }
})

9、v-for指令

注意：

v-for和v-if不要再同一层中使用，会报错（从3.0开始）

解决方法：

方法一：（仅使用vbue-cli），嵌套一层<template></template>标签，这只是一个逻辑标签，vue不会渲染出dom节点

方法二：使用计算属性

方法三：使用v-show（不推荐）

//打印所有的同学
<ul>
    <li v-for="item in names">{{item}}</li>
</ul>
//打印年满18岁的同学
<ul>
    <li v-for="item in students" v-if="item.age >= 18">{{item.name}}</li>
</ul>
//利用计算属性解决上述问题
<ul>
        <li v-for="item in adoltStudents">{{item.name}}</li>
</ul>
//v-for的索引和绑定key
<ul>
            <li v-for="(item,index) in adoltStudents" :key="item.name">{{index}}:{{item.name}}

const vm = new Vue({
	el:'.app',
	data(){
		return {
			names:['wyw','fzl','lbj'],
			strudents;[
				{
					name;'wyw',
					age:20,
					sex:'女'
				},
				{
					name:'fzl',
					age:22,
					sex:'男'
				}，
				{
					name:'lbj',
					age:16,
					sex:'男'
				}
			]
		}，
		methods:{
			
		},
		computed :{
			adultStudent(){
				return this.students.filter(v=>v.age>=18)
			}
		}
	}
})

abigele

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础01

5/9vue笔记1、v-text/v-html 内容绑定<p v-text="'年龄'+age"></p><p v-html="address"></p>new Vue({ el:'#app', data(){ return { age:23, address:'<h3>成都市</h3>' } }})2、once指令作用：用于指定标签，内容挂载之后，即使数据发生了变化，也不更改内容；&
复制链接

扫一扫