Vue.js常见指令

码农NoError

于 2024-07-30 08:46:21 发布

阅读量211

点赞数 5

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

本文链接：https://blog.csdn.net/zhangzhaoyuxunlei/article/details/104867694

版权

Vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、v-text与v-html

v-text更新html元素的innerText

v-html更新html元素的innerHtml

如果需要更新部分内容需要使用{{ }} 双括号差值表达式

案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE指令 v-text v-html</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <!-- 
     v-html 可以识别标签
     v-text 不可以识别标签
     两个都会替换标签元素的内容
     -->
    <div id="app">
      <div v-text="info"> <span>默认</span> 666 </div>
      <div v-html="info"> <span>默认</span> 666 </div>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          info:" <p> 这是个段落 </p> "
        }
      })
</script>
    
  </body>
</html>

二、v-if与v-show

两者都是根据表达式的值得真假确定是否渲染元素

v-if表达式真假改变时元素会被销毁或者重建

v-show表达式真假改变时元素不会被销毁或者重建，只是切换了display属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue指令 v-if</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    
    <div id="app">
      <!-- v-if 每次都会渲染原始文本 （重建元素） -->
      <p v-if="flag">这是p标签</p>
      <span v-else>这是行内标签</span>
      
      <span v-if="score>90">优秀</span>    
      <span v-else-if="score>70">还行</span>
      <span v-else-if="score>60">凑乎</span>
      <span v-else>渣渣</span>
      <!-- v-show只是切换元素display样式 -->
      <p v-show="flag">这是个段落</p>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          flag:false,
          score:80
        }
      })
</script>
  </body>
</html>

<!-- 
 怎么考虑使用v-if 或者 v-show
 频繁切换使用v-show
 在初始化时就控制显示隐藏使用v-if
 v-show初始开销大  v-if频繁切换开销大
 -->

三、v-for

列表渲染需要使用v-for

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE 指令 v-for</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <!-- item 项目   代表可迭代对象中的一个元素 -->
      <!-- :key 用于VUE虚拟DOM的优化操作 只可以取值 number string -->
      <!-- 遍历数组得到第一个形参为数组中的每一个对象  第二个形参为元素索引 -->
      <p v-for="(item,index) in weekday" :key="item"> {{index}} {{item}}</p>
      <!-- 遍历证书 第一个形参为从1开始的数值 第二个形参为索引-->
      <span v-for="(item,index) in 9" :key="index">{{index}}--{{item}}</span>
      <!-- 遍历字符串第一个形参为每一个字符 第二个形参为索引 -->
      <p v-for="(item,index) in 'hello'" >{{index}}--{{item}}</p>
      <!-- 遍历对象时第一个形参为值 第二个形参为键 第三个形参为索引 -->
      <div v-for="(value,key,index) in myobj" :key="key">{{index}}--{{key}}--{{value}}</div>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          weekday:["星期1","星期2","星期3","星期4","星期5","星期6","星期7",],
          myobj:{
            name:"zzy",
            age:20
          }
        }
      })
</script>
  </body>
</html>

四、v-on与@

所注册的事件都要写在methods属性中

v-on:事件名称

v-on:事件名称形式可以使用@事件名称替代

@click.once可以执行一次事件

@click.prevent 可以阻止默认事件执行

@click.stop 可以阻止事件冒泡

@keyup.enter键盘之类事件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE 指令 v-on</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <!-- 监听键盘事件 -->
      <input type="text" @keyup.a.n="mykeyup">监听按键
      <br>
      <!-- 阻止默认事件 -->
      <a href="http://www.baidu.com" @click.prevent>百度</a>
      <!-- 仅执行一次 -->
      <span @click.once="goto123()">点击只有一次相应</span>
      <div id="div1">
        div1
        <div id="div2" @click="myclick2">
          div2
          <div id="div3" @click.stop="myclick3">
            div3
          </div>
        </div>
      </div>
      
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          
        },
        methods:{
          myclick2(){
            console.log("点击了div2");
          },
          myclick3(){
            console.log("点击了div3");
          },
          goto123(){
            console.log("goto 123");
          },
          mykeyup(e){
            console.log("抬起",e.key);
          }
        }
      })
</script>
  </body>
</html>

五、v-bind与冒号(😃

可以将data中变量与属性进行绑定

v-bind:属性名=“”

v-bind可以省略直接使用 :属性名

当绑定的为class或者style样式时需要注意有所不同

:class 值为数组时根据数组中元素的真实值取类名值为对象时根据键值对的值确定类名是否有键

:style 值为数组时需要使用对象作为数组元素值为对象键值对即为style样式键值对

案例：绑定普通属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用v-bind绑定title属性   如果值中有纯粹字符串需要使用字符串格式单引号或者双引号 -->
      <span v-bind:title="info+'span1'">鼠标划入有提示</span>
      <!-- 使用冒号代替 v-bind -->
      <span :title="info+'span2'">鼠标划入有提示</span>
      <!-- 绑定的值为对象 -->
      <a :href="baidu.href">{{baidu.text}}</a>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          info:"我是一个span",
          baidu:{
            href:"http://www.baidu.com",
            text:"百度"
          }
        }
      })
</script>
  </body>
</html>

案例：绑定类名

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
      p.red{
        color: red;
      }
      p.blue{
        background-color: lightblue;
      }
      p.bigger{
        font-size: 30px;
      }
