Style
1. 文本左对齐 style="text-align: left;"
2. 文本居中 style="text-align: center;"
3. 文本右对齐 style="text-align: right;"
margin 属性可以设置以下四种类型的外边距：
1. 单一值：为所有四个方向（上、右、下、左）设置相同的外边距。
<div :style="{ margin: '20px' }">内容</div>
2. 两个值：第一个值设置垂直方向（上和下）的外边距，第二个值设置水平方向（左和右）的外边距。
<div :style="{ margin: '20px 10px' }">内容</div>
3. 三个值：第一个值设置上边的外边距，第二个值设置水平方向（左和右）的外边距，第三个值设置下边的外边距。
<div :style="{ margin: '20px 10px 30px' }">内容</div>
4. 四个值：按顺序设置上、右、下、左的外边距。
<div :style="{ margin: '20px 10px 30px 40px' }">内容</div>
此外，margin 还可以使用以下方位属性分别设置各个方向的外边距：
margin-top：设置上边的外边距。
margin-bottom：设置下边的外边距。
margin-left：设置左边的外边距。
margin-right：设置右边的外边距。输入框
占位符 暗提示 <input placeholder="输入一些文字">v-model
输入框，选择框，下拉框等的值。v-model指定为info字段。
输入框输入3，info=3。
info默认值为5，则输入框默认输入的就是5。
<body>
<div id="app">
<!-- 使用 v-model 绑定 input 元素 -->
<input type="text" placeholder="请输入内容" v-model="info">
<!-- 显示绑定的数据 -->
<p>你输入的内容是：{{ info }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
info: '' // 初始数据
};
}
}).mount('#app');
</script>
</body>v-bind
value是举例
v-model:value = 本地值
修改本地值时，value会改变。
value改变时，例如输入框输入时，本底值是不会跟随改变的。
<div>
{{wa}}
<input type="text" v-bind:value="wa">
</div>
data() {
return {
wa:'wa字段的值',
}表格
label 表格title
prop 该列对应的值，从哪个key取
<el-table :data="bug_data" style="width: 100%;margin-top: 10px">
<el-table-column label="项目" prop="program" width="100%"></el-table-column>
<el-table-column label="等级" prop="grade" width="80%" sortable></el-table-column>
<el-table-column label="状态" prop="status" width="80%"></el-table-column>
<el-table-column label="描述" prop="content" width="500"></el-table-column>
<!--<el-table-column label="截图" prop="picture" width="80"></el-table-column>-->
<el-table-column label="负责人" prop="kahuna" width="80"></el-table-column>
<el-table-column label="作案日期" prop="create_time" width="110"></el-table-column>
</el-table>
data() {
return {
// bug列表数据
bug_data: [{content: "对面没做升级，你们平台的远程升级功能还没有调试，需要验证一下",
create_time: "11-20 17:19",
grade: "P0",
id: 26}
],
}
// 获取对应迭代+项目+负责人+状态的bug
async iteration_bugs() {
const response = await this.$request.post('/program/iteration/bugs', this.searchList)
// 判断请求是否成功
if (response.data.code === 200) {
this.bug_data = response.data.data.bugs
} else {
this.$message.error('失败');
}
},生命周期方法 mounted()
在 Vue 组件中，mounted() 会在组件的 DOM 被新创建并插入到页面中之后被调用。这是 Vue 实例生命周期中的一个重要阶段，意味着组件的模板和初始渲染已经完成，可以进行 DOM 操作、数据获取（例如通过 AJAX 请求）、或者初始化第三方库等操作。
// 进入页面就调用
export default {
// 生命周期方法
mounted() {
this.iteration_list()
},
methods: {
// 方法
async iteration_list() {
const response = await this.$request.get('/program/iteration/list')
//巴啦啦
}
},监听watch
在Vue.js中，watch 是一个非常重要的选项，它用于监听数据属性的变化，并在数据变化时执行相应的操作。watch 接受一个对象作为参数，该对象的键是需要监听的数据属性名，值是一个回调函数或者是一个包含多个选项的对象。
以下是 watch 的几种常见用法：
常见用法
- 直接监听某个数据属性的变化，并在变化时执行回调函数。
- 回调函数会接收两个参数：新值和旧值。
new Vue({ el: '#app', data: { message: 'Hello Vue!' }, watch: { message(newValue, oldValue) { console.log(`message 从 ${oldValue} 变为 ${newValue}`); } } });绑定方法
- 可以将监听回调定义为组件的一个方法，然后在
watch中引用该方法。new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { handleMessageChange(newValue, oldValue) { console.log(`message 从 ${oldValue} 变为 ${newValue}`); } }, watch: { message: 'handleMessageChange' } });深度监听
- 如果需要监听一个对象内部属性的变化，可以使用
deep选项进行深度监听。 - 在这个例子中，如果
userInfo对象中的name或age属性发生变化，watch都会监听到并执行相应的回调函数。 -
new Vue({ el: '#app', data: { userInfo: { name: 'John', age: 30 } }, watch: { userInfo: { handler(newValue, oldValue) { console.log('userInfo 发生变化'); }, deep: true } } });立即执行
- 使用
immediate选项可以指定在watch开始监听时立即执行一次回调函数，而不仅仅是在数据变化时执行。 - 在这个例子中，当 Vue 实例被创建时，
watch会立即执行一次回调函数，打印出message的初始值。new Vue({ el: '#app', data: { message: 'Hello Vue!' }, watch: { message: { handler(newValue, oldValue) { console.log(`message 从 ${oldValue} 变为 ${newValue}`); }, immediate: true } } });
