vue基础的一点语法 2018-11-03

1.每个vue.js应用都是通过构造函数创建一个根实例启动的:var Vm = new Vue({});

2.基础属性:el:获取执行vue的dom元素-初始化范围  data:存储数据 methods:执行的方法

3.绑定数据:{{}}或者v-text=""只能绑定纯文本,angular中用ng-bind-html绑定,vue中用v-html  表达式在{{}}中能用一些基础算法(+-*/)以及三木运算符。

4.事 event件的绑定:v-on:click=""和@click="",如果事件中有event对象,则参数为$event,操做数据用this

5.其他的指令:v-for=“item in list” 循环item循环到的数组值     v-for=“(item,key) in list” key循环到的下标index     v-model=“” 表单元素value 不可直接{{}}获取,需在vue初始化data设置一下      v-if布尔值   为true  代表节点消失      V-show布尔值 为true 代表节点设置了display:none属性   V-once 只一次渲染    V-if 与 v-else-if v-else 可以构成判断

6.v-if与v-for当它们都处于同一节点时,v-for 的优先级高于 v-if。这意味着,v-if 将分别在循环中的每次迭代上运行

7.行间样式的设置:v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”    data: { activeColor: 'red',  fontSize: 30 }

v-bind:style的对象语法十分直观——看着非常像 CSS,其实它是一个JavaScript对象

8.(2)数组样式的形式设置:v-bind:style=“[styleObjectA, styleObjectB]”      data:{styleObjectA:{"color":red},styleObjectB:{"color":"red"}}

9.类名的设置: v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”    Isa isb 值为true 则添加相应类名  为false则不添加相应的类名

10.(2).对象形式的设置:<div :class="classobj"></div>     classobj{active:true,"class-a":true,"class-b":true},class-a,-b为true则添加相应的类名

11.绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法  (src  title  class  name等属性写法一样)

12.计算属性: 放在computed:{//函数} 效率高 methods设置效率低

        (1)在模板中表达式非常便利,但是它们实际上只用于简单的操作

         (2).模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性

        (3)在 Vue.js 中,你可以通过 computed 选项定义计算属性

            语法:computed(){sum(){return -----}}return直接返回结果   用的时候 在组件中写{{sum}}这个解析的值就是计算出来的结果;

13.监听函数watch:第一种写法:vm.$watch("监听的谁",function(newValue,oldValue){两个参数,一个新值,一个旧值});   第二种写法在vue初始化中通过:watch{msg:function(newvalue,oldvalue){}}

14.过滤器  Vue2.0自定义过滤器,vue1.0提供内置:过滤器要放在vue实例化之前调用Vue.filter("过滤器的名字",function(value){return     把过滤的结果retuen出去})         比如在for循环中用到

            <div v-for="item in arr">

                    {{item.name}}___{{item.state}}__{{item.state | guolv}}    guolv就是过滤器的名字其中过滤器的参数就是value就是   item.state

            </div>

15.事件:函数内部阻止事件冒泡 e.cancelBubble=true;    标签内阻止事件冒泡 @click.stop=“show1()”    键盘事件 keydown 函数中获取键盘编码keyCode     在标签内直接绑定按键事件 @keyup.13=“show()” @keyup.enter=“show()”

计算属性例如下计算额度:

<div id="out">

    <div>单价:<input type="text" v-model="monery"/></div>

    <div>数量:<input type="text" v-model="num"/></div>

    <div>运费:{{cum}}</div>

<    div>总金额:{{sum}}</div>

</div>

</body>

<script type="text/javascript">

var vm = new Vue({

            el:'#out',

            data:{

                monery:'',

                num:'',

            },

methods:{

},

computed:{

    cum(){

        if(this.monery*this.num > 88){

            return 0

        }else{

            return 10

        }

},

sum(){

            return this.monery*this.num+this.cum

        }

    }

})

详细可以见官网:https://cn.vuejs.org/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,050评论 0 29
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,656评论 18 139
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,209评论 0 6
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,216评论 0 25
  • 宸宸10岁了,住在四世同堂的大家庭。爷爷奶奶的溺爱养成了他一身的“坏毛病”:吃饭拖拉、作业磨蹭,连穿衣服都不能自理...
    吴辉军阅读 233评论 0 1