vue基本使用(二)

最新推荐文章于 2023-10-23 09:31:19 发布
最新推荐文章于 2023-10-23 09:31:19 发布
阅读量368 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tortoise666/article/details/108581330
版权

一、组件

Vue.component(‘组件名’, 组件)
每个组件常用的包含有：
template(相当于html)，
data(存放数据)
methods(自定义函数写在里面)
computed(计算属性)
watch(侦听器)
生命周期钩子函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
   		// 局部组件的写法,在使用外部组件时，需要在组件内components注册引入的外部组件
        var Header = {
            template: "<div>顶部</div>"
        }
        var Footer = {
            template: "<div>底部</div>"
        }
        var Home = {
            template: `<div>
                <Header></Header>
                <div class="content">内容</div>
                <Footer></Footer>
                </div>`,
            components: {
                Header,
                Footer
            }
        }
        var Mine = {
            template: `<div>
                <Header></Header>
                <div class="content">我的</div>
                <Footer></Footer>
                </div>`,
            components: {
                Header,
                Footer
            }
        }
        new Vue({
            el: '#app',
            template: `<div>
                    <Home></Home>
                    <Mine></Mine>
                </div>`,
            components: {
                Home,
                Mine
            }
        })
    </script>
</body>

</html>

把上面公共需要的组件写成公共组件

<script>
        var Header = {
            template: "<div>顶部</div>"
        }
        var Footer = {
            template: "<div>底部</div>"
        }
        Vue.component('Header', Header) // 公共组件
        Vue.component('Footer', Footer) // 公共组件
        var Home = {
            template: `<div>
                <Header></Header>
                <div class="content">内容</div>
                <Footer></Footer>
                </div>`
        }
        var Mine = {
            template: `<div>
                <Header></Header>
                <div class="content">我的</div>
                <Footer></Footer>
                </div>`
        }
        new Vue({
            el: '#app',
            template: `<div>
                    <Home></Home>
                    <Mine></Mine>
                </div>`,
            components: {
                Home,
                Mine
            }
        })
    </script>

二、动态组件

作用： 在多标签的界面我们可能需要多个组件来回切换，这里用动态组件会方便很多
动态组件实现：通过 Vue 的 元素加一个特殊的 is attribute 来实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let ComponentA = {
            template: `<div>我是A组件</div>`
        }
        let ComponentB = {
            template: `<div>我是B组件</div>`
        }
        let ComponentC = {
            template: `<div>我是C组件</div>`
        }
        new Vue({
            el: '#app',
            template: `<div>
                <button @click="componentType = 'ComponentA'">A</button>
                <button @click="componentType = 'ComponentB'">B</button>
                <button @click="componentType = 'ComponentC'">C</button>
                <component :is="componentType"></component>
            </div>`,
            data() {
                return {
                    componentType: 'componentA'
                }
            },
            components: {
                ComponentA,
                ComponentB,
                ComponentC
            }
        })
    </script>
</body>

</html>

三、slot(插槽)

是什么， 有什么作用？
slot(插槽)顾名思义，就是在建组件的时候预留一个位置，在后期引用组件的时候可以按需给组件分发一些内容，提高组件的灵活性
弊端
是只要一个component中传入了slot，那么如果父组件更新，必定会update子组件，造成性能浪费

普通插槽：

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let Child = {
            template: `<div>
                <span>我是：<slot></slot></span>   // 插槽预留位置
            </div>`
        }
        let Parent = {
            template: `<div>
                    <Child>小明</Child> // 分发内容会填充到插槽预留的地方
                </div>`,
            components: {
                Child
            }
        }
        new Vue({
            el: '#app',
            template: `
            <div>
                <Parent/>
            </div>
            `,
            components: {
                Parent
            }
        })
    </script>
</body>

页面显示：
在这里插入图片描述

具名插槽：
具名插槽，就是分发的内容得对号入座了，不能像之前那样随意。具名插槽对我们需要分发多个内容的时候是很有用的
组件内插槽使用name属性给插槽命名
引用组件得时候使用v-slot:name来把内容引入到对应插槽内

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let Child = {
            template: `<div>
                <header>我是：<slot name="header"></slot></header>
                <div>我是：<slot></slot></div>
                <footer>我是：<slot name="footer"></slot></footer>
            </div>`
        }
        let Parent = {
            template: `<div>
                    <Child>
                        <template v-slot:header>顶部</template>
                        <template v-slot:footer>底部</template>
                        内容部分
                    </Child>
                </div>`,
            components: {
                Child
            }
        }
        new Vue({
            el: '#app',
            template: `
            <div>
                <Parent/>
            </div>
            `,
            components: {
                Parent
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

作用域插槽
每个组件只能访问自己内部的属性方法，如果想往插槽放入子组建内部数据，这里需要用到作用域插槽
v-slot可以缩写为( ‘#’ )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let Child = {
            template: `<div>
                <header>我是：<slot name="header"></slot></header>
                <div>我是：<slot :msg='msg'></slot></div>  // 将 msg 作为 <slot> 元素的一个 attribute 绑定上去(插槽 prop)
                <footer>我是：<slot name="footer"></slot></footer>
            </div>`,
            data() {
                return {
                    msg: '我是子组件数据'
                }
            }
        }
        let Parent = {
            template: `<div>
                    <Child>
                        <template v-slot:header>顶部</template>
                        <template v-slot:footer>底部</template>
                        // 将包含所有插槽 prop 的对象命名为 child，也可以使用任意你喜欢的名字
                        <template v-slot:default = 'child'>{{child.msg}}</template>
                    </Child>
                </div>`,
            components: {
                Child
            }
        }
        new Vue({
            el: '#app',
            template: `
            <div>
                <Parent/>
            </div>
            `,
            components: {
                Parent
            }
        })
    </script>
</body>

</html>

四、计算属性和侦听器

1.计算属性computed
模版内使用简单逻辑表达式是很方便的，但是复杂的逻辑写在模版内会稍显厚重，不利于后期维护，所以复杂的逻辑推荐使用计算属性.
调用函数也可以达到相同效果但区别在于，使用函数的情况只要有数据更新都会调用，但计算属性是基于它们的响应式依赖进行缓存的也就是计算属性只会在对应属性发生改变才会去计算。从性能上来说更推荐使用计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>计算属性和侦听器</title>
	</head>
	<body>
		<div id="app">
			<input v-model="firstName"/>
			<input v-model="lastName"/>
			<span>{{name}}</span>
			<input v-model="val" />
			<!-- 函数调用的时候也会实时获取到数据 -->
			<span>函数调用{{getName()}}</span>
			<!-- 函数和计算属性区别在于：函数调用只要页面有数据刷新都会调用函数，但使用计算属性只会对应属性发生改变才会掉用，比如在v-model为val的输入框输入数据，函数也会调用 -->
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						firstName: '',
						lastName: '',
						val: ''
					}
				},
				// 计算属性
				computed:{
					name() {
						return this.firstName + this.lastName
					}
				},
				// 侦听器
				watch: {
					
				},
				methods:{
					getName() {
						console.log(1)
						return this.firstName + this.lastName
					}
				}
			})
		</script>
	</body>
</html>

2.侦听器watch
侦听器监听vue实例的变化，如data中的数据、computed、路由的变化
特点：
1.监听获取两个参数一个，一个改变前的，一个改变后的
2.可深度监听
3.可监听路由做页面转换的动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>watch</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <input type="text" v-model="name">
        <button @click="person.name = 'lili'">查看</button>
        <button @click="person.children.name = 'xiaolili'">深度监听</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    name: 'xiaoxiao',
                    person: {
                        name: 'xiaoxiao',
                        age: 12,
                        sex: '女',
                        children: {
                            name: 'xiaohua',
                            age: 1,
                            sex: '男'
                        }
                    },

                }
            },
            computed: {
                getNewName() {
                    return this.name
                }
            },
            watch: {
            	// 监听data中的数据
                name(newVal, oldVal) {
                    console.log(newVal, oldVal)
                },
                // 引用类型监听
                'person.name' (newVal, oldVal) {
                    console.log(newVal, oldVal)
                },
                // 深度监听，deep必须为true
                person: {
                    handler(val) {
                        console.log(val)
                    },
                    deep: true
                },
                // 监听computed
                getNewName(newVal, oldVal) {
                    console.log(newVal, oldVal)
                }
            }
        })
    </script>
