vue学习，二Vue常用指令

2024-05-15 08:01•mysql•阅读 733

1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
     el:"#app",
                 data: {
         数据变量:"变量值",
         数据变量:"变量值",
         数据变量:"变量值",
     },
   });
   
   el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div >
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

2.1 vue用法

<body>
<div >
        {{name}}    // 模板语法
</div>

<script>
    const app = new Vue({    // 实例化
        el:'#app',           // 必须要有 指定作用域
        data:{
            name:'alex'      // 数据
        }
    })
</script>
</body>

2.2 v-html;v-text

# v-text
<body>
<div >
    <p v-text="name"></p>   #### v-text="name"
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'alex'
        }
    })
</script>
</body>

# v-text和v-html
<body>
<div >
    <p v-text="name"></p>         #### v-text
    <div v-html="hobby"></div>    #### v-html
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'alex',
            hobby:`<ul>
                        <li>篮球</li>
                        <li>女</li>
                        <li>足球</li>
                   </ul>`
        }
    })
</script>
</body>

2.3 v-for

<body>

<div >
    <div v-for="items in vegetables">{{items}}</div>  ### 重点
    <div v-for="items in fruit">{{items.name}}的价格是{{items.price}}</div> ### 重点
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{      // 数据
            vegetables:['茄子', '西红柿', '豆角'],

            fruit:[{
                name:'西瓜',
                price:'1.99'},
                {
                    name:'桃子',
                    price:'1.88'
                }
            ]
        }
    })
</script>
</body>

2.4 v-if,v-else-if,v-else

<body>
<div >
    <div v-if="role=='student'">
        学生登录系统
    </div>
    <div v-else-if="role == 'teacher'">
        老师登录系统
    </div>
    <div v-else>
        <h1>请使用正确的身份</h1>
    </div>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:({
            role:'student'
        })
    })
</script>
</body>

# 浏览器console控制台。切换app.role='teacher'来实现v-else-if和v-else的实现

// 在html里只显示页面显示标签（说明添加的是appendChild）

2.5 v-show

<body>
<div >
    <p v-show="is_show">Vue中v-show指令</p>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:({
            is_show:true    # 改变这里
        })
    })
</script>
// 页面标签显示是  display 来显示
</body>

2.6 v-bind 简写：

2.6.1 绑定a标签

我们之前的写法

<div >
    <a href="https://www.baidu.com">去百度</a>
</div>

vue中v-bind指令

<body>
<div >
    <a v-bind:href="link">去百度</a> ☆☆☆☆☆☆
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:({
            link:'https://www.baidu.com'☆☆☆☆☆☆
        })
    })
</script>
</body>

2.6.2 绑定样式

之前的写法

<head>
 <style>
        .jump{
            text-decoration: none;
        }
    </style>
</head>

<body>
<div >
    <a href="https://www.baidu.com" class="jump">去百度</a>
</div>
</body>

vue中v-bind指令

<body>
<div >
    <a v-bind:href="link" :class="{jump:isActive}">去百度</a>    ### v-bind简写是‘:’，绑定样式{}
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:({
            link:'https://www.baidu.com',
            isActive:true
        })
    })
</script>
</body>

2.7 v-on 简写 @


<body>
// 两者选一个
<div >
    <button v-on:click="my_click" @mouseenter="my_enter" @mouseleave="my_leave">点我给你想要的</button>
</div>
==================================================
<div >
    <button v-on="{click:my_click,mouseenter:my_enter,mouseleave:my_leave}">点我给你想要的</button>
</div>
==================================================
<script>
    const app = new Vue({
        el:'#app',
        methods:{
            my_click:function () {
                alert('123')
            },
            my_enter:function () {
                console.log('移入打印')
            },
            my_leave:function () {
                console.log('移出打印')
            }
        }
    })
</script>
</body>

2.8 小demo-给Alex加点料

壹：

    <style>
        #name{
            width: 150px;
            height: 150px;
            border: solid 1px black;
        }
        .green{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>

<div >
    <div >              # 绑定样式
        <p v-text="name"></p>
    </div>
    <button v-on:click="my_click">点我改变颜色</button>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
          name:'Alex',
            isActive:true
        },
        methods:{
            my_click:function () {
                this.isActive = ! this.isActive
            }
        }
    })
</script>
</body>

贰：

<body>

<div >
    <button @click="my_click">点我显示</button>
    <h1 v-show="is_show">晓强</h1>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            is_show:false
        },
        methods:{
            my_click:function () {
                this.is_show = ! this.is_show
            }
        }
    })
</script>
</body>

2.9 v-model 双向绑定

<body>

