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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JS面向对象编程详解
Mar 06 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
微信小程序实现滚动消息通知
Feb 02 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
谈谈PHP的输入输出流
2007/02/14 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
JS Timing
2007/04/21 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python实现哈希表
2014/02/07 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
用Python实现KNN分类算法
2017/12/22 Python
python opencv之SURF算法示例
2018/02/24 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python程序变成软件的实操方法
2019/06/24 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
财务管理专业应届毕业生求职信
2013/09/22 职场文书
求职信格式范本
2013/11/15 职场文书
德语专业求职信
2014/03/12 职场文书
教师个人考察材料
2014/12/16 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android