几分钟带你回顾vue最基础的_几分钟 vue-优快云博客

本文链接：https://blog.youkuaiyun.com/llnewcdns/article/details/110494261

几分钟带你回顾vue基础

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

v-html

v-html 指令用于输出 html 代码

<body>
    <div id="d1"> 
       <!-- {{ myDiv}} -->
       <div v-html="myDiv"></div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                myDiv:'<h1>Hi</h1>'
            }
        })
    </script>
</body>

v-bind

HTML 属性中的值应使用 v-bind 指令。

<body>
    <div id="d1">
        <!-- <img v-bind:src="srcUrl"> -->
        <img :src="srcUrl">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                srcUrl:'./img/3.jpg'
            },
            mounted(){
                //这个this必须要：它指当前的vm实例
                this.srcUrl = './img/4.jpg'
            }
        })
    </script>
</body>

v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<body>
    <!-- 数据双向绑定 -->
    <div id="d1">
        <input type="text"  value="" v-model="userName">
        <p>{{userName}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#d1',
            data:{
                
                  userName:'admain'
                
            }
        })
    </script>
</body>

v-on

v-on 指令，它用于监听 DOM 事件

<body>
    <div id="d1">
        <input type="text" v-model="num">
        <input type="button" value="+1" v-on:click='add'/>
        <input type="button" value="-1" @click='sub'/>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                num:1
            },
            //将num进行操作
            //methods:用来写页面需要的的方法的配置项
            methods:{
                add:function(){
                    this.num +=1
                    //this.num = this.num+1
                },

                sub(){
                    this.num -= 1
                }
            }
        })
    </script>
</body>

v-once

<body>
    <div id="d1">
       
        <p v-once> {{msg}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                msg:'最初的梦想：干饭'
            },
            mounted(){
                this.msg = '后来成了程序员'
            }
         

        })
    </script>
</body>

v-pre

<body>
    <div id="d1">
        <!-- {{userName}} -->
        <p v-text='nuerName'></p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>

缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：
v-bind缩写
完整语法：

缩写：
v-on缩写
完整版：

缩写：
<a @click=“doSomething”>

操作style

<body>
    <div id="app">
        <!-- <p :style='pStyle'>如果上天能给我一个再来一次的机会</p> -->
        <!-- <p :style='[pStyle,zsty]'>如果上天能给我一个再来一次的机会</p> -->
        <p :style='{border:borderSty}'>如果上天能给我一个再来一次的机会</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                pStyle:{
                    'font-size':'30px',
                    color:'pink'//值必须加引号
                },
                // zsty:{
                //     'font-size':'30px'
                // },
                borderSty:'2px solid red'
                
            }
        })
    </script>
</body>

类名操作样式

 <style>
        .to{
            color: aquamarine;
        }
        .bagc{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="d1">
        <p :class="{to:isHas}">我会改变哟</p>
        <input type="button" value="改变自己" @click="changgeClass">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                isHas:true,
                colzi:'to'
            },
            methods:{

            }
        })
    </script>

事件修饰符

 <div id="app">
        <a href="https://www.baidu.com/" @click。prevent='mgAlert'>点击</a>
    </div>
    <!-- 冒泡 -->
    <div id="divCl">
        <button @click.stop='btnCl'>点击</button>
    </div>
    
    <!-- 按键修饰符 -->
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                nick
            },
            methods:{
                mgAlert(e){
                    //z阻止默认行为
                    // e.preventDefault();
                    //只专注于自己的操作
                    alert('被点倒了')
                },
                divCl(){
                    console.log('div');
                },
                btnCl(){
                    console.log('btn');
                },
                
            }
        })
    </script>

if&show

条件判断使用 v-if 指令

<div id="app">
    <p v-if="seen">hey，看</p>
    <template v-if="ok">
      <p>啊啊啊啊啊啊啊</p>
      <p>哇哇哇哇哇</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

<h1 v-show="ok">Hello!</h1>

<body>
    <div id="d1">
        <button @click='changeShow'>显示图片</button>
        <!-- <div v-show='isShow'>
            <img src="./img/3.jpg" >
        </div> -->
        <div v-if='isShow'>
            请登录
        </div>
        <div v-else>
            用户：aa已登录呢
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                isShow:true//布尔值
            },
            methods:{
                changeShow(){
                    this.isShow = !this.isShow
                }
            }
        })
    </script>
</bod

v-text

<body>
    <div id="d1">
        <!-- {{userName}} -->
        <p v-text='nuerName'></p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#d1',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>

vue

<div id="d1">
        <p v-clock>{{msg+1+1+1+1+1+1+1+1+1+1}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#d1',
            data:{
                
                    msg:'hello world'
                
            }
        })
    </script>