</body>

</html>

五、filter过滤

filter(过滤器)就是一个javascript函数，filter放在javascript表达式后面由管道("|")符号指示
局部filter过滤

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>filter</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let Home = {
            // 可以多个过滤器串联，以管道符号("|")指示，后面的过滤器根据前面数据做处理
            template: `<div>
                    <span>{{count | getCount(1, 2) | getNewCount}}</span>           
                </div>`,
            data() {
                return {
                    count: 1
                }
            },
            // 局部过滤器
            filters: {
                getCount(val, num1, num2) {
                    console.log(val) // 1
                    return val + num1 + num2
                },
                getNewCount(val) {
                    return val / 2
                },

            }
        }
        new Vue({
            el: '#app',
            template: `<div>
                    <Home/>
                </div>`,
            components: {
                Home
            }
        })
    </script>
</body>

</html>

全局过滤器

<script>
        // 全局过滤所有组件可以调用
        Vue.filter('getDate', function (val) {
            return val + 1
        })
        let Home = {
            template: `<div>
                    <span>{{date | getDate}}</span>         
                </div>`,
            data() {
                return {
                    date: '2020-9-15'
                }
            }
        }
        new Vue({
            el: '#app',
            template: `<div>
                    <Home/>
                </div>`,
            components: {
                Home
            }
        })
    </script>

六、父子组件双向绑定

方法一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件双向绑定</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let Child = {
            template: `<div>
                <input type="text" v-model="getValue"/>
                </div>`,
            props: {
                value: {
                    type: String
                }
            },
            computed: {
                getValue: {
                    get: function() {
                        return this.value  // 把父组件传递过来的值赋值给getValue
                    },
                    set: function(val) {
                        this.$emit('input', val)  // 所以触发input事件把值传给父组件，使其与子组建输入同步
                    }
                }
            }

        }
        let Parent = {
            template: `<div>
                    <Child v-model="value"/>
                    {{value}}
                </div>`,
            data() {
                return {
                    value: 'xxxxx'
                }
            },
            components: {
                Child
            }
        }
        new Vue({
            el: "#app",
            template: `<div>
                    <Parent/>
                </div>`,
            components: {
                Parent
            }
        })
    </script>
</body>

</html>

方法二
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件双向绑定</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script>
        let Child = {
            template: `<div>
                <input type="text" @input="changeValue($event)"/>
                </div>`,
            props: {
                value: {
                    type: String
                }
            },
           // v-model 默认prop是值，event是input事件，这儿我们给他自定义属性和方法
            model: {
                prop: 'value', // 父组件传递过来的数据
                event: "change" // changeValue里面$emit定义的事件
            },
            methods: {
                changeValue(e) {
                    console.log(e)
                    this.$emit('change', e.target.value)
                }
            }
        }
        let Parent = {
            template: `<div>
                    <Child v-model="value"/>
                    {{value}}
                </div>`,
            data() {
                return {
                    value: 'xxxxx'
                }
            },
            components: {
                Child
            }
        }
        new Vue({
            el: "#app",
            template: `<div>
                    <Parent/>
                </div>`,
            components: {
                Parent
            }
        })
    </script>
</body>

</html>

七、ref的使用

