当前位置：首页 > article >正文

前端常用内容

article 2025/2/21 3:08:19

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
    }
  }
});

查看全文

http://www.kler.cn/a/405594.html