vue快捷键与基础指令详解

更新时间：2017年06月01日 15:59:18 作者：qq_36947128

这篇文章主要介绍了vue快捷键与基础指令详解,需要的朋友可以参考下

v-bind可以简写成：

<img src="{{url}}">→<img :src="url" :width="50px">
v-on:click可以写成@click
<button @click="up()"></button>

v-if实例可以通过对对象操作条件来实现想要展示的效果

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <p v-if="seen">现在你看到我了</p> 
      <template v-if="ok"> 
        <h1>天气炎热</h1> 
      </template> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          seen:false, 
          ok: true 
        } 
      }) 
    </script> 
  </body> 
</html>

v-for实例：v-for是可以做循环数组使用的

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <ol> 
        <li v-for="x in lists">{{x.title}}</li> 
      </ol> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          lists: [ 
            { id: 1, title: "臧三" }, 
            { id: 2, title: '李四' }, 
            { id: 3, title: "王五" }, 
          ] 
        } 
      }) 
    </script> 
  </body> 
</html>

v-show实例：v-show可以操作true/false来实现效果

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.min.js"></script> 
  </head> 
  <body> 
    <div id="app"> 
      <input type="button" value="点击" v-on:click="a=false" /> 
      <div style="width: 100px;height: 100px;background: red;" v-show="a"> 
      </div> 
    </div> 
    <script> 
      new Vue({ 
        el: "#app", 
        data: { 
          a: true 
        } 
      }) 
    </script> 
  </body> 
</html>

:class实例：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.js" ></script> 
    <style> 
      .red{ 
        color:red 
      } 
      .blue{ 
        background: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="app"> 
      <p :class="{red:a,blue:b}">我是123</p> 
    </div> 
    <script> 
      new Vue({ 
        el:"#app", 
        data:{ 
            a:true, 
            b:true 
        } 
      }) 
    </script> 
  </body> 
</html>

第二种方法

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="js/vue.js" ></script> 
    <style> 
      .red{ 
        color:red 
      } 
      .blue{ 
        background: blue; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="app"> 
      <p :class="json">我是123</p> 
    </div> 
    <script> 
      new Vue({ 
        el:"#app", 
        data:{ 
          json:{ 
            red:true, 
            blue:true 
          } 
        } 
      }) 
    </script> 
  </body> 
</html>

以上所述是小编给大家介绍的vue快捷键与基础指令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

在Vue项目中引入腾讯验证码服务的教程
这篇文章主要介绍了在Vue项目中引入腾讯验证码服务的教程,需要的朋友可以参考下
2018-04-04
Vue3中依赖注入provide、inject的使用
这篇文章主要介绍了Vue3中依赖注入provide、inject的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue动态加载本地图片的处理方法
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来,所以下面这篇文章主要给大家介绍了关于vue动态加载本地图片的相关资料,需要的朋友可以参考下
2021-07-07
vue中利用three.js实现全景图的完整示例
这篇文章主要给大家介绍了关于vue中利用three.js实现全景图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
vue实现百度下拉列表交互操作示例
这篇文章主要介绍了vue实现百度下拉列表交互操作,结合实例形式分析了vue.js使用jsonp针对百度接口进行交互的相关操作技巧,需要的朋友可以参考下
2019-03-03
vue路由守卫+登录态管理实例分析
这篇文章主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下
2019-05-05
vue-cli3自动消除console.log()的调试信息方式
这篇文章主要介绍了vue-cli3自动消除console.log()的调试信息方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue开发手册Function-based API RFC
这篇文章主要为大家介绍了Vue开发手册Function-based API RFC使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
报错[vuex] unknown action type: userLogin问
这篇文章主要介绍了报错[vuex] unknown action type: userLogin问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue调用swiper插件步骤教程(最易理解且详细)
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理,下面这篇文章主要给大家介绍了关于vue调用swiper插件的相关资料,需要的朋友可以参考下
2023-04-04