<div >
    <p>请输入你的姓名</p>
    <input type="text" v-model="name">
    {{name}}
    <br>
    <p>请选择你的性别</p>
    <input type="checkbox" value="男" v-model="sex">
    <input type="checkbox" value="女" v-model="sex">
    {{sex}}
    <br>
    <p>单选</p>
    <select name="" >
        <option value="林俊杰0">林俊杰0</option>
        <option value="林俊杰1">林俊杰1</option>
        <option value="林俊杰2">林俊杰2</option>
    </select>

    {{boy_friend}}
    <br>
    <p>多选</p>
    <select name=""  multiple>
        <option value="林志玲0">林志玲0</option>
        <option value="林志玲1">林志玲1</option>
        <option value="林志玲2">林志玲2</option>
    </select>
    {{girl_friend}}
    <br>
    <p>textarea</p>
    <textarea name="" >

    </textarea>
    {{my_textarea}}
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'xiaoqiang',
            sex:[],
            boy_friend:[],
            girl_friend:[],
            my_textarea:''

        }

    })
</script>
</body>

2.10 指令修饰符

2.10.1 懒惰lazy/去空格（trim）

2.10.2 number显示数据类型

2.10.3 pre标签显示多个空格

<body>
<div >
    <p>lazy回车之后显示</p>
    <input type="text" v-model.lazy="name">
    <input type="text" v-model.lazy.trim="name">    # 去空格
    {{name}}
    <hr>
    <p>number显示数据类型</p>
    <input type="text" v-model.number="phone">
    {{typeof phone}}

    <hr>
     <p>pre标签显示多个空格</p>
    <input type="text" v-model="pre">
    <pre>{{pre}}</pre>
</div>

<script>
    const app = new Vue({
        el:'#app',
       data:{
            name:'',
            phone:null,
            pre:'',
       }

    })
</script>
</body>

2.11 计算指令 computed

# 效果是字符串拼接
<body>
<div >
    <table >
        <thead>
        <tr>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>python基础</td>
            <td><input type="text" v-model="python"></td>
        </tr>
        <tr>
            <td>前端</td>
            <td><input type="text" v-model="web"></td>
        </tr>
        <tr>
            <td>django</td>
            <td><input type="text" v-model="django"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{python + web +django}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{(python + web + django)/3}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            python:100,
            web:100,
            django:100

        }
    })
</script>
</body>

        <tr>
            <td>python基础</td>
            <td><input type="text" v-model.number="python"></td>
        </tr>

<body>
<div >
    <table >
        <thead>
        <tr>
            <th>学科</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>python基础</td>
            <td><input type="text" v-model.number="python"></td>
        </tr>
        <tr>
            <td>前端</td>
            <td><input type="text" v-model.number="web"></td>
        </tr>
        <tr>
            <td>django</td>
            <td><input type="text" v-model.number="django"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{python + web +django}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{(python + web + django)/3}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            python:100,
            web:100,
            django:100

        }
    })
</script>
</body>

在继续改，我们在总分和平均分的时候算的太麻烦了，怎么办呢，引出computed

# computed版本------对比没有注释掉的部分
<body>
<div >

    <table >
        <thead>
        <!--<tr>-->
            <!--<th>学科</th>-->
            <!--<th>成绩</th>-->
        <!--</tr>-->
        </thead>
        <tbody>
        <!--<tr>-->
            <!--<td>python基础</td>-->
            <!--<td><input type="text" v-model.number="python"></td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>前端</td>-->
            <!--<td><input type="text" v-model.number="web"></td>-->
        <!--</tr>-->
        <!--<tr>-->
            <!--<td>django</td>-->
            <!--<td><input type="text" v-model.number="django"></td>-->
        <!--</tr>-->
        <tr>
            <td>总分</td>
            <td>{{sum_num}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{(python + web + django)/3}}</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
//    const app = new Vue({
//        el: '#app',
//        data: {
//            python:100,
//            web:100,
//            django:100
//        },
        computed:{
            sum_num:function () {
                return this.python + this.web + this.django
            },
            avg:function () {
                return this.sum_num / 3
            }
        }
    })
</script>
</body>

例：

# getter
<div >
    {{ reverseMsg }}
    <button @click="handleClick">改变</button>
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'hello word'
        },
        methods:{
            handleClick:function () {
                this.msg = '我在学习vue的计算属性'
            }
        },
        computed:{
            // computed 默认只有getter方法
            // 计算属性最大的优点：产生缓存 如果数据没有发生改变 直接从缓存中取
            reverseMsg:function () {
               return this.msg.split('').reverse().join('')
            }
    }

    })
</script>

# setter
<div >
    {{content}}
    <input type="text" v-model="content" @input="handleInput">
    <button @click="handleClick">改变</button>
</div>

<script>
    var app = new Vue({
        el:'#app1',
        data:{
           msg:''
        },
        methods:{
           handleInput:function (event) {
               const {value} = event.target;
               this.content = value
           },
            handleClick:function(){
               console.log(this.content)       // 点击改变打印值
            }
        },
        computed:{
          content:{
              set:function (newV) {
//                  console.log(newV)
                  this.msg = newV
              },
              get:function () {
                  return this.msg
              }
          }
    }

    })

2.12 自定义指令 directive

模板

Vue.directive('mingzi',function (el,bindding) {});

步骤

① 搭建vue
② 新建自定义指令
③ 绑定个盒子
④ 操作

① 搭建vue

<body>
<div > </div>

