Vue的一些使用技巧

VS Code中关于Vue的插件使用

一、使用技巧

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.项目规范

前端想要做好项目,需要注意的地方(基础):

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值