Vue学习笔记三

已于 2022-07-09 16:47:00 修改
阅读量203 收藏
点赞数
文章标签： vue.js 学习 前端
于 2022-07-09 16:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46685077/article/details/125695376
版权

Vue组件开发

一、组件化开发思想

1. 现实中的组件化思想体现

在这里插入图片描述

2. 编程中的组件化思想体现

img

3. 组件化规范：Web Components

  • 希望尽可能多的重用代码

  • 自定义组件的方式不太容易（html、css和js）

  • 多次使用组件可能导致冲突

    Web Componets通过创建封装好功能的定制元素解决上述问题

    官网： https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

二、组件注册

1. 全局组件注册语法

全局组件注册语法js模板代码如下：

Vue.component(组件名称, {
	data: 组件数据,
	template: 组件模板
})

js代码如下：

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: '<button v-on:click="count++">点击{{count}}次</button>'
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})

2. 组件用法

<div id="app">
    <button-counter></button-counter>
</div>

3. 组件重用

js代码如下：

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: '<button v-on:click="handle">点击{{count}}次</button>',
	methods: {
		handle: function () {
			this.count++;
		}
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})

html代码如下：

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

三、组件注册注意事项

1. data必须是一个函数

函数中返回一个对象，对象中存储的是每个组件独有的数据属性

分析函数与普通对象的对比,如果data中是一个对象的话会报如下的错误

在这里插入图片描述

html代码如下:

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

js代码如下:

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: {
		count: 0
	},
	template: '<button v-on:click="handle">点击{{count}}次</button>',
	methods: {
		handle: function () {
		this.count++;
		}
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})

2. 组件模板内容必须只有单个根元素

分析演示实际的效果如下:

在这里插入图片描述

html代码如下:

<div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

js代码如下:

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: '<button v-on:click="handle">点击{{count}}次</button><h1>测试</h1>',
	methods: {
		handle: function () {
			this.count++;
		}
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})

3. 组件模板内容可以是模板字符串

模板字符串需要浏览器提供支持（ES6语法）

html代码如下:

<div id="app">
    <button-counter></button-counter>
</div>

js代码如下:

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: `
		<div>
			<button @click='handle'>点击{{count}}次</button>
			<button @click='handle'>点击{{count}}次</button>
		</div>
	`,
	methods: {
		handle: function() {
			this.count++;
		}
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})

4. 组件命名方式

  • 短横线方式

    Vue.component('my-component', { /* ... */ })

  • 驼峰方式

    Vue.component('myComponent', { /* ... */ })

html代码如下:

<div id="app">
    <button-counter></button-counter>
</div>

js代码如下:

