vue快捷键与基础指令详解


Posted in Javascript onJune 01, 2017

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快捷键与基础指令详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery使用手册之二 DOM操作
Mar 24 Javascript
JavaScript 仿关机效果的图片层
Dec 26 Javascript
jQuery实现id模糊查询的小例子
Mar 19 Javascript
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 #Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 #Javascript
Vue.Draggable实现拖拽效果
Jul 29 #Javascript
JS请求servlet功能示例
Jun 01 #Javascript
vue.js加载新的内容(实例代码)
Jun 01 #Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php URL编码解码函数代码
2009/03/10 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python编程线性回归代码示例
2017/12/07 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python 实现汉诺塔游戏
2020/11/28 Python
python中温度单位转换的实例方法
2020/12/27 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
动物科学专业毕业生的自我评价
2013/11/29 职场文书
后勤主管工作职责
2013/12/07 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
工地安全生产标语
2014/06/06 职场文书
主要领导对照检查材料
2014/08/26 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers