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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
详解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
杏林同学录(四)
2006/10/09 PHP
PHP 超链接 抓取实现代码
2009/06/29 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
php取出数组单个值的方法
2018/03/12 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python操作SQLite简明教程
2014/07/10 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python列表与元组的异同详解
2019/07/02 Python
关于python中的xpath解析定位
2020/03/06 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
四年级科学教学反思
2014/02/10 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
党在我心中的演讲稿
2014/09/13 职场文书
文明上网主题班会
2015/08/14 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL
Python字符串格式化方式
2022/04/07 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python