前端常用内容

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}
],
}// 获取对应迭代+项目+负责人+状态的bugasync 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}}
});