Vue.component('MyComponent', {
	data: function () {
		return {
			msg: 'Hello Vue'
		}
	},
	template: '<div>{{msg}}</div>'
})
// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: `
		<div>
			<button @click='handle'>点击{{count}}次</button>
			<MyComponent></MyComponent>
		</div>
	`,
	methods: {
		handle: function () {
			this.count++;
		}
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})
注意事项：

如果组件命名使用的是驼峰命名法，在网页组件标签中是不能使用驼峰命名法，只能使用短横线，但是在字符串模板中是可以使用驼峰命名法，建议使用短横线命名

js代码如下:

Vue.component('MyComponent', {
	data: function () {
		return {
			msg: 'Hello Vue'
		}
	},
	template: '<div>{{msg}}</div>'
})
// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
	data: function () {
		return {
			count: 0
		}
	},
	template: `
		<div>
			<button @click='handle'>点击{{count}}次</button>
			<MyComponent></MyComponent>
		</div>
	`,
	methods: {
		handle: function () {
			this.count++;
		}
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	}
})

错误使用的html代码如下:

<div id="app">
    <button-counter></button-counter>
    <MyComponent></MyComponent>
</div>

会报如下错误:

在这里插入图片描述

正确使用的html代码如下:

<div id="app">
    <button-counter></button-counter>
    <My-Component></My-Component>
</div>

5. 局部组件注册

模板js代码如下:

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
// 然后在 components 选项中定义你想要使用的组件：
const vm = new Vue({
	el: '#app',
	components: {
		'component-a': ComponentA,
		'component-b': ComponentB,
        'component-c': ComponentC
	}
})

html代码如下:

<div id="app">
	<component-a></component-a>
	<component-b></component-b>
	<component-c></component-c>
</div>

js代码如下:

var ComponentA = {
	data: function () {
		return {
			msg: 'Hello ComponentA'
		}
	},
	template: '<div>{{msg}}</div>'
};
var ComponentB = {
	data: function () {
		return {
			msg: 'Hello ComponentB'
		}
	},
	template: '<div>{{msg}}</div>'
};
var ComponentC = {
	data: function () {
		return {
			msg: 'Hello ComponentC'
		}
	},
	template: '<div>{{msg}}</div>'
};
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	},
	components: {
		'component-a': ComponentA,
		'component-b': ComponentB,
		'component-c': ComponentC
	}
})
注意事项：

局部组件只能在注册它的父组件中使用

html代码如下:

<div id="app">
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
    <test-com></test-com>
</div>

js代码如下:

var ComponentA = {
	data: function () {
		return {
			msg: 'Hello ComponentA'
		}
	},
	template: '<div>{{msg}}</div>'
};
var ComponentB = {
	data: function () {
		return {
			msg: 'Hello ComponentB'
		}
	},
	template: '<div>{{msg}}</div>'
};
var ComponentC = {
	data: function () {
		return {
			msg: 'Hello ComponentC'
		}
	},
	template: '<div>{{msg}}</div>'
};
Vue.component('test-com', {
	data: function () {
		return {
			msg: '测试'
		}
	},
	template: `
		<div>
			{{msg}}
			<component-a></component-a>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		name: ''
	},
	components: {
		'component-a': ComponentA,
		'component-b': ComponentB,
		'component-c': ComponentC
	}
})

会报如下错误:

在这里插入图片描述

四、组件间数据交互

1. 父组件向子组件传值

组件内部通过props接收父组件传递过来的值

Vue.component('menu-item', {
	props: ['title'],
	template: '<div>{{title}}</div>'
})

父组件通过属性将值传递给子组件

html代码如下：

<div id="app">
	<menu-item title="hello"></menu-item>
	<menu-item :title="title"></menu-item>
</div>

js代码如下：

Vue.component('menu-item', {
	props: ['title'],
		template: '<div>{{title}}</div>'
})
const vm = new Vue({
	el: '#app',
	data: {
		title: 'form father'
	}
})

props属性名规则

在props中使用驼峰形式，模板中需要使用短横线的形式

js代码如下：

Vue.component('menu-item', {
	props: ['menuTitle'],
	template: '<div>{{menuTitle}}</div>'
})
const vm = new Vue({
	el: '#app',
	data: {
		title: 'form father'
	}
})

html代码如下：

<div id="app">
	<menu-item menuTitle="hello"></menu-item>
	<menu-item :title="title"></menu-item>
</div>

会报如下警告：

在这里插入图片描述

将html代码改成如下就不会有了：

<div id="app">
	<menu-item menu-Title="hello"></menu-item>
	<menu-item :title="title"></menu-item>
</div>

字符串形式的模板中没有这个限制

html代码如下：

<div id="app">
	<menu-item menu-Title="hello"></menu-item>
	<menu-item :title="title"></menu-item>
</div>

js代码如下：

Vue.component('third-com', {
	props: ['testTitle'],
	template: '<div>{{testTitle}}</div>'
})
Vue.component('menu-item', {
	props: ['menuTitle'],
	template: `
		<div>
			{{menuTitle}}
			<third-com testTitle="test"></third-com>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		title: 'form father',
	}
})

props属性值类型

  • 字符串String
  • 数值Number
  • 布尔值Boolean
  • 数组Array
  • 对象Object

html代码如下：

<div id="app">
	<menu-item :pstr="pstr" :pnum="12" :pbool="true" :parr="parr" :pobj="pobj"></menu-item>
</div>

js代码如下：

Vue.component('menu-item', {
	props: ['pstr', 'pnum', 'pbool', 'parr', 'pobj'],
	template: `
		<div>
			<div>{{pstr}}</div>
			<div>{{pnum + 1}}</div>
			<div>{{pbool}}</div>
			<ul>
				<li :key="index" v-for="(item, index) in parr">{{item}}</li>
			</ul>
			<div>
				<span>{{pobj.name}}</span>
				<span>{{pobj.age}}</span>
			</div>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		pstr: 'hello',
		parr: ['apple', 'banana', 'orange', 'lemon'],
		pobj: {
			name: '神里',
			age: 21
		}
	}
})