1.获取dom元素:
在vue里面是不建议直接操作dom元素的，但是有时候的需求我们需要去操作dom，操作dom我们也可以用原生的方法，但因为vue是单页面应用，所有组件最终会汇聚到一个地方如果用id，我们难免会遇到id重合的时候，使用其他的想象一下工程量一定很大，耗费性能。所有在这种时候我们可以用ref，它会在每个组件内部有自己的一个作用域，也不用担心命名重合的情况

<script>
        new Vue({
            el: '#app',
            template: `<div>
                    <span ref="name">姓名</span>
                </div>`,
            data() {
                return {}
            },
            mounted() {
                console.log(this.$refs['name'])
            },
        })
    </script>

在这里插入图片描述

2.调取子组件内部属性方法

<script>
        let componentA = {
            template: `<div>
                <span ref="name">姓名</span>
            </div>`,
            data() {
                return {}
            },
            methods: {
                getChild() {
                    console.log('子组建方法')
                }
            }
        }
        new Vue({
            el: '#app',
            template: `<div>
                    <componentA ref="child"/> 
                </div>`,
            data() {
                return {
                    rootVal: 'dsdsds'
                }
            },
            components: {
                componentA
            },
            mounted() {
                this.$refs['child'].getChild() // 调用子组建方法
            }
        })
    </script>
