vue基础

最新推荐文章于 2025-07-29 20:25:09 发布

始于初见

最新推荐文章于 2025-07-29 20:25:09 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_48260015/article/details/123554904

vue 专栏收录该内容

2 篇文章

订阅专栏

1.模板语法

插值表达式

将数据填充到模板语法当中,然后前端进行渲染

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!--差值表达式-->
        <div>{{msg}}</div>
        <!-- 比插值表达式更简洁 -->
        <div v-text='msg'></div>
        <!-- 存在安全问题   本网站内部数据可以使用，来自第三方的数据不可用 -->
        <div v-html='msg'></div>
        <!-- 填充原始信息 跳过编译信息 -->
        <div v-pre>{{msg}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue'
            }
        })
    </script>
</body>

</html>

指令

v-once v-once的使用使用场景，如果显示的信息后续不需要再修改可以使用v-once,这样可以提高性能

    <div id="app">
        <div v-once>{{info}}</div>
    </div>

v-model 双向数据绑定这里变化会导致上面的内容跟着变化

这里表单里的数据发生变化那么data里的数据也会跟着变化

在控制台使用 vm.msg 可以查看具体的值 vm是上面vue的实例

    <div id="app">
        <div>{{msg}}</div>
        <div>
            <input type="text" name="" id="" v-model='msg'>
        </div>
    </div>

v-if 条件判断

v-for 遍历

事件绑定

v-on 这里绑定的是点击事件

v-on: 可简写为 @

在一个div标签里面如果我点击了 ‘handle1’ 那么‘handle0’ 的方法也会执行这被称之为冒泡，阻止冒泡可以在绑定的事件后面加上 .stop 也可以在定义的方法里加上 event.stopPropagation()

    <div id="app">
        <div>{{num}}</div>
        
        <div @click='handle0'>
            <button @click.stop='handle1'>点击1</button>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num:0
               
            },
            methods:{
                handle0:function(){
                    this.num++
                },
                handle1:function(event){
                    //阻止冒泡
                    // event.stopPropagation()
                }
            }
        })
    </script>

属性绑定

v-bind 动态的属性绑定

    <div id="app">
        <a v-bind:href="url">百度</a>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              url:'http://www.baidu.com'
            },
            methods: {
               
            }
        })
    </script>

v-model 双向绑定的本质其实就是 v-on 事件绑定加上 v-bind 属性绑定

这段代码其实就等同于上面 v-model的代码

这里的v-on绑定的input事件将数据又赋值给了输入框里面动态绑定的值，从而实现了双向绑定

  <div id="app">
       <input type="text" v-bind:value='msg' v-on:input='handle'>
    </div>
    <!-- v-model的本质 -->
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
              msg:'hello'
            },
            methods: {
               handle:function(event){
                //    使用输入域中的最新数据覆盖原来的数据
                   this.msg=event.target.value
               }
            }
        })
    </script>

样式绑定

分支循环结构

2.自定义指定

为什么要自定义指令当内置指令不满足需求

这里为自动聚焦

<div id="app">
    <input type="text">
    <input type="text" v-focus>
  </div>
  <script src="./vue.js"></script>
  <script>
    //自定义指令
    Vue.directive('focus', {
      inserted: function (el) {
        //el表示指令所绑定的元素
        el.focus();
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      },
      methods: {
        handle: function () {

        }
      }
    })
  </script>

3.侦听器

1、采用侦听器监听用户名的变化

2、调用后台接口进行验证

3、根据验证的结果调整提示信息

<div id="app">
    <div>
      <span>用户名：</span>
      <span>
        <input type="text" v-model.lazy='uname'>
      </span>
      <span>{{tip}}</span>
    </div>
  </div>
  <script type="text/javascript" src="./vue.js"></script>
  <script type="text/javascript">

    var vm = new Vue({
      el: '#app',
      data: {
        uname:'',
        tip:'',
      },
      methods:{
        checkName:function(uname){
          //调用接口，但是可以使用定时任务的方式模拟接口调用
          var that=this
          setTimeout(function(){
            //模拟接口调用
            if (uname=='admin') {
              that.tip='用户名已经存在，请更换一个'
            }else{
              that.tip='用户名可以使用'
            }
          },2000)
        }
      },
      watch:{
        uname:function(val){
          //调用后台接口验证用户名的合法性
          this.checkName(val)
          //修改提示信息
          this.tip='正在验证'
        }
      }
      
    });

  </script>