2. 子组件向父组件传值

子组件通过自定义事件向父组件传递信息

<button v-on:click="$emit('enlarge-text')">扩大字体</button>

父组件监听子组件的事件

<menu-item v-on:enlare-text="fontSize += 0.1"></menu-item>

html代码如下：

<div id="app">
	<div :style="{fontSize: fontSize + 'px'}">{{msg}}</div>
	<menu-item v-on:enlarge-text="handle"></menu-item>
</div>

js代码如下：

Vue.component('menu-item', {
	template: `
		<div>
			<button v-on:click="$emit('enlarge-text')">扩大字体</button>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		msg: 'Hello',
		fontSize: 10
	},
	methods: {
		handle: function () {
			this.fontSize += 5;
		}
	}
})

子组件通过自定义事件向父组件传递数据

html代码如下：

<div id="app">
	<div :style="{fontSize: fontSize + 'px'}">{{msg}}</div>
	<menu-item v-on:enlarge-text="handle($event)"></menu-item>
</div>

js代码如下：

Vue.component('menu-item', {
	template: `
		<div>
			<button v-on:click='$emit("enlarge-text", 10)'>扩大字体</button>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		msg: 'hello',
		fontSize: 10
	},
	methods: {
		handle: function (val) {
			this.fontSize += val;
		}
	}
})

3. 非父子组件间传值

单独的事件中心管理组件间的通信

在这里插入图片描述

var eventHub = new Vue()

监听事件与销毁事件

// 监听事件add-todo事件，并且传递参数addTodo
eventHub.$no('add-todo', addTodo)
// 销毁事件add-todo事件
eventHub.$off('add-todo')

触发事件

// 触发add-todo，并且传递参数id
eventHub.$emit('add-todo', id)

html代码如下：

<div id="app">
	<div>父组件</div>
	<div>
		<button @click="handle">销毁</button>
	</div>
	<test-tom></test-tom>
	<test-jerry></test-jerry>
</div>

js代码如下：

var eventHub = new Vue();
Vue.component('test-tom', {
	data: function () {
		return {
			num: 0
		}
	},
	template: `
		<div>
			<div>TOM:{{num}}</div>
			<div>
				<button @click='handle'>点击</button>
			</div>
		</div>
	`,
	methods: {
		handle: function () {
			eventHub.$emit('jerry-event', 2);
		}
	},
	mounted: function () {
		eventHub.$on('tom-event', (val) => {
			this.num += val;
		})
	}
})
Vue.component('test-jerry', {
	data: function () {
		return {
			num: 0
		}
	},
	template: `
		<div>
			<div>JERRY:{{num}}</div>
			<div>
				<button @click='handle'>点击</button>
			</div>
		</div>
	`,
	methods: {
		handle: function () {
			eventHub.$emit('tom-event', 1);
		}
	},
	mounted: function () {
		eventHub.$on('jerry-event', (val) => {
			this.num += val;
		})
	}
})
const vm = new Vue({
	el: '#app',
	data: {
		msg: ''
	},
	methods: {
		handle: function () {
			eventHub.$off('tom-event');
			eventHub.$off('jerry-event');
		}
	}
})

五、组件插槽的作用

1. 父组件向子组件传递内容

插槽位置

Vue.component('alert-box', {
	template: `
		<div class="demo-alert-box">
			<strong>ERROR!</strong>
			<slot></slot>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		msg: ''
	}
});

插槽内容

html代码如下：

<div id="app">
	<alert-box>Something bad happened.</alert-box>
</div>

2. 具名插槽用法

js代码如下：

Vue.component('base-layout', {
	template: `
		<div class="container">
			<header>
				<slot name="header"></slot>
			</header>
			<main>
				<slot></slot>
			</main>
			<footer>
				<slot name="footer"></slot>
			</footer>
		</div>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		msg: ''
	}
});

插槽内容

html代码如下：

