Vue-1-$mount

数据挂载

在实例化Vue的时候,两种方式挂载数据

方法一:最常用的方法

var app=new vue({

el:"#app",

data(){}

`````

})

注:文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素

方法二:$mount 

var app=new vue({

data(){}

})

app.$mount("#app")

注:利用$mount挂载的方法有一个很大的好处,就是将实例化的内容和他对HTML的关联分开,可以更直观的展现。

指令:

v-on===@

v-text==={{}}

v-for

v-model

v-bind===:

参数options:

Vue实例的参数options是一个对象可以选择如下选项

data函数成员

methods对象成员

模板template

挂载元素el

生命周期钩子

props函数声明

conputed计算成员

watch监视成员

watch监视

两种方式可以来体现数据变化的过程

方法一:监视


直接监视数据,当数据值发生变化的时候,先弹出alert再进行下一步值的渲染

方法二:


利用mounted生命周期钩子,在Vue实例被挂在dom上被调用,此处可以做一些初始化的工作,采用包含选项对象的模式,还可以监测数组内对象的变化(运行效果同上)

computed计算属性

尽管我们知道mustache({{}})内可以使用表达式,但是不推荐的,所有更多的时候是利用计算属性来实现相应的功能

利用computed将原本可以写在dom行间的表达式写在计算属性内(推荐)

计算属性不仅仅这么简单,背后的逻辑会在以后深入了解后进行赘述

绑定

命令式编程:找打dom项目-----设置值

声明式编程:声明绑定

优点:

无需访问dom api即可修改dom

响应式的风格是一次给设置好,以后数据发生变化,DOM显示也会跟着变化

DOM标签会跟着value的变化而变化,绑定包括数据绑定,事件绑定,元素绑定

数据绑定

Mustache语法设置绑定,用双大括号{{}}

如果不想绑定的数据随着后面的数据发生变化,就利用v-once,写在插入值的标签元素上

v-html:可以将HTML代码插入进来,但是要注意不要将用户输入的内容用v-html来显示,会有XSS攻击的可能

v-bind:<input  v-bind:value="value"/>属性绑定的方法

v-bind关于class的绑定

针对标签属性class,v-bind可以直接传入一个对象作为属性值,像是这样<div v-bind:class="{active:isActive,'text-danger:hasError'}"’></div>,这里,如果isActive为true,那么active作为拼接字符串的一部分,同理hasError

渲染结果:<div class="active"></div>

也可以传入一个数组作为class属性的值<div v-bind:class='[active,text-danger]'></div>

渲染结果:<div class="active text-danger"></div>

v-bind关于style的绑定

也可以如同class的对象一样,传入对象或者数组<div v-bind:style="styleObject"></div>

data:{

styleObject:{

fontsize:10px;

color:red;

}

}



三种方式的实现效果是一样的

事件绑定

指令v-on可以监听dom事件,指令v-on会把参数(click)指定的事件挂接到属性值指定的方法(who)上,方法who的参数event为原生的javaScript对象

v-on的修饰符:(.stop,.prevent,.capture,.self)

还有一类特别的修饰符用于键盘事件的修饰,类似这样:.keyup.enter  表示侦听enter键的keyup事件,还有(enter,tab,delete,esc,space,up,down,left,right),也可以在keyup后面跟上按键对应的数字,效果一样

元素绑定

<h1  v-if="false">h1</h1>      <h2 v-else>h2</h2>     else这里可写可不写

<template v-if="true"><h1>h1</h1><p>pppp</p><template>

<template v-else><h1>h1</h1><p>qqqqq</p></template>多行可以利用这个方式来实现

v-show:  实现效果一样,但是,(v-if会改变dom结构,如果v-if的值是false,这里的元素dom结构就不存在,如果为true则存在,而,v-show则是如果值为false则是dom存在仅仅不显示)所以,v-show不算元素绑定指令

v-for:基于一个数组渲染一组元素

v-for可以对数组进行迭代,可以获取数据的元素值和对应的下标

v-for可以对对象进行迭代,同样的,获取的两个参数,分别是对象的键、值

这里的迭代用到的都是for-in  ,也可以对整数进行遍历(只能是整数)

v-model  

未完待续·······








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

推荐阅读更多精彩内容

  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 5,977评论 0 42
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 10,913评论 4 129
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 4,989评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,125评论 0 6
  • 是不是太高兴的时候总要发生点儿不好的事,例如前一秒我幸福的还在云端飘着,下一秒手机就摔在了地上,屏幕就开了花。捡起...
    牛小蜗阅读 467评论 2 1