Vue学习

最新推荐文章于 2024-01-15 13:41:02 发布

heibas

最新推荐文章于 2024-01-15 13:41:02 发布

阅读量132

点赞数

分类专栏： Web前端优质内容分享文章标签： javascript 前端 json

本文链接：https://blog.youkuaiyun.com/m0_50972782/article/details/129305708

版权

Web前端优质内容分享专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Vue.js中的计算属性，强调了它们在值改变时自动更新的特点，以及get和set方法的使用。同时，文章探讨了watch监听器的功能，如何监听数据变化并做出响应，包括immediate选项的使用。此外，还详细讨论了组件的数据管理，包括data函数的作用、父组件向子组件传递数据以及组件间的引用和通信方式。最后，提到了插槽的使用，包括单个、多个和备用内容，以及作用域插槽的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.计算属性（computed）

计算属性的作用就是来计算属性的，有一个特点就当值发生改变了才会触发计算属性方法

每一个计算属性都包含一个get和set方法

motheds:{}每次调用都会触发

<template>
  <div class="hello">
    {{ msgComputed }}
    {{ msgComputed }}
    {{ msgComputed }}
    {{ msgGet }}
    <span @click="msgGet = 10000">点击</span>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  computed: {
    //计算属性，在值发生改变的时候触发
    msgComputed() {
      console.log("触发函数")//只打印一次触发函数
      return this.msg + "李祖福";
    },
    //复杂写法
    msgGet: {
      get: function () {
        console.log("执行get方法")
        return this.msg;
      },
      set: function (val) {
        console.log("执行set方法")
        this.msg = val
      }
    }
  },
  data() {
    return {
      msg: '1'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

2.监听器 wach

<template>
  <div class="hello"> <span @click="love = '张as'">点击</span>
    <p>{{ love }}</p>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  //监听数据的变化
  watch: {
    msg(newQuestion, oldQuestion) {
      //
      console.log(newQuestion)//一个数据可以影响多个数据
      console.log(oldQuestion)
    },
    love: {
      immediate: true,//初始化的时候调用函数
      // 初始化时候原值等于undefined
      handler(newQuestion, oldQUestion) {
        console.log(newQuestion)
        console.log(oldQUestion)
      }
    } //监听属性如果需要监听对象或数组则需要使用到深度监听
    ,
    //34: 15  error  'item1' is defined but never used  no- unused - vars
    /**
     * 解决方式
     * 在package.json配置
     *  "rules": {

    "generator-star-spacing": "off",
    "no-tabs":"off",
    "no-unused-vars":"off",
    "no-console":"off",
    "no-irregular-whitespace":"off",
    "no-debugger": "off"
    }
     */
    //数组（一维、多维）的变化不需要深度监听，对象数组中对象的属性变化则需要deep深度监听（待验证）。

    hello: {
      immediate: true,
      // 此处监听obj属性a值变量
      handler(item1, item2) {
        for (let itme in item1) {
          console.log(item1[itme].name)
        }
        // item1为新值，item2为旧值
      },
      deep: true
    },
    //对象监听
    "user.run": {
      immediate: true,
      handler(newQuestion) {
        console.log(newQuestion)
      }
    }
  },
  data() {
    return {
      msg: '1',
      love: '李祖福',
      hello: [
        { name: '李四' }
      ],
      user: {
        run: '打篮球'
      }
    }
  }
}
</script>

3.视图

vue2索引对数组增删改查不会触发视图

4.组件

1.data函数

data函数中为什么要有返回值，在组件化时候，为了防止数组污染

每次创建一个新的组件都是一份新的数组，

如果不返回return，每次一个新的组件都是用的相同的数组

data(){

return{

}

2.父向子组件传递数据(单向数据流)可以通过数组传递

1.在父组件中，定义一个data变量，在子组件标签中动态绑定这个值。

// Father.vue
<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父组件</h3>
    <div>子组件向父组件传递的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father',
        }
    },
    components: {
        Child
    }
}
</script>

2.接着在子组件里通过 props 来接收，这样子组件就接收到了父组件传递过来的值了。

// Child.vue
<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子组件</h3>
    <button>子组件将值传递给父组件</button>
    <div>父组件向子组件传递的值:{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',
        }
    },
    props: ['FatherMsg']
}
</script>

子组件向父组件传值

4.父组件访问子组件方式

1.父组件访问子组件：$refs:开发中常用

2.ref:用来给元素或者子组件注册引用信息

5.子组件访问父组件方式

子组件访问父组件：$parent,在开发中尽量少用，组件复用性很高

子组件访问根组件:$root

6. 插槽(solt)

1.单个插槽

在子组件中定义一个

在父组件中定义的子组件标签里面直接放入你要定义的在插槽里面的数据

可以是一个标签数据也可以是多个

2.多个插槽（就需要在插槽上定义具体的名字）

子组件中：

<solt name="button"></solt>
<solt name="input"></solt>
<solt name="h2"></solt>

3.==注意==

==父组件给子组件插槽传值和给子组件传递数据的区别==

1.数据是在子标签上定义值（子组件通过prop接受）

2.传递标签样式是在子标签里面定义（子组件通过solt接受）

==注意事项（渲染作用域）==

==父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的==

7.备用内容

==有时为一个插槽指定备用（也就是默认内容）是很有用的，它只会在没有提供内容的时候被渲染==

submit

如果定义

<button type="submit"></button>会选择默认内容

<button type="submit">2212</button>不会渲染默认内容

8.作用域插槽

子组件

父组件