vue 笔记（3）

最新推荐文章于 2024-12-22 23:56:42 发布

原创最新推荐文章于 2024-12-22 23:56:42 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

本文介绍了如何在Vue.js中使用newVue构造函数和公共/私有过滤器，并展示了如何通过多个过滤器和传递参数。此外，详细讲解了Axios在前端请求中的应用，包括GET和POST方法，以及与Vue组件的整合实例。

new Vue({

el:' #app'

})

相等

new Vue({

}) .$mount('#app')

返回首字母大写的字符串

私有过滤器

<div class="app">
            <p>{{message|capi}}</p>
    </div> 
filters:{
                capi(e){
                    const first= e.charAt().toUpperCase()
                    const str=e.slice(1)
                    return first+str
                }
            }

公有过滤器

<div class="app">
            <p>{{message|capi}}</p>
    </div>
 Vue.filter('capi',(e)=>{
            const first= e.charAt().toUpperCase()
                    const str=e.slice(1)
                    return first+str})

多个调用和传递参数

<div class="app">
            <p>{{message|capi1|capi2 }}</p>
            <p>{{message|filter(1,2)}}</p>
    </div>
Vue.filter('capi1',(e)=>{
            const first= e.charAt().toUpperCase()
                    const str=e.slice(1)
                    return first+str})
Vue.filter('capi2',(e)=>{
            const first= e.charAt().toUpperCase()
                    const str=e.slice(1)
                    return first+str})
        Vue.filter('filter',(msg,age1,age2)=>{   第一个参数默认为 message  age1=1 age2=2

        })

侦听器

watch侦听器和对象格式侦听器

<div id="app">
    <input type="text" v-model="username">
 <input type="text" v-model="list.uname">
  </div>
const vm = new Vue({
      el: '#app',
      data: {
        username: 'admin',
        list:{uname:'zs'}
      },
      // 所有的侦听器，都应该被定义到 watch 节点下
      //对象侦听器才能设置是否自动触发
      watch: {
        // 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
        // 新值在前，旧值在后 旧值可省略
        username(newVal,oldval) {   该类侦听器无法自动触发
            console.log(result)
          }),
        'list.uname':{    //因为是字符串 所以加' '
            handler(newval){
                console.log(newval)
                },
                immediate:true   //打开浏览器自动触发一次
            }
        }
      }
    })

axions

原生js

// 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await！
      // await 只能用在被 async “修饰”的方法中
document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {// GET 参数params: {}}) */

      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
        params: { id: 1 }
      })
      console.log(res)
    })

    document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })

vue

const vm=new Vue({
            el:'.app',
            methods:{
               async get(){
                const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
                params: { id: 1 }
                  })
                    console.log(res.data);
                },
                async post(){
                    //
                    const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
                    console.log(res);
                }
            }
        })

.vue文件

分为3部分

template 要渲染到界面的数据只能有一个根元素不然会报错

script

style 样式

<template>
  <div>
    <div class="test-box">
      <h3>这是用户自定义的 Test.vue --- {{ username }}</h3>
      <button @click="chagneName">修改用户名</button>
    </div> </div>
</template>

<script>
// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
  // 注意：组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {
      username: 'admin'
    }
  },
  methods: {
    chagneName() {
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '哇哈哈'
    }
  },
  // 当前组件中的侦听器
  watch: {},
  // 当前组件中的计算属性
  computed: {},
  // 当前组件中的过滤器
  filters: {}
}
</script>

<style lang="less">
.test-box {
  background-color: pink;
  h3 {
    color: red;
  }
}
</style>