<script>
    const app = new Vue({
        el:'#app',
    })
</script>
</body>

② 新建自定义指令

<!--<body>-->
<!--<div >-->

<!--</div>-->

<!--<script>-->
    Vue.directive('boxs',function (el,bindding) { });
    <!--const app = new Vue({-->
        <!--el:'#app',-->

    <!--})-->
<!--</script>-->
<!--</body>-->

③ 绑定个盒子,加个样式和数据

<!--<body>-->

<!--<div >-->
    <div class="box" v-boxs="text"></div>
<!--</div>-->

<!--<script>-->
    <!--Vue.directive('boxs',function (el,bindding) {-->
        <!---->
    <!--});-->

    <!--const app = new Vue({-->
        <!--el:'#app',-->
        data:{
            text:true
        }
    })
//</script>
//</body>

Vue.directive里打印

    Vue.directive('boxs',function (el,bindding) {
        console.log(el);           // 绑定指定的元素（div）
        console.log(bindding)      // 自定义指令的对象（.value是一个值）
    });

④ 操作--盒子位置变化的demo

<body>

<div >
    <div class="box" v-boxs="text"></div>
</div>

<script>
    Vue.directive('boxs',function (el,bindding) {
        if(bindding.value){
            el.style.position = 'fixed';
            el.style.bottom = 0;
            el.style.right = 0

        }else{
            el.style.position = 'static';
        }
    });

    const app = new Vue({
        el:'#app',
        data:{
            text:true
        }

    })
</script>
</body>

看下图，我们所写的都会显示那么我们研究一下标红的地方--modifiers
我们怎么改呢

<div >
    <div class="box" v-boxs.right.top="text"></div> ☆☆☆☆☆
</div>

<script>
    Vue.directive('boxs',function (el,bindding) {
        console.log(el);
        console.log(bindding);
        console.log(bindding.modifiers); ☆☆☆☆☆

        ......

盒子变换位置

<body>

<div >
    <!--<div class="box" v-boxs.right.top="text"></div>-->
    <div class="box" v-boxs.left.bottom="text"></div>
</div>

<script>
    Vue.directive('boxs',function (el,bindding) {
        console.log(el);
        console.log(bindding);
        console.log(bindding.modifiers);

        let position = bindding.modifiers;    ☆☆☆☆☆☆
        if(bindding.value){
            el.style.position = 'fixed';
//            el.style.bottom = 0;
//            el.style.right = 0
            for(let key in position){         ☆☆☆☆☆☆
                el.style[key]=0
            }
        }else{
            el.style.position = 'static';
        }
    });

    const app = new Vue({
        el:'#app',
        data:{
            text:true
        }

    })
</script>

2.13 获取DOM操作

<body>
<div >
    <div ref="my_box">    ☆☆☆☆☆ref
        <p>获取DOM</p>
    </div>

    <button @click="my_click">点我给盒子改变样式</button>
</div>

<script>
    const app = new Vue({
        el:'#app',
        methods:{
            my_click:function () {
                this.$refs.my_box.style.color = 'red'    ☆☆☆☆☆refs/my_box
            }
        }
    })
</script>
</body>

2.14 watch 监听

# 基础的数据类型
<div >
    <input type="text" v-model="msg">
    {{ msg }}
</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:''
        },
        watch:{
            msg:function (newV,oldV) {
                console.log(newV,oldV)
            }
        }
    })
</script>

# 复杂的数据类型 object Array

<div >
    {{ stus[0].name }}
    <button @click="stus[0].name='Tom'">改变</button>
</div>

<script>
    // 对于普通的数据类型 可以用watch直接监听 对于复杂的数据类型 obj/array 要深度监视
    var app = new Vue({
        el:'#app',
        data:{
            stus:[{name:'jack'}]
        },
        watch:{
            'stus':{
                deep:true,
                handler:function (newV,oldV) {                   # 重点
                    console.log(newV[0].name)
                }
            }
        }

    })
</script>

上一篇 »vue2.0 之 directive指令，自定义
下一篇 »vue怎么自定义指令？？

vue学习，二Vue常用指令

2.1 vue用法

2.2 v-html;v-text

2.3 v-for

2.4 v-if,v-else-if,v-else

2.5 v-show

2.6 v-bind 简写 ：

2.6.1 绑定a标签

2.6.2 绑定样式

2.7 v-on 简写 @

2.8 小demo-给Alex加点料

2.9 v-model 双向绑定

2.10 指令修饰符

2.10.1 懒惰lazy/去空格（trim）

2.10.2 number显示数据类型

2.10.3 pre标签显示多个空格

2.11 计算指令 computed

2.12 自定义指令 directive

2.13 获取DOM操作

2.14 watch 监听

相关推荐

Vue自定义指令——点击div区域之外触发，v-click-outside

Vue 常用指令

vue自定义指令属性注解

vue怎么自定义指令进行前端埋点？

VUE基础入门

Vue自定义指令中无法获取this如何解决？

4. Vue - 指令，Add

VUE常用指令

2.6 v-bind 简写：