vue基础语法

最新推荐文章于 2023-12-14 11:20:23 发布

幻墨如烟u

最新推荐文章于 2023-12-14 11:20:23 发布

阅读量626

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/sjs1766349405/article/details/121655104

版权

笔记专栏收录该内容

45 篇文章

订阅专栏

本文介绍了Vue.js的基础语法，包括表单操作（如绑定、修饰符）、计算属性（用于简化模板逻辑并具备缓存特性）、侦听器（用于监听数据变化，常用于异步操作）、过滤器（用于格式化数据，如日期格式化和字符串转换），以及Vue的生命周期（挂载、更新和销毁阶段的各个钩子函数）。

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

一、表单操作

1.表单绑定语法

    <script src="vue.js"></script>
  </head>
  <body>
    <div id="app">
      <form action="">
        姓名 <input type="text" v-model="name" />
        性别
        <input type="radio" v-model="sex" value="男" />男
        <input type="radio" v-model="sex" value="女" />女 爱好
        <input type="checkbox" value="唱歌" v-model="hobby" />唱歌
        <input type="checkbox" value="跳舞" v-model="hobby" />跳舞
        <input type="checkbox" value="敲代码" v-model="hobby" />敲代码
        你的户籍地址
        <select v-model="city">
          <option value="保定">保定</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
        </select>
        你的想法是？
        <textarea v-model="ideas" cols="30" rows="10"></textarea>
        <input type="button" @click="handle" />
      </form>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          name: "",
          sex: "",
          hobby: [],
          city: [],
          ideas: ""
        },
        methods: {
          handle: function() {
            console.log(this.name);
            console.log(this.sex);
            console.log(this.hobby);
            console.log(this.city);
            console.log(this.ideas);
          }
        }
      });
    </script>

2.表单修饰符

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

 <div id="app">
      <input type="text" v-model.trim="text" />
      <input type="text" v-model.lazy="text" />
      <div>{{ text }}</div>
      <button @click="handle">测试</button>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          text: ""
        },
        methods: {
          handle: function() {
            console.log(this.text.length);
          }
        }
      });
    </script>

二、计算属性

1.为什么需要计算属性

有的时候我们会在模板语法中做一些相对复杂些的逻辑，如果用计算属性会比较简单。比如我们提供的数据是字符串hello，但是我们显示的时候需要显示Hello

<body>
    <div id="app">
      <div>{{ msg }}</div>
      <div>{{ handle }}</div>
      <div>{{ handle }}</div>
      <div>{{ handle }}</div>
    </div>
  </body>

  <script>
    var vue = new Vue({
      el: "#app",
      data: {
        msg: "hello"
      },
      methods: {
        change: function() {
          console.log("计算方法");
          return this.msg.slice(0, 1).toUpperCase() + this.msg.slice(1);
        }
      },
      computed: {
        handle: function() {
          console.log("计算属性");
          return this.msg.slice(0, 1).toUpperCase() + this.msg.slice(1);
        }
      }
    });
  </script>

2.计算属性特点

计算属性和方法的区别

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

三、侦听器

1.监听器用法

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

<div id="app">
      <input type="text" v-model="xing" />
      <input type="text" v-model="ming" />
      <div>{{ fullName }}</div>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          xing: "",
          ming: "",
          fullName: ""
        },
        methods: {},
        computed: {},
        watch: {
          xing: function(val) {
            this.fullName = val + this.ming;
          },
          ming: function(val) {
            this.fullName = this.xing + val;
          }
        }
      });
    </script>

2. 案例练习

<div id="app">
      <input type="text" v-model.lazy="name" />
      <p>{{ msg }}</p>
    </div>
    <script>
      let vue = new Vue({
        el: "#app",
        data: {
          name: "",
          msg: ""
        },
        methods: {
          checkName: function(name) {
            let that = this;
            setTimeout(() => {
              if (name == "admin") {
                that.msg = "你注册的账号已存在，请更换一下";
              } else {
                that.msg = "请输入你注册的账号";
              }
            }, 1000);
          }
        },
        watch: {
          name: function(val) {
            this.checkName(val);
          }
        }
      });
    </script>

四、过滤器

1.简介

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

字符串大写案例

<div id="app">
      <input type="text" v-model="msg" />
      <p>{{ msg | upper }}</p>
    </div>
    <script>
      Vue.filter("upper", function(val) {
        return val.slice(0, 1).toUpperCase() + val.slice(1);
      });
      let vue = new Vue({
        el: "#app",
        data: {
          msg: ""
        },
        methods: {},
        watch: {},
        filters: {
          upper: function(val) {
            return val.slice(0, 1).toUpperCase() + val.slice(1);
          }
        }
      });
    </script>

2.总结

vue中的过滤器有全局过滤器和局部过滤器两种，局部的只能在本组件中起作用，全局的在整个项目中起作用。全局过滤器语法：

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

局部过滤器语法：

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

五、vue生命周期

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

beforeCreate
created
beforeMount
mounted

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

beforeUpdate
updated

销毁阶段:

beforeDestroy
destroyed