javaee之vue

杨·戬

已于 2023-09-08 19:29:36 修改

阅读量479

点赞数

分类专栏： javaee 文章标签： vue.js 前端 javascript

于 2023-02-28 08:02:19 首次发布

本文链接：https://blog.csdn.net/Pxx520Tangtian/article/details/129190422

版权

javaee 专栏收录该内容

44 篇文章

订阅专栏

问题1：什么是vue

在node基础之上，涌现出来的一批前端框架

我们主要是在文件中引入vue.js文件，也可以引入网络上的vue.js文件

把 vue模块安装到项目目录下面

这里说一下安装某个指定版本的vue

上面引入的是一个3.0版本的包，我们重新换一个2.0版本的

引入vue.js的脚本文件

问题2：双向绑定问题

问题3：关于在vue里面添加一个methods属性的问题

问题4：Vue的生命周期与相关的钩子函数

问题5:v-model的使用

也就是说，你要提供可供输入的一些表单选项框，不能输入怎么交互

在Chrome中安装一个插件，方便我们看我们vue实例

这个扩展工具如果加载不上来，就重启一下浏览器

问题6：v-on的基本使用

这是一个事件指令

主要是说一下事件修饰符

问题7：关于组件的使用

先来说一个组件命名的一个规则

如果采用小驼峰的方式命名一个组件

那么在使用的时候，就需要采用-（分隔开每一个单词作为组件引入）

使用组件，小驼峰的名字要隔开

下面我们说一下子类组件引用父类属性

下面说一下复杂数据类型的接收

父类中定义了一个lessons这个数据属性

通过v-bind绑定到了当前的父组件当中，引入了一个父类属性也就是items这个属性

问题8：子组件向父组件的通信

子类组件想要直接修改父类的data数据是不可以的，我们可以为两者建立一个联系

比如在父类中引入相关的方法去修改父类中的data数据

在子类组件里面我们就可以去调用父类的这两个方法

大致思想是这样：

子组件要改变父组件的data数据，不能直接改变，也就是prop引入了之后，你直接载入这个属性是改变不了的。我们必须在父组件提供函数去操作里面的data属性。

也就是父组件做了函数操作。

然后在子组件参数上用@名字随意="事件也可以理解为一个函数，父类做的函数"

那么在子类组件里面，我们要去触发父类的两个函数，直接return this.$emit("plus"),也就是通过属性名就可以去调用父类的方法

这里上一下完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>num={{num}}</h2>
    <!--做两个事件引用-->
    <counter @plus="numPlus" @reduce="numReduce" :snum="num"></counter>
</div>
<script>
    //定义组件
    const counter = {
      //有一个问题要注意就是在template里面不能放置多个根元素
      //比如两个button如果不放到一个div里面是不可以的
      template : `
        <div>
            <button @click="incrNum">+</button>
            <button @click="decrNum">-</button>
        </div>
      `,
      props:["snum"],
      methods:{
          //触发父类模板的方法
          incrNum(){
              return this.$emit("plus");
          },
          decrNum(){
              return this.$emit("reduce");
          }
      }
    };

    //注册全局组件
    Vue.component("counter",counter);

    var app= new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            //父组件定义操作num的方法
            numPlus(){
              this.num++;
            },
            numReduce(){
                this.num--;
            }
        }
    });
</script>
</body>
</html>