vue学习（二）Vue常用指令

2 Vue常用指令#

Copy Highlighter-hljs
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 id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

2.1 vue用法#

Copy Highlighter-hljs
<body>
<div id="app">
        {{name}}    // 模板语法
</div>
 
<script>
    const app = new Vue({    // 实例化
        el:'#app',           // 必须要有 指定作用域
        data:{
            name:'alex'      // 数据
        }
    })
</script>
</body>

2.2 v-html;v-text#

Copy Highlighter-hljs
# v-text
<body>
<div id="app">
    <p v-text="name"></p>   #### v-text="name"
</div>
 
<script>
    const app = new Vue({
        el:'#app',
        data:{
            name:'alex'
        }
    })
</script>
</body>
Copy Highlighter-hljs
# v-text和v-html
<body>
<div id="app">
    <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#

Copy Highlighter-hljs
<body>
 
<div id="app">
    <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#

Copy Highlighter-hljs
<body>
<div id="app">
    <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#

Copy Highlighter-hljs
<body>
<div id="app">
    <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标签#

我们之前的写法

Copy Highlighter-hljs
<div id="app">
    <a href="https://www.baidu.com">去百度</a>
</div>

vue中v-bind指令

Copy Highlighter-hljs
<body>
<div id="app">
    <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 绑定样式#

之前的写法

Copy Highlighter-hljs
<head>
 <style>
        .jump{
            text-decoration: none;
        }
    </style>
</head>
 
<body>
<div id="app">
    <a href="https://www.baidu.com" class="jump">去百度</a>
</div>
</body>

vue中v-bind指令

Copy Highlighter-hljs
<body>
<div id="app">
    <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 简写 @#

Copy Highlighter-hljs
 
<body>
// 两者选一个
<div id="app">
    <button v-on:click="my_click" @mouseenter="my_enter" @mouseleave="my_leave">点我给你想要的</button>
</div>
==================================================
<div id="app">
    <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加点料#

壹：

Copy Highlighter-hljs
    <style>
        #name{
            width: 150px;
            height: 150px;
            border: solid 1px black;
        }
        .green{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
 
<div id="app">
    <div id="name" :class="{green:isActive}">              # 绑定样式
        <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>

贰：

Copy Highlighter-hljs
<body>
 
<div id="app">
    <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 双向绑定#

Copy Highlighter-hljs
<body>
 
<div id="app">
    <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="" id="1" v-model="boy_friend">
        <option value="林俊杰0">林俊杰0</option>
        <option value="林俊杰1">林俊杰1</option>
        <option value="林俊杰2">林俊杰2</option>
    </select>
 
    {{boy_friend}}
    <br>
    <p>多选</p>
    <select name="" id="2" v-model="girl_friend" 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="" id="" cols="30" rows="10" v-model="my_textarea">
 
    </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标签显示多个空格#

Copy Highlighter-hljs
<body>
<div id="app">
    <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#

Copy Highlighter-hljs
# 效果是字符串拼接
<body>
<div id="app">
    <table border="1">
        <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>
Copy Highlighter-hljs
        <tr>
            <td>python基础</td>
            <td><input type="text" v-model.number="python"></td>
        </tr>
 
Copy Highlighter-hljs
<body>
<div id="app">
    <table border="1">
        <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
Copy Highlighter-hljs
# computed版本------对比没有注释掉的部分
<body>
<div id="app">
 
    <table border="1">
        <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>

例：

Copy Highlighter-hljs
# getter
<div id="app">
    {{ 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>
Copy Highlighter-hljs
# setter
<div id="app1">
    {{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#

  • 模板
Copy Highlighter-hljs
Vue.directive('mingzi',function (el,bindding) {});
  • 步骤
Copy Highlighter-hljs
① 搭建vue
② 新建自定义指令
③ 绑定个盒子
④ 操作

① 搭建vue

Copy Highlighter-hljs
<body>
<div id="app"> </div>
 
<script>
    const app = new Vue({
        el:'#app',
    })
</script>
</body>

② 新建自定义指令

Copy Highlighter-hljs
<!--<body>-->
<!--<div id="app">-->
 
<!--</div>-->
 
<!--<script>-->
    Vue.directive('boxs',function (el,bindding) { });
    <!--const app = new Vue({-->
        <!--el:'#app',-->
 
    <!--})-->
<!--</script>-->
<!--</body>-->

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

Copy Highlighter-hljs
<!--<body>-->
 
<!--<div id="app">-->
    <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里打印
Copy Highlighter-hljs
    Vue.directive('boxs',function (el,bindding) {
        console.log(el);           // 绑定指定的元素（div）
        console.log(bindding)      // 自定义指令的对象（.value是一个值）
    });

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

Copy Highlighter-hljs
<body>
 
<div id="app">
    <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

  • 我们怎么改呢

Copy Highlighter-hljs
<div id="app">
    <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); ☆☆☆☆☆
 
        ......
  • 盒子变换位置
Copy Highlighter-hljs
<body>
 
<div id="app">
    <!--<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操作#

Copy Highlighter-hljs
<body>
<div id="app">
    <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 监听#

Copy Highlighter-hljs
# 基础的数据类型
<div id="app">
    <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>
Copy Highlighter-hljs
# 复杂的数据类型 object Array
 
<div id="app">
    {{ 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>
posted @   流年中渲染了微笑  阅读(489)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
SQL AI 助手
CONTENTS
✕