<div id="app">
	<base-layout>
		<h1>标题内容</h1>
		<p>主要内容1</p>
		<p>主要内容1</p>
		<p slot="footer">底部内容</p>
		<template slot="header">
			<h1>标题内容</h1>
			<h1>标题内容</h1>
		</template>
	</base-layout>
</div>

3. 作用域插槽

  • 应用场景：父组件对子组件的内容进行加工处理
  1. 插槽定义

js代码如下：

Vue.component('fruit-list', {
	props: ['lists'],
	template: `
		<ul>
			<li :key="item.id" v-for="item in lists">
				<slot v-bind:item='item'>
					{{item.name}}
				</slot>
			</li>
		</ul>
	`
})
const vm = new Vue({
	el: '#app',
	data: {
		msg: '',
		list: [{
			id: 1,
			name: 'apples'
		}, {
			id: 2,
			name: 'bananas'
		}, {
			id: 3,
			name: 'lemons'
		}, {
			id: 4,
			name: 'pineapples'
		}]
	}
})
  1. 插槽内容

html代码如下：

<div id="app">
	<fruit-list :lists="list">
		<template slot-scope="slotProps">
			<strong v-if="slotProps.item.id==2" class="current">
				{{slotProps.item.name}}
			</strong>
			<span v-else>
				{{slotProps.item.name}}
			</span>
		</template>
	</fruit-list>
</div>

综合案例

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

css代码如下：

.container .cart {
    width: 300px;
    margin: auto;
}
.container .title {
    background-color: lightblue;
    height: 40px;
    line-height: 40px;
    text-align: center;
    /* color: #fff; */
}
.container .total {
    background-color: #FFCE46;
    height: 50px;
    line-height: 50px;
    text-align: right;
}
.container .total button {
    margin: 0 10px;
    background-color: #DC4C40;
    height: 35px;
    width: 80px;
    border: 0;
}
.container .total span {
    color: red;
    font-weight: bold;
}
.container .item {
    height: 55px;
    line-height: 55px;
    position: relative;
    border-top: 1px solid #ADD8E6;
}
.container .item img {
    width: 45px;
    height: 45px;
    margin: 5px;
}
.container .item .name {
    position: absolute;
    width: 90px;
    top: 0;
    left: 55px;
    font-size: 16px;
}
.container .item .change {
    width: 100px;
    position: absolute;
    top: 0;
    right: 50px;
}
.container .item .change a {
    font-size: 20px;
    width: 30px;
    text-decoration: none;
    background-color: lightgray;
    vertical-align: middle;
}
.container .item .change .num {
    width: 40px;
    height: 25px;
}
.container .item .del {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
    color: red;
}
.container .item .del:hover {
    background-color: orange;
}

html代码如下：

<div id="app">
	<div class="container">
		<my-cart></my-cart>
	</div>
</div>

js代码如下：

