目录标题
一、使用技巧
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 创建公共组件,在每个页面中个性化使用。 - 超过两次以上使用的函数对其进行封装