</style>
  </head>
  <body>
    <!-- 
    使用v-bind绑定类名需要注意 可以有列表和字典两种形式 
    如果是列表  列表中元素如果是纯字符串 直接使用  如果是变量 类名就是变量对应的值
    如果是字典  类名能不能取键 取决于键对应的值为true或者false   如果值为变量 需要解释
    列表中的元素 是不是 类名？如果是变量 类名是变量对应的值     如果是纯字符串 类名为该字符串
    对象中的健 是不是类名？键一定是类名  但是能不能显示这个类名 取决于键对应的值
     -->
    <div id="app">
      
      <p :class="[color,'blue']" class="bigger">p1</p>
      <p :class="{red:true,blue:flag}">p2</p>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          color:"red",
          flag:false
        }
      })
</script>
  </body>
</html>

案例：绑定样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <p style="color: red; background-color: lightcoral;">p1</p>
      
      <!-- 当：style 值为对象时 对象的健必须为样式名 不能使用-这个连字符 需要转小驼峰 
        对象的值 如果是变量 需要解释  如果是纯字符串 直接使用
       -->
      <p :style="{color:color,backgroundColor: 'lightcoral'}" style="font-size: 30px;">p2</p>
      
      <!-- 当style的值为数组时 要求数组中的每一个元素都必须为对象
      对象 中的健必须是样式属性名  对象的值如果是变量需要解释  如果是纯字符串 直接使用
       -->
      <p :style="[{color:color},{backgroundColor:'lightcoral'} ]">p3</p>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          color:"red",
        }
      })
</script>
  </body>
</html>

六、v-model

在表单控件或者组件上创建双向数据绑定

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE指令v-model</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    
    <div id="app">
      <form action="#" method="get">
        <div>
          <h1>普通输入框使用字符串</h1>
          <input name="normal" type="text" v-model="info">
          <br>
          你输入的为 <span>{{info}}</span>
        </div>
        
        <div>
          <h1>复选框使用数组</h1>
          爱好：
          <br>
            足 <input name="hobbys" v-model="hobbys" type="checkbox" value="足球">
          <br>
            篮 <input name="hobbys" v-model="hobbys" type="checkbox" value="篮球">
          <br>
            羽毛 <input name="hobbys" v-model="hobbys" type="checkbox" value="羽毛球">
        </div>
        
        <div>
          <h1>单选框使用字符串</h1>
          性别:
          <br>
          男 <input type="radio" v-model="gender" value="男生" name="sex">
          <br>
          女 <input type="radio" v-model="gender" value="女生" name="sex">
          
        </div>
        
        <div>
          <h1>单个下拉选项使用字符串</h1>
          <select name="address" v-model="address">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="广州">广州</option>
          </select>
        </div>
        
        <div>
          <h1>多个下拉选项使用数组</h1>
          <select name="address2" v-model="address2" multiple>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="广州">广州</option>
          </select>
        </div>
        <input type="submit" value=""/>
      </form>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          // MVVM 双向绑定 将数据同步到视图   将视图同步到数据
          info:"",
          hobbys:["篮球","羽毛球"],
          gender:"女生",
          address:"广州",
          address2:["广州","北京"]
        }
      })
</script>
  </body>
</html>

七、自定义指令

可以使用vue的directives属性扩展指令

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE自定义指令</title>
    <style type="text/css">
      #div{
        height: 50px;
        background-color: lightblue;
      }
</style>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app">
      <div v-show="flag">v-show 使用原生指令控制显示隐藏效果 </div>
      <div v-myshow="flag">v-myshow 使用自定义指令控制显示隐藏效果</div>
      <div id="div" v-dbsize="flag">v-dbsize 使用自定义指令控制尺寸变化效果</div>
      <button @click="flag=!flag">点击切换div效果</button>
    </div>
    
    <script type="text/javascript">
      const vm = new Vue({
        el:"#app",
        data:{
          flag:true
        },
        directives:{
          "dbsize":{
            inserted(ele,state){
              if(state.value){
                let height = getComputedStyle(ele).height;
                height= height.substr(0,height.length-2);
                ele.style.height = height*2 +"px";
              }
            },
            update(ele,state){
              if(state.value){
                let height = getComputedStyle(ele).height;
                height= height.substr(0,height.length-2);
                ele.style.height = height*2 +"px";
              }
              else{
                let height = getComputedStyle(ele).height;
                height= height.substr(0,height.length-2);
                ele.style.height = height/2 +"px";
              }
            }
          },
          "myshow":{
            //  创建元素时执行
            inserted(element,state){
              if(state.value){
                element.style.display="block";
              }else{
                element.style.display="none";
              }
            },
            // flag值发生变化会执行
            update(element,state){
              if(state.value){
                element.style.display="block";
              }
              else 
              {
                element.style.display="none";
              }
            }
            
          }
        }
      })  
</script>
  </body>
</html>

在这里插入图片描述

码农NoError

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js常见指令

class 值为数组时根据数组中元素的真实值取类名值为对象时根据键值对的值确定类名是否有键。:style 值为数组时需要使用对象作为数组元素值为对象键值对即为style样式键值对。v-show表达式真假改变时元素不会被销毁或者重建，只是切换了display属性。v-html更新html元素的innerHtml。v-on:事件名称形式可以使用@事件名称替代。v-if表达式真假改变时元素会被销毁或者重建。@click.stop 可以阻止事件冒泡。v-bind可以省略直接使用 :属性名。
复制链接

扫一扫