Vue的常用参数

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量2.6k 收藏
点赞数 1
分类专栏： Vue3学习笔记 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/120613726
版权
名称描述
data()该函数返回组件实例的 data 对象。
computed计算属性将被混入到组件实例中。
methodsmethods 将被混入到组件实例中。
watch一个对象，键是要侦听的响应式 property。
template一个字符串模板，用作 component 实例的标记。
component声明一组可用于组件实例中的组件。
props一个用于从父组件接收数据的数组或对象。
provide / inject这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

1. data()

  • 该函数返回组件实例的 data 对象。
  • 实例创建之后，可以通过 vm.$data 访问原始数据对象。
  • 组件实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.%data.a 。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>data()的使用</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data(){
        return {
          a: 'hello world'
        }
      },
      template: `{{a}}`
    });
    const vm = app.mount('#root');
    console.log(vm.a);
    console.log(vm.$data.a);
  </script>
</body>

</html>

2. computed

  • 计算属性将被混入到组件实例中，this上下文自动地绑定为组件实例。
  • 注意，如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例。
  • 计算属性的结果会被缓存，只有当依赖的响应式 property 变化时才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>data()的使用</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 6,
          message: 'hello world'
        };
      },
      computed: {
        // 当计算属性依赖的内容发生变更时，才会重新执行计算
        getTotal() {
          return Date.now() + this.count;
        }
      },
      template: `
        <div>
          {{message}}--{{getTotal}}
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>
  • 初始状态。

  • 改变count：

  • 改变message：

3. methods

  • methods 将被混入到组件实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为组件实例。
  • 注意，不应该使用箭头函数来定义 method 函数。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向组件实例，this.a 将是 undefined。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>data()的使用</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 6,
          message: 'hello world'
        };
      },
      methods: {
        // 只要页面重新渲染，就会重新执行
        getTotal() {
          return Date.now() + this.count;
        },
      },
      template: `
        <div>
          {{message}}--{{getTotal()}}
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>
  • 初始状态：

  • 改变count：

  • 改变message：

4. watch

  • 一个对象，键是要侦听的响应式 property——包含了 data 或 computed property，而值是对应的回调函数。值也可以是方法名，或者包含额外选项的对象。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>data()的使用</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 2,
          price: 5,
          total: 10
        };
      },
      watch: {
        // price 发生变化时，函数会执行
        price(current, prev) {
          this.total = current * this.count;
        }
      },
      template: `
        <div>
          {{price}}--{{total}}
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>
  • 初始状态：

  • 改变price：

  • 改变count：

5. template

  • 一个字符串模板，用作 component 实例的标记。模板将会替换所挂载元素的 innerHTML。挂载元素的任何现有标记都将被忽略，除非模板中存在通过插槽分发的内容。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>data()的使用</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "hello world"
        };
      },
      template: `
        <div>
          {{message}}
        </div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

6. component

  • 声明一组可用于组件实例中的组件。

示例：

  • 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议 小写字母单词，中间用横线间隔。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用参数</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 创建一个Vue 应用
    const app = Vue.createApp({
      template: `
        <button-counter></button-counter>
      `
    });

    // 定义一个名为 button-counter 的新全局组件
    app.component('button-counter', {
      data() {
        return {
          count: 0
        }
      },
      template: `
        <button @click="count++">
          You clicked me {{ count }} times.
        </button>`
    });
    app.mount('#root');
  </script>
</body>

</html>

  • 局部组件，定义了，要注册之后才能使用，性能比较高，使用起来有些麻烦，建议大些字母开头，驼峰命名。
  • 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射，Vue 底层也会自动尝试帮你做映射。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>常用参数</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const ButtonCounter = {
      data() {
        return {
          count: 0
        }
      },
      template: `
        <button @click="count++">
          You clicked me {{ count }} times.
        </button>`
    };

    const app = Vue.createApp({
      components: { 'button-counter': ButtonCounter },
      template: `
        <button-counter></button-counter>
      `
    });

    app.mount('#root');
  </script>
</body>

</html>

7. props

  • 一个用于从父组件接收数据的数组或对象。它可以是基于数组的简单语法，也可以是基于对象的支持诸如类型检测、自定义验证和设置默认值等高阶配置的语法。

  • 单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据。

