Vue.js学习笔记:一

起步

Vue.js是一个渐进式的JavaScript框架,专注于MVVM的视图层,其名Vue在法语中的含义也正是View。
Vue.js从最外层来看和一个模板渲染工具相似,按照惯例而言,这里应该有一个hello,world!的例子:

1
2
3
4
5
6
7
8
9
10
11
12
HTML:
<div id="app">
{{msg}}
</div>
JS:
var vm = new Vue({
el:"#app",
data:{
msg:"hello,world."
}
})

如上,Vue.js不过就是通过标记标签名,对其中内容进行渲染,但就这样而言,和一个传统意义上的模板引擎没什么区别,但真的只是如此吗,答案当然是否定的。

语法

既然Vue.js是一个JavaScript的模板,自然他就具有自己的语法:

指令

指令是Vue.js中的一个关键点,我们可以使用指令来为每个节点绑定各种所需要的内容

数据绑定

数据绑定的例子正如前面一个例子,使用Mustache双大括号语法来进行文本的插值,亦可以通过v-html的方式来填入文本内容,当然,为了防止XSS攻击,我们使用v-text的方式来进行文本的插值,只有再必要时,才会使用v-html的方式。

条件渲染

v-if
v-if用来接受参数,只有当判定为true时,才会将内容展示出来,可以配合v-else进行使用
v-show,和v-if用法相同,展示也相同,二者唯一不同之处在于,v-show所控制的内容会一直在文档流中,对其展示与否的切换相当于对元素display属性的切换,而v-if则相当于对DOM节点的增删操作,对二者进行选用时一般就应用场景而定。

列表渲染

v-for指令可以进行列表的渲染:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTML:
<div id=app>
<ul>
<li v-for='item in items'>{{item.content}}</li>
</ul>
</div>
new Vue({
el:"#app",
data:{
items:[
{content:"hello"},
{content:"Vue.js"}
]
}
})

渲染为:

  • hello
  • Vue.js

样式与类的绑定

  1. Class操作
    v-bind:class可以动态操作元素的class
1
2
3
4
5
6
7
8
9
10
11
12
13
... // 省略部分代码
<div v-bind:class='{classA:isA,classB:isB}'>
</div>
...
new Vue({
...
data:{
isA:true,
isB:false
}
})
// 渲染为:
<div class=classA></div>

也可以以数组的方式来进行class的绑定:

1
2
3
4
5
6
7
8
9
10
...<div v-bind:class=[classA,classB]></div>...
new Vue({
...
data:{
classA:'active',
classB:'defalut'
}
})
// 则可以渲染为:
<div class='active default'></div>

当然,也可以对class的添加与否进行计算,在computed属性中进行操作。
内联样式的绑定
在每段代码内部,可以使用v-bind:style='{}'的方式来直接进行内联样式的绑定,Vue会为元素自动添加前缀。

事件处理器

我们可以使用v-on来为节点添加事件:
比如,添加一个click事件:
v-on:click="func"
然后将func方法定义在methods中,即可完成一个绑定事件
需要注意的一点是,不能直接将js代码写在v-on指令中,它只能接受一个方法,通过回调的方式来进行调用,不过这些函数是可以被传参的。
如果实在有需求需要使用内联js代码,则必须用到$event这个特殊变量。
在js中,我们会经常用到一些事件修饰符,譬如停止冒泡,阻止默认事件等,在Vue中,事件修饰符都被定义在v-on.xxx中,并且以这种方式来进行调用:
Vue也为键盘事件添加了按键修饰符

双向绑定

在表单控件中,一般会用到双向绑定,在Vue中使用v-model指令来实现

1
2
3
4
5
6
7
8
9
10
<div id="app">
<input v-model="msg">
<div>{{msg}}</div>
</div>
new Vue({
el:"#app",
data:{
msg:""
}
})

这样的方式就实现了双向绑定,当在input框内输入内容,对应的div内的文本内容也会相应变化
同样,双向绑定也可以被用在单选框,多选框和列表选择上,同时,它也具有修饰符。

组件

Component是Vue的核心之一,在组件中定义的内容具有复用性

注册一个组件:

1
2
3
Vue.component('hello',{
template:"<div>hello</div>"
})

使用:

1
2
3
4
5
6
7
<div>
<hello></hello>
</div>
new Vue({
el:"div"
})

渲染为:

1
2
3
<div>
<div>hello</div>
</div>

当一些组件只在特定环境下才会使用到时,使用局部注册的方式进行注册:

1
2
3
4
5
6
7
8
9
var com = {
template:"<div>world</div>"
}
new Vue({
el:...,
components:{
"world":com
}
})

通过这种方式注册的组件则只能在其父元素中才能被使用。

组件也可以使用DOM模板来定义:

当然这时候则会有些限制条件

  • <script type="text/x-template">
  • JavaScript内联模版字符串
  • .vue 组件

这时,进行定义时data属性必须以函数的形式来对数据进行返回

Props

组件实例的作用域是孤立的,也就是说子组件模板不能直接引用到父组件模板中的数据,这时就会用到props来进行父子组件之间数据的传递
譬如。此时在父组件内,有一个’msg=”hello”‘:

1
2
3
4
Vue.component('child', {
props: ['msg'],
template: '<span>{{ msg }}</span>'
})

这时子组件内就可以用到父组件传过来的msg,将以上组件渲染为:
<span>hello</span>

待续:…