VUE

VUE的基本使用方式

1. vue双向绑定

     <div id = "app">

        <input v-model="name"> / / V-model 是为vue专有的

        <h1>{{name}}</h1>

      </div>

var vue = new vue({

        el: "#app",  //绑定的控件

        data : {   //数据源

            names : ['Tom','Cat','Vue','Boots'],

            nums:[1,2,3,4,5,6,7],

            name:'Orilore',

            person:{name:'张三' , sex : '男',age : '19'}

        }

        methods:{

            save:function(){}

            query:function(){}

            remove:function(){}

        }

})


v-model:  元素属性值,

v-on:click / @click : 单击事件

v-for = "" 

v-if = "n<10"

v-if = " n &lt, 10"

 <ul>

<li v-for = "n in names">{{n}}</li>

</ul>


json数据 表格显示 kinds

<table>

    <tr v-for = "k in kinds">// 数组一共多少条数据

        <td>{{k.id}}</td>  //一个数组元素对象的键

        <td>{{k.name}}</td>

   </tr>

</table>

如果循环输出里面的数据,不想输出id号,或者id号不是连续的应该

v-for = "(k,index) in kinds"

{{index}}


正则表达式

/^ $/

reg = /^ [\u4e00-\ufa5]{2,5}$/

reg.test() :用于检测一个字符串自否匹配某个模式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • /*! * Vue.js v2.4.2 * (c) 2014-2017 Evan You * Released u...
    国子监大门口阅读 613评论 0 1
  • vue理解浅谈 一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点...
    ndxs2008阅读 24,228评论 2 18
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,275评论 0 6
  • 基本格式 以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。 ...
    kirito_song阅读 827评论 0 21
  • 自小立奇志,鉴此而奋博。运命多坎坷, 逆境犹依我。功业不曾建,理想几时圆?山河固然在,岁月已苍老。
    西门可情阅读 230评论 0 1