vue基础知识

最新推荐文章于 2024-05-30 11:27:58 发布

ʚ浅初.ɞ

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量499

点赞数

分类专栏： vue.js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_61195495/article/details/121672673

版权

vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、表单操作

1.1表单绑定语法

    <body>
    <div id="app">
      <!-- 表单元素 -->
      姓名： <input type="text" v-model="name" /><br />
      性别：
      <input type="radio" v-model="sex" value="男" name="sex" />男
      <input type="radio" v-model="sex" value="女" name="sex" />女 <br />爱好
      <input type="checkbox" v-model="hobby" value="唱歌" />唱歌
      <input type="checkbox" v-model="hobby" value="跳舞" />跳舞
      <input type="checkbox" v-model="hobby" value="敲代码" />敲代码 <br />
      户籍
      <select v-model="city">
        <option value="北京">北京</option>
        <option value="保定">保定</option>
        <option value="上海">上海</option> </select
      ><br />
      自我介绍
      <textarea v-model="content" cols="30" rows="10"></textarea><br />
      <button @click="handle">添加</button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          name: "",
          sex: "",
          hobby: [],
          city: "",
          content: ""
        },
        methods: {
          handle: function() {
            console.log(this.name); //获取用户输入的姓名
            console.log(this.sex); //获取单选按钮的中的选项
            console.log(this.hobby); //获取复选框中的选项
            console.log(this.city); //获取下拉菜单中的内容
            console.log(this.content); //获取文本域中的内容
          }
        }
      });
    </script>
  </body>

1.2表单修饰符

trim是去掉前后空格
lazy是失去焦点以后触发
number是输入的是字符串，自动转换成数字

    <div id="app">
        <!-- .number是把表单元素中的内容转换成数字 -->
        <input type="text" v-model.number="msg" @keyup="handle" />
        <!-- .trim是去除用户输入内容的前后空格 -->
        <input type="text" v-model.trim="msg" />
        <!-- .lazy是把onchange事件转换成onblur事件 -->
        <input type="text" v-model.lazy="msg" />
        <div>{{ msg }}</div>
    </div>
    <script>
        let vue = new Vue({
            el: "#app",
            data: {
                msg: ""
            },
            methods: {
                handle: function() {}
            }
        });
    </script>

二、计算属性（computed）

2.1为什么需要计算属性

有的时候我们会在模板语法中做一些相对复杂些的逻辑，如果用计算属性会比较简单。

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ getRes }}</p>
        <p>{{ getRes }}</p>
        <p>{{ handle() }}</p>
        <p>{{ handle() }}</p>
        <p>{{ handle() }}</p>
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            handle: function() {
                console.log("计算方法");
                return this.msg.slice(0, 1).toUpperCase() + this.msg.slice(1);
            }
        },
        // 计算属性
        computed: {
            getRes: function() {
                console.log("计算属性");
                // slice(开始截取的索引号，截取的长度)   toUpperCase()把字符串转换成大写
                return this.msg.slice(0, 1).toUpperCase() + this.msg.slice(1);
            }
        }
    });
</script>

2.2计算属性和方法的区别

方法调用的时候需要用小括号，计算属性不需要
计算属性有缓存，可以从缓存中读取调用多次，方法调用一次执行一次

三、监听器（watch）

3.1监听器的用法

侦听器一般用于执行异步操作或者比较消耗性能的时候，主要是用于监听data中的数据变化。

<body>
    <div id="app">
        姓 <input type="text" v-model="xing" /> 
        名<input type="text" v-model="ming" />
        <div>{{ fullname }}</div>
        <div>{{ num }}</div>
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            xing: "",
            ming: "",
            fullname: "",
        },
        methods: {},
        //   监听器
        watch: {
            xing: function(val) {
                console.log(val);
                this.fullname = val + this.ming;
            },
            ming: function(val) {
                this.fullname = this.xing + val;

            }
        }
    });
</script>

四、过滤器

4.1简介

vue中的过滤器一般用于日期格式化或者把字符串比如大写变小写等等格式处理

4.2全局过滤器

全局的在整个项目中起作用

语法：

Vue.filter("过滤器名字", function(val) {
   处理逻辑
 });

4.3局部过滤器

局部的只能在本组件中起作用

语法：

filters: {
   过滤器名称: function(val) {
           处理逻辑
    }
  }

案例：

  <body>
    <div id="app">
      <div>{{ price | handle }}</div>
      <div>{{ num | tofix }}</div>
    </div>
  </body>

  <script>
    //   过滤器有两种定义方法：
    //   1、全局过滤器
    Vue.filter("tofix", function(val) {
      return val.toFixed(2);
    });
    var vue = new Vue({
      el: "#app",
      data: {
        price: 5.99,
        num: 56.7789,
        time: 1234567
      },
      methods: {},
      //  2、 局部过滤器
      filters: {
        handle: function(val) {
          return "¥" + val;
        }
      }
    });
  </script>

五、vue生命周期

挂载阶段：主要是初始化数据用的

beforeCreate
created
beforeMount
mounted

更新阶段：元素或者组件的变更

beforeUpdate
updated

销毁阶段:

beforeDestroy
destroyed

<body>
    <div id="app">
      <div ref="box"></div>
      <p ref="ele"></p>
    </div>
  </body>

  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        num: 10
      },
      methods: {},
      beforeCreate: function() {
        // console.log(this.num);
        // console.log(this.$refs.box);
      },
      created: function() {
        // console.log(this.num);
      },
      beforeMount: function() {},
      mounted: function() {
        this.$refs.box.innerHTML = "1111";
        console.log(this.$refs.box);
      },
      beforeUpdate: function() {},
      updated: function() {},
      beforeDestroy: function() {},
      destroyed: function() {}
    });
  </script>