tortoise666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue报错解决1
demons19961019的博客
09-25 817
Vue警告]:你正在使用仅运行时构建的Vue，模板编译器不可用。要么将模板预编译为呈现函数，要么使用包含编译器的构建。修改后的引入方法引入的是vue的完整版，包含编译器，可以在运行时编译模板和使用vue的模板语法。原有引入方法引入的是vue的运行时版，不包含编译器，无法在运行时编译模板。页面原有引入vue方法。
webpack4.0中app.vue使用报错*
qq_43205778的博客
09-16 1638
webpack4.0中app.vue使用报错,提示 VueLoaderPlugin出了问题，请问各位大佬有碰到过这个问题吗，我是在学vue.js实战这本书中遇到的，可能这本书写的时间有点儿久了，很多内容更新过了，坑很多，感谢解答，谢谢 报错截图 这是npm报错代码 ERROR in ./app.vue Module Error (from ./node_modules/vue-loader/l...
vue3+ts import App.vue 报错 解决方案
qiaozhilian的博客
10-23 837
在创建vue3+ts的脚手架之后会出现在main.ts中可能会出现报错。
vue模块引入错误问题
AgamaDog的博客
07-27 1万+
Module not found: Error:vue.runtime.esm.jsdoes not match the corresponding path on diskvue`. 解决办法：把下图中红色标出的Vue改为小写。 因为import Vue from 'vue’实际上是 import Vue from “…/node_modules/vue/dist/vue.js”，文件名是小写。 ...
Vue从安装到运行报错汇总（踩坑）
Siobhan_Mxin的博客
09-07 2083
1、main.js里面data定义是json对象，不是函数 2、vm is not used : 3、 -- fix : vue.config.js 添加 lintOnSave:false, 4、弹出页面IP为 0.0.0.0错误：​编辑 5、导入vue报错：（更改默认import Vue from “Vue”） 6、启动vue后 浏览器页面出现乱码问题： 7、-- export 'default' (imported as 'VueRouter') was not found
vue使用二次封装存储localStorage
最新发布
03-04
在Vue.js开发中，我们经常需要与浏览器的本地存储...通过这样的封装，我们可以更灵活、高效地在Vue应用中管理和使用localStorage，同时保持代码的整洁和模块化。这不仅提高了开发效率，也使得代码更容易理解和维护。
vue二级路由设置方法
08-28
Vue 二级路由设置方法 Vue 二级路由设置方法是 Vue.js 框架中的一种常见的路由配置方法，它...通过本文的介绍，读者可以学习到 Vue 二级路由设置方法的实现步骤和相关知识点，从而更好地理解 Vue 路由的配置和使用。
vue项目中使用fetch的实现方法
10-17
### 二、fetch的使用 1. **基本使用**： fetch方法接受两个参数：`input`（资源的URL或Request对象）和`init`（配置对象）。例如： ```javascript fetch('http://example.com/data.json') .then(response => ...
vue中使用的threebsp.zip
12-03
将Three.js与Vue.js结合使用，可以在Vue组件中轻松集成3D元素，从而为用户提供更直观的交互体验。 `threebsp.js`是Three.js的一个扩展，它引入了名为BSP（Binary Space Partitioning）的算法，这是一种用于处理3D...
vue基本语法讲解.pdf
05-11
二、 Vue 基本结构 1. 模板（template）：模板只能包含一个父节点，即模板内部有且只有一个根结点。这是 Vue 单文件组件规范。template 类似于 html 部分。 2. 脚本（script）：Vue 通常用 es6 来写，用 export ...
在webpack下使用vue3 无法引入单文件的vue组件问题
闲言
04-21 1525
WARNING in ./src/index.js 30:13-16 export 'default' (imported as 'Vue') was not found in 'vue' (possible exports:
使用vite + vue3遇到的问题
qq_44570971的博客
10-20 547
vite + vue3遇到的问题
Vue3 创建项目遇到的问题汇总
热门推荐
BigOrange的博客
09-01 1万+
1.Uncaught SyntaxError:2. ` Uncaught Error: Catch all routes ("*") must now be defined using a param with a custom regexp.3 typeError: : Failed to fetch dynamically imported module;net::ERR_ABORTED 404;5JavaScript Uncaught RangeError: Maximum call stack
vue3中使用import时报错
melissaomy的博客
12-18 1599
vue3中使用import时报错
Vue报错记录
yangmuxxx的博客
09-04 129
Vua报错 解决方案： 在main.js里面注册全局组件 mport Vue from ‘vue’ import App from ‘./App’ import router from ‘./router’ import Header from ‘./components/public/Header’ import Footer from ‘./components/public/Footer’ Vue.config.productionTip = false //全局注册组件 Vue.component
React中Dva状态管理（model）的使用总结和理解
小流至江河的博客
11-27 8125
一 概述 React中全局状态管理官方推荐使用Redux，Redux的使用场景其实在单个应用中是处于使用率只有20%，却有80%的学习成本。算是React全家桶最难理解的部分了，相信很多人学习它时越学是越学不动，我就是要放弃的时候，了解到了React-redux和redux-saga， 它们是对redux的简化处理工具。可他们配置和文件结构，依然麻烦。直到Dva的出现将React全局状态管理简化到了极致。那么今天带大家一起快速学习下Dav中全局状态的使用技巧，本篇文章仅仅是对使用方式的个人理解。 由于
React组件中监听函数获取不到最新的state
YanHSama的博客
09-24 3597
因为监听器绑定的是第一次render时生成的函数，这个函数的上下文中的state也是第一次的值，所以即便后面render了多次，因为绑定的是第一次render的函数，所以state值也是旧的。react组件中使用监听函数，无法获取最新state，打印的state一直是初始默认值。
Vue 3 框架
weixin_58448088的博客
10-29 2475
vue 3 中使用的是组合式API，组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对vue的响应式系统有更深的理解才能高效使用。相应的，他的灵活性也使得组织和重用逻辑的模式更加强大。
vue3.0的vuex
qq_40519017的博客
05-28 2026
1. bus的使用 原理：其实bus就相当于一个vue实例，兄弟之间的数据传输是要基于vue实例（也就是创建好的bus） 创建一个bus.js文件 import Vue from 'vue' const Bus = new Vue(); export default Bus 在maini.js中导入该文件 import Bus from './lab/bus' Vue.prototy...
vue 中的render函数基本使用
05-25
在使用 render 函数之前，需要先了解 Vue 的虚拟 DOM。虚拟 DOM 是一个 JavaScript 对象，它描述了真实 DOM 树的结构和属性。使用虚拟 DOM 可以提高性能，降低真实 DOM 操作的代价。 下面是一个简单的使用 render ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值