首页 > web前端 > js教程 > 正文

一些简单的Vue.js的指令总结

零到壹度
发布: 2018-04-21 11:16:49
原创
1395人浏览过

这篇文章介绍的内容是一些简单的Vue.js的指令总结,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

html页面:

<p id="app">{{message}}</p>
登录后复制

页面中的数据就是data中的数据

模版指令:控制模块的内容

v-text (控制元素的文本内容)  

eg: <p  v-text="a"></p>   --> a 是data中的a
登录后复制

v-html(控制元素的内容,包括内部结构 )

立即学习前端免费学习笔记(深入)”;

eg:<p v-html="a"></p>
登录后复制

控制模块隐藏    
v-if

 eg:<p v-if="isShow"></p>    -->isShow的值是布尔值,true:显示, false,隐藏
登录后复制

v-show

eg:<p v-if="isShow"></p>    -->isShow的值是布尔值,true:显示, false,隐藏
登录后复制

渲染循环列表  v-for  

eg: 
<ul>     <li v-for="item in items">         <p v-text="item.label"></p>  
    -->item是items里的每一个对象,items是data里的数组

     </li></ul>
登录后复制

事件绑定v-on      

eg:<button v-on:click="doSomething"></button>  click 可以是hover,focus等事件

eg: <button @click="doSomething"></button>  简写形式
登录后复制

属性绑定

v-bind   eg:@@##@@    src属性赋值 imgSrc

(简写)eg:  <p :class="{red:isRed}"></p>    isRed:true:加上类red,false:不加类red

eg:  <p :class="[classA, classB]"></p>  绑定多个类名

eg:  <p :class="[classA,{classB: isB, classC: isC}]"></p>
登录后复制

实例:

js:var app = new Vue({

  el:"#app",

  data:{ 这里填写数据,以键值对的形式

     a:"heollo",

     demo:1,         items:[{label:"vue1"},{label:"vue2"}]

     },

  methods:{这里可以写自己定义的函数,

    doSomething:function(){

       console.log(this.a);   --> this指代的是vue的对象, a 是data里的a       }

   },

  watch:{ 监听,监听demo的变化, 参数是变化前后的值变化

    'demo':function(val, oldVal){      console.log(val,  oldVal);  

    }

    }

  });
登录后复制

相关推荐:

Vue.js自定义指令的用法与实例

Vue.js入门-内置指令v-html 

Vue.js知识总结——指令

vue.js使用注意事项

一些简单的Vue.js的指令总结

以上就是一些简单的Vue.js的指令总结的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号