Vue的一些使用技巧

杨·先·生

已于 2022-07-02 16:49:26 修改

阅读量172

点赞数

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

于 2022-06-09 14:50:16 首次发布

本文链接：https://blog.csdn.net/yxsusername/article/details/125203044

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

VS Code中关于Vue的插件使用

目录标题

一、使用技巧
- 1.主体部分
二、词汇表
- 1.webpack
3.项目规范

一、使用技巧

1.主体部分

1.1 获取输入框的值：`event.target.value`

重点是6行、11行、26行的代码

<body>
	<div id="app">
		<ul>
				<!-- 3.跟1.类似，但比1复杂，这里使input事件绑定到了方法中  -->
				<label for="messageTwo">输入的内容是：{{messageTwo}}</label>
				<input type="text" :value="messageTwo" @input="valueChange" id="messageTwo">
			</li>
			<li>
				<!-- 4.跟3.类似，但比1复杂，这里使用了表达式  -->
				<label for="messageThree">输入的内容是：{{messageThree}}</label>
				<input type="text" :value="messageThree" @input="messageThree = $event.target.value" id="messageThree">
			</li>
		</ul>
	</div>
	<script>
		const obj = {
			messageTwo: '你好呀。',
			messageThree: '你好呀，世界'
		}
		const app = new Vue({
			el:'#app',
			data: obj,
			methods: {
				valueChange(event) {
					// console.log('被输入');
					this.messageTwo = event.target.value;
				}
			}
		})
	</script>
</body>

1.2 获取数据的类型：`typeof 变量名称`

<body>
	<div id="app">
		<button @click="work('abc')">点击</button>
		<button @click="work(123)">点击</button>
	</div>
	<script>
		const obj = {
			message: '你好',
		}
		const app = new Vue({
			el:'#app',
			data: obj,
			methods: {
				work(name) {
					console.log(typeof name);
				}
			}
		})
	</script>
</body>

1.3 将其他类型转换为Int类型：`parseInt(需要转换的值)`

methods: {
	agefivechange(agefive) {
		this.ageone=agefive * 1
		this.ageone=parseInt(agefive)
	},
}

1.4 端口号被占用

如果你本机的8080端口占用了，可以修改 projectName/config/index.js的端口配置。
projectName相当于是项目名称。

二、词汇表

1.webpack

词含义	英文
————————	——————————————————————————————————
包	bundle
插件	plugins
入口	entry
入口起点	entry point
输出	output
	Loader
编译器	compiler

3.项目规范

前端想要做好项目，需要注意的地方（基础）：

页面格式需要对齐
CSS命名的问题
页面布局需要进行整体规范
3.1 创建Main组件包裹整个页面，修改Main组件对整体项目的页面进行统一。
3.2 如header、footer这些公共组件写入Main中。创建开关功能以便页面个性化处理。
防抖节流等功能
4.1 可以创建公共按钮，并对按钮点击次数进行限制，在一定时间内，按钮只可以被点击一次。
4.2 发送请求时加入队列，每次请求时，对队列中请求进行处理。
页面中无数据状态
5.1 创建公共组件，在每个页面中个性化使用。
超过两次以上使用的函数对其进行封装