示例：

  • 传递静态的Prop
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>传递静态Prop</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 创建一个Vue 应用
    const app = Vue.createApp({
      template: `
        <props-demo-simple name='ZS' age=666></props-demo-simple>
      `
    });

    app.component('props-demo-simple', {
      props: ['name', 'age'],
      template: `
        <div>{{name}}--{{age}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>
  • 传递动态的Prop
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>传递动态Prop</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 创建一个Vue 应用
    const app = Vue.createApp({
      data(){
        return {
          name: 'ZS',
          age: 666
        }
      },
      template: `
        <props-demo-simple v-bind:name="name" :age="age"></props-demo-simple>
      `
    });

    app.component('props-demo-simple', {
      props: ['name', 'age'],
      template: `
        <div>{{name}}--{{age}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

  • 属性传的时候，使用 content-abc 这种命名，接的时候，使用 contentAbc 命名。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app=Vue.createApp({
      data(){
        return {
          num: 666
        };
      },
      template: `
        <myContent :content-abc='num' />
      `
    });

    app.component('myContent',{
      props:['contentAbc'],
      template:`
        <div>{{contentAbc}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

  • 单项数据流的概念: 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          num: 1
        };
      },
      template: `
        <counter :count='num' />
      `
    });

    app.component('counter', {
      props: ['count'],
      data() {
        return {
          myCount: this.count
        }
      },
      methods:{
        handleClick(){
          this.count++;
          this.myCount++;
        }
      },
      template: `
        <div @click='handleClick'>{{count}}--{{myCount}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

  • 同时传递多个prop时，可以直接传一个对象。
  • v-bind="params" 等同于 :content="params.content" :a="params.a" :b="params.b" :c="params.c"
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>props</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          params: {
            content: 'hello',
            a: 'a',
            b: 'b',
            c: 'c'
          }
        };
      },
      template: `
        <counter v-bind='params' />
      `
    });

    app.component('counter', {
      props: ['content', 'a', 'b', 'c'],
      template: `
        <div>{{content}}--{{a}}--{{b}}--{{c}}</div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

8. provide / inject

  • 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>v-slot</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return { count: 666 };
      },
      provide() {
        return {
          count: this.count
        };
      },
      template: `
        <child />
      `
    });
    app.component('child', {
      template: `
        <child-child />
      `
    });
    app.component('child-child', {
      inject: ['count'],
      template: `
        <div>{{count}}</div>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

小豪boy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue中路由参数传递可能会遇到的坑
11-28
前言 vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 本文主要给大家介绍了关于vue路由参数传递遇到的一些坑，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 首先我的路由的定义 { path: '/b', name: 'B', component: resolve => require(['../pages/B.vue'], resolve) } 我从A组件跳转到B组件，并通过路由信息对象传递一些参数 this.$router.push({ path: '/b', params: {
Vue实例的对象参数options的几个常用选项详解
10-16
今天小编就为大家分享一篇Vue实例的对象参数options的几个常用选项详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue基本参数整理
Oopsl的博客
03-26 1102
Vue模板语法 {{}}：显示文本 v-html：Html原生代码 v-once：仅显示一次 事件绑定：@click / v-on:click 属性绑定：v-bind / : class绑定 数组方式： v-bind:"[class1,class2]" data:{class1="XXXX",class2="XXXX"} 对象方式绑定： v-bind:...
vue基础知识(一)——事件函数参数传递
qq_40556950的博客
04-01 3240
事件绑定 1.事件函数的调用方式 直接绑定函数名称<button @click='say'></button> 调用函数<button @click='say()'></button> 2.事件函数参数传递 如果我们绑定的事件函数需要传参的话，通常使用的是直接调用的say()方式。 普通参数和事件对象<button @click='sa...
vue语法（二）
qq_52135740的博客
07-06 209
事件监听 在前端开发中，我们需要经常和用户交互 ​ 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽，键盘事件等等 ​ 在Vue中如何监听事件？使用v-on指令 v-on介绍 ​ 作用：绑定事件监听器 ​ 缩写：@ ​ 预期：Function | Inline Statement | Object ​ 参数：event 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 1.如果该方法不需要额外参数，那么方法后的（）可以不添加。 但是注意：如果方法本身中有一个参数，那么会
vue实例的参数说明
Liuqz2009的专栏
10-23 1536
vue实例中的参数与选项： el:"#id", //DOM成员（1/3） 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。 template:"<tag></tag>", //DOM成员（2/3） 一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot render: (...
vue参数
熊宗的博客
08-28 178
1获取?后面的参数 http://192.168.11.214:8080/#/idInput?username=333 获取参数方法let id = this.$route.query.username 2 获取不带?的URL中的参数 http://192.168.11.214:8080/#/home/newsinfo/234 在...
Vue之参数传递
Radom&7
11-08 238
在App.vue的里传递一个id参数到About.vue里: &lt;template&gt; &lt;div id="root"&gt; &lt;router-link to="/home"&gt;首页 \&lt;/router-link&gt; &lt;router-link :to="{name: 'about',params:{id:'01'}}"&
vue 自定义指令
dianzhani178819的博客
06-20 288
1. 全局指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { 　　// 当绑定元素插入到 DO...
Vue的四个常用选项
程序员柒的博客
12-14 1755
本文讲解了vue.js中的四个常用选项，4个参数选项：filters（过滤器）、computed（计算属性）、methods（方法）、watch（观察），如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。提示：以下是本篇文章正文内容，下面案例可供参考我们都知道，定义一个Vue实例的参数选项除了有el（指定挂载的DOM元素）、data（实例的数据）之外，还可以定义其他的参数。
VUE常用方法整理.pdf
03-28
vue的常用方法总结 第一章 Vue核心知识讲解 5 第二节 引包、留坑、实例化 、插值表达式{{}} 5 1. 引包 5 2. 留坑 5 3. 实例化 5 4. 插值表达式{{ }} 5 第三节 熟悉及使用常用指令 5 1. 什么是指令 5 2. 常用的指令有...
vue路由跳转传参数的方法
12-29
vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转  1. router-link > 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以...
VUE原创跳跳棋游戏代码
04-28
如有疑问或者错误的地方欢迎留言，谢谢~ 1、默认用户的起始位置为第一步。 2、页面加载成功后需要请求后台数据获取当前用户的初始位置（第几步）并调用 1 vm.location(initialPosition) 3、“跳一跳”按钮绑定的...
Vue 自定义指令绑定的处理函数中传递参数
dark_cy的博客
06-29 4178
　　现在需要为自定义指令绑定函数，并且需要向函数中传递参数，类似 。　　Vue 的指令预期得到的值是一个 JavaScript 表达式，除了 v-on 和 v-for 这两个特殊指令外，其他的指令会自动计算该表达式的值，将最终的计算结果传递给指令。所以自定义的指令不能用 的形式绑定函数值，因为 作为一个 JavaScript 表达式会被立即执行，最终会将其返回值传递给指令。　　那么当我们想要为自定义指令绑定函数值，又想为其传递参数该怎么办呢?　　利用指令的值预期得到一个 JavaScript 表达式的特
vue语法-01
weixin_43431123的博客
01-25 381
vue其他语法： 事件监听： v-on的基础语法： v-on:监听的事件=“事件名” 语法糖：上边格式可以改为：@监听的事件=“事件名” 传递参数的问题： 1.我们的监听事件是默认传递一个参数的，如果我们写的是第一种的没有括号的，那么他就不会传递参数，但是我们 如果在methods里面写了一个参数，那么它默认传递的就是浏览器默认为我们生成的一个enevt对象。 2.如果我们监听事件触发，又想传递我们自己的参数，又想传递enevt对象，那么我们可以使用$event的方式，传递event对象 v-i
Vue六大选项参数和十四个基本指令
treopp的博客
06-10 776
Vue 六大选项参数 1.el vue的实例选项 2.data 数据对象 3.computed 计算 4.watch 监听 5.methods 方法 6.filfters 过滤器 十四个基本指令 1：v-text 2：v-html 3：v-model 4：v-once 5：v-cloak 6：v-pro 7：v-if 8：v-else-if 9：v-else 10：v-show 11：v-bind 12：v-on 13：v-for 14：v-slot ...
vue传递参数方法
Ada_lake的博客
10-12 191
vue传递参数共有几种方法 父传子 子传父 每种方法的特性是怎样的 每种方法应该如何使用 每种方法的应用场景–有何异
vue页面传递参数详解
weixin_43532415的博客
07-18 471
vue页面传递参数详解 name与params对应，假如name带了匹配id，那么可以直接匹配，会显示在查询url上 假如name不带，则不会显示在查询参数上 path和query上，会显示在后面的拼接参数上
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 1244
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
vue 中 兄弟组件怎么传递参数
03-31
在 Vue 中，兄弟组件之间可以通过父组件作为中介来传递参数。具体做法如下： 1. 在父组件中定义一个数据属性，用于存储需要传递的参数。 2. 将该数据属性作为 props 传递给需要传递参数的兄弟组件。 3. 在兄弟组件中通过 props 接收该参数。 4. 当需要修改参数时，调用父组件中的方法来修改该数据属性。 5. 父组件会自动将修改后的参数传递给所有子组件，包括兄弟组件。 示例代码： ```html <!-- 父组件 --> <template> <div> <child1 :param="param" @updateParam="updateParam"></child1> <child2 :param="param"></child2> </div> </template> <script> export default { data() { return { param: 'xxx', }; }, methods: { updateParam(newParam) { this.param = newParam; }, }, }; </script> <!-- 兄弟组件1 --> <template> <div> <button @click="updateParam('yyy')">修改参数</button> </div> </template> <script> export default { props: ['param'], methods: { updateParam(newParam) { this.$emit('updateParam', newParam); }, }, }; </script> <!-- 兄弟组件2 --> <template> <div>{{ param }}</div> </template> <script> export default { props: ['param'], }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值