// 标题组件
var CartTitle = {
    props: ['name'],
    template: '<div class="title">{{name}}的商品</div>'
}
// 列表组件
var CartList = {
    props: ['list'],
    template: `
      <div>
        <div :key="item.id" v-for="item in list" class="item">
          <img :src="item.img">
          <div class="name">{{item.name}}</div>
          <div class="change">
            <a href="" @click.prevent="sub(item.id)">-</a>
            <input type="text" class="num" :value="item.num" @blur="changeNum(item.id, $event)">
            <a href="" @click.prevent="add(item.id)">+</a>
          </div>
          <div class="del" @click="del(item.id)">x</div>
        </div>
      </div>
    `,
    methods: {
        changeNum: function (id, event) {
            // 子组件通过自定义事件向父组件传递信息(数量)
            // 触发事件
            this.$emit('change-num', {
                id: id,
                type: 'change',
                num: event.target.value
            });
        },
        sub: function (id) {
            this.$emit('change-num', {
                id: id,
                type: 'sub'
            });
        },
        add: function (id) {
            this.$emit('change-num', {
                id: id,
                type: 'add'
            });
        },
        del: function (id) {
            // 把id传递给父组件  触发事件
            this.$emit('cart-del', id);
        }
    }
}
// 结算组件
var CartTotal = {
    props: ['list'],
    template: `
      <div class="total">
        <span>总价：{{total}}</span>
        <button @click="settlement">结算</button>
      </div>
    `,
    // 计算属性
    computed: {
        total: function () {
            // 计算商品的总价
            let t = 0;
            this.list.forEach(item => {
                t += item.price * item.num;
            });
            return t;
        }
    },
    methods: {
        settlement: function () {
            confirm("你所购买的商品总共" + this.total + "钱");
            // alert("你所购买的商品总共" + this.total +"钱");
        }
    }
}
// 购物车组件
Vue.component('my-cart', {
    data: function () {
        return {
            uname: '神里の凌华',
            list: [{
                id: 1,
                img: 'img/1.png',
                name: '名称1',
                num: 1,
                price: 40
            }, {
                id: 2,
                img: 'img/2.jpg',
                name: '名称2',
                num: 1,
                price: 40
            }, {
                id: 3,
                img: 'img/3.jpg',
                name: '名称3',
                num: 1,
                price: 40
            }, {
                id: 4,
                img: 'img/4.png',
                name: '名称4',
                num: 1,
                price: 40
            }, {
                id: 5,
                img: 'img/5.jpg',
                name: '名称5',
                num: 1,
                price: 40
            }]
        }
    },
    // 父组件通过props给子组件传值
    // 父组件监听子组件的事件(删除)
    template: `
      <div class="cart">
        <cart-title :name="uname"></cart-title>
        <cart-list :list="list" @change-num="changeNum($event)" @cart-del="delCart($event)"></cart-list>
        <cart-total :list="list"></cart-total>
      </div>
    `,
    components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
    },
    methods: {
        changeNum: function (val) {
            // 分为三种情况：输入域变更、加号变更、减号变更
            if (val.type == 'change') {
                // 根据子组件传递过来的数据，跟新list中对应的数据
                this.list.some(item => {
                    if (item.id == val.id) {
                        item.num = val.num;
                        // 终止遍历
                        return true;
                    }
                });
            } else if (val.type == 'sub') {
                // 减一操作
                this.list.some(item => {
                    if (item.id == val.id) {
                        // 当商品为零时停止减一操作
                        if (item.num == 0) {
                            alert('商品为零了!');
                            return true;
                        }
                        item.num -= 1;
                        // 终止遍历
                        return true;
                    }
                });
            } else if (val.type == 'add') {
                // 加一操作
                this.list.some(item => {
                    if (item.id == val.id) {
                        // 先将String转化为number
                        // item.num -= 0;
                        // item.num *= 1;
                        // item.num = +item.num;
                        item.num = parseInt(item.num);
                        // 然后在加一
                        item.num += 1;
                        // 终止遍历
                        return true;
                    }
                });
            }
        },
        delCart: function (id) {
            // 方法一
            this.list.some((item, index) => {
                if (item.id == id) {
                    this.list.splice(index, 1);
                    return true;
                }
            });
            // 方法二
            // 根据id删除list中对应的数据
            // 1、找到id所对应数据的索引
            // let index = this.list.findIndex(item => {
            //   // return item.id == id;
            //   if (item.id == id) {
            //     return true;
            //   }
            // });
            // 2、根据索引删除对应数据
            // this.list.splice(index, 1);
        }
    }
})
const vm = new Vue({
    el: '#app',
    data: {
    }
})
神里の凌华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3学习笔记
qq_38170252的博客
03-01 292
Vue3.0六大亮点 Performance：性能比Vue 2.x快1.2~2倍 Tree shaking support：按需编译，体积比Vue 2.x更小 Composition API：组合API（类似React Hooks） Better TypeScript support：更好的Ts支持 Custom Renderer API：暴露了自定义渲染API Fragment,Teleport(Protal),Suspense:更先进的组件 Vue 3.0是如何变快的 diff方法优化： Vue2
vue-super-flow:基于Vue的流程图组件。vue流程图
04-13
vue-super-flow A flowchart editor component base on Vue. Vue flowchart. Vue 流程图。 Installation npm install vue-super-flow yarn add vue-super-flow import SuperFlow from 'vue-super-flow' import 'vue-super-flow/lib/index.css' Vue.use(SuperFlow) Attributes 属性 类型 默认值 描述 draggable Boolean true 是否开启节点拖拽 linkAddable Boolean true 是否开启快捷创建 link linkEditable Boolean true link 是否可编辑 hasMarkLine Boolean true 是否
vue点击加载
m0_62165756的博客
05-08 436
原理很简单定义两个数组用数组用数组替换的思想在给一个if循环做如下图 <template> <view class=""> <view class="" v-for="(item,index) in info"> <h5>{{item.name}}</h5><h5>{{item.id}}</h5><h5>{{item.age}}</h5> <button type="def
vue封装的组件如何在调用时绑定click事件
weixin_43169949的博客
08-13 3881
我们在开发中会封装许多的通用的组件，那么如何封装好一个组件时，在调用的时候绑定click事件呢？ 1.child组件 <template> <div class="child" @click="$emit'childClick',123) /> //说明：第一个参数：childClick ，是事件名，在调用的时候需要用到，第二个参数123，是你在调用的时候传...
vue基础一（模板语法，事件绑定，表单输入绑定，计算属性，侦听器）
qq_48192192的博客
10-19 683
vuevue简介mvvm模式组件化安装和使用在HTML中在node中为什么要把data对象变成函数并return关于vue3的根节点生命周期 vue简介 vue是一套用于构建用户界面的渐进式框架。 Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue 也完全能够为复杂的单页应用提供驱动。 mvvm模式 MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在
VUE3 之 click 事件
追风人的博客
01-03 1万+
目录 1. 概述 2. click 事件 3. 综述 4. 个人公众号 1. 概述 老话说的好：努力帮别人解决难题，你的难题也就不难解决了。 言归正传，今天我们来聊聊 VUE3 的 click 事件的相关知识。 2. click 事件 2.1 实现数字递减 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记vue学习笔记
08-14
Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue学习笔记vue学习笔记vue学习笔记
12-02
vue学习笔记vue学习笔记vue学习笔记
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue中事件修饰符详解
很久很久以前的的博客
07-06 462
vue 事件修饰符 .stop 阻止事件冒泡 .prevent 阻止事件的默认行为 .once 只触发一次 .self 点击元素本身触发 .capture 向下捕获方式触发 .native 转化为原生事件 .passive 滚动事件延迟
VUE的事件使用和处理
weixin_43228946的博客
08-30 301
在VUE里面，事件处理，直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。我们需要注意一下：@click和v-on:click是一样，只不过形式不一样，本质是一样的，前者是后者的简写形式。现在我们看下具体代码： ...
【踩坑日记】Vue组件@click事件点击没有反应
LadenxxxxD
10-25 1万+
项目场景： 在自定义组件上绑定@click事件无法触发 问题描述： 在自定义组件上绑定@click事件无法触发 <template> <div>自定义组件<div> </template> <MyComponent @click="myMethods"></MyComponent> 原因分析： 凡是组件中绑定的事件，都应该是这个组件本身就存在的事件。 因此在自定义组件上绑定的click会被vue认为是组件内部的事件。 事实
vue @click 多个事件_Vue当中的模板、指令与修饰符
weixin_39716521的博客
11-21 710
模板 template的三种写法第一种、Vue完整版，写在HTML里面<在html里面{{n}}会自动被替换，@click也会自动的被理解并且添加上一个事件监听。最后我们只需要new Vue一下，然后传入一个元素传入一个选择器即可使用。第二种、Vue完整版，写在选项里面<div 这种方法在html里面只需要写一个div和id里面的内容留空。然后将内容写在template里面即可，注意一...
vue-super-flow的使用
热门推荐
qq_37899622的博客
09-08 2万+
Vue-super-flow 是基于vue 开发的一款生成、预览流程图的组件。使用者可以根据不同的需求对图、节点、连线进行细致的控制。 一、安装 npm install vue-super-flow 二、引用（选择其中一种方式即可） ①全局引用：在main.js文件中添加 import SuperFlow from 'vue-super-flow' import 'vue-super-flow/lib/index.css' Vue.use(SuperFlow) ②局部引用：在要用到vue-super-f
vue-super-flow使用
qq_46344419的博客
06-26 2332
vue-super-flow使用
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 1016
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
尚硅谷vue学习笔记
08-18
很高兴回答你关于尚硅谷Vue学习笔记的问题！对于Vue的学习，尚硅谷提供了很多优质的学习资源和教程。下面是一些关键的学习笔记要点： 1. Vue基础：了解Vue的基本概念和核心特性，如Vue实例、模板语法、计算属性、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值