Vue-1-$mount

vue
盈和软件 2019-08-08T06:12:58.000Z
67 0 0

数据挂载

在实例化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监视

两种方式可以来体现数据变化的过程
方法一:监视

微信截图_20190808133435.png

方法二:

微信截图_20190808133446.png

computed计算属性

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

微信截图_20190808133454.png

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

绑定

命令式编程:找打dom项目-----设置值
声明式编程:声明绑定
优点:
无需访问dom api即可修改dom

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

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

数据绑定

Mustache语法设置绑定,用双大括号{{}}
如果不想绑定的数据随着后面的数据发生变化,就利用v-once,写在插入值的标签元素上

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

微信截图_20190808140834.png

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;}}

微信截图_20190808133506.png

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

事件绑定

指令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后面跟上按键对应的数字,效果一样

元素绑定

微信截图_20190808140703.png
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
未完待续·······

0

相关推荐:

0

点击展开全文

0/200

全部评论

查看更多