一些简单的Vue.js的指令总结-js教程-PHP中文网

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

零到壹度

发布： 2018-04-21 11:16:49

原创

1441人浏览过

这篇文章介绍的内容是一些简单的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

Perl Lwp 文档 chm版

LWP是Library for Web access in Perl的缩写，用途说得很清楚，就是一个访问Web服务器的Perl包。利用LWP这个包，我们可以很方便的在我们的perl脚本里面访问外部的Web服务器上面的资源。为什么要用LWP？现在的网站应用越做越复杂，要想简单的写一个Sockettelnet去用GET指令获取资源简直是不可能的，特别是一些需要用口令登陆的网站。如果你只想简单获取一些资源而不想写太多比较复杂的代码的话，那么就应该选用一个合适的封装起来的HTTPD模块。这些文件的确国内

查看详情

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

eg: <button @click="doSomething"></button>  简写形式

登录后复制

属性绑定

v-bind   eg：<img  v-bind:src="imageSrc">    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);　　

　　　　}

　　  }

  });

登录后复制