vue基础语法

最新推荐文章于 2024-10-16 18:35:07 发布

. .306

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量581

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_59347262/article/details/121682451

版权

本文深入探讨Vue.js的基础语法，包括表单操作如v-model的使用，表单修饰符.trim、.lazy和.number的应用。同时，介绍了计算属性的概念及其与方法的区别，以及如何利用缓存优化性能。此外，还讲解了监听器（watch）在监听数据变化并执行异步操作时的角色。最后，简述了Vue中的过滤器，尤其是其在格式化数据方面的功能，并区分了全局和局部过滤器的使用场景。

摘要由CSDN通过智能技术生成

Vue基础语法

表单操作

表单绑定语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<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 name="" id="" v-model='city'>
            <option value="廊坊">廊坊</option>
            <option value="邯郸">邯郸</option>
            <option value="保定">保定</option>
        </select><br>
        自我评价
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button @click='handle'>点击</button>
    </div>
    <script>
        var 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>
</html>

表单修饰符

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

计算属性

<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>

计算属性特点

计算属性和方法的区别

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

监听器

监听器用法

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

watch:{}

<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);
          }
        }
      });

过滤器

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

filters:{}

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

});


# 过滤器

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

`filters:{}`

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

. .306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