vue

最新推荐文章于 2024-06-12 08:41:10 发布

newbeeAmay

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量123

点赞数 1

本文链接：https://blog.csdn.net/newbeeAmay/article/details/107260303

版权

在这里插入图片描述

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  
          Vue的基本使用步骤
          1、需要提供标签用于填充数据
          2、引入vue.js库文件
          3、可以使用vue的语法做功能了
          4、把vue提供的数据填充到标签里面
     
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    });

在这里插入图片描述

/*
v-cloak指令的用法
1、提供样式
[v-cloak]{
display: none;
}
2、在插值表达式所在的标签中添加v-cloak指令
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
*/

在这里插入图片描述

在这里插入图片描述

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
点击1
2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
并且事件对象的名称必须是$event

在这里插入图片描述

样式绑定相关语法细节：
1、对象绑定和数组绑定可以结合使用
2、class绑定的值可以简化操作
3、默认的class如何处理？默认的class会保留

在这里插入图片描述

<div id="app">
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div v-bind:style='objStyles'></div>
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });

在这里插入图片描述

利用三元表达式控制类名是否添加

 <style>
        .reed {
          color: red;
        }
    </style>
</head>
<body>
    <div id="asd">
        <ul>
         <li v-for="(m,index) in movies" :class="index == num? 'reed' :''" @click='change(index)'>{{m}}</li>
        </ul>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        const asd = new Vue({
            el: '#asd',
            data: {
                num: -1,
                xinxi:'dsadasddasdsd',
                movies:['1','love','asdads'],
                  },
                 methods :{
                     change: function (index) {
                           this.num = index;
                     }
                 }
                
        }) 
 
    </script>