vue.js 学习笔记
安装
下载 vue.js 或者 vue.min.js 文件，在需要的html文档中使用。下面是 vue.js 的hello world例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue.js Hello World</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var vm = new Vue({
'el': '#app',
'data': {
'message': 'Hello World!',
}
});
</script>
</body>
</html>
其中Vue()为vue组件的构造函数，传入一个配置对象，其中：
- el 为要构造的组件，使用css选择器。
- data 为组件中的各变量的值。
{{ message }}为文本插值，文本值可以在data.message中赋值，之后可以在控制台通过vm.message = newValue动态修改，页面也将会自动更新。
插值
vue.js 有两种插值方式，一种是文本插值，另外一种是原始html插值。
文本插值
<span>{{ message }}</span>
message的值若是html将不会以html方式显示，而是显示其html文本内容。
原始html插值
<span v-html="rawHtml"></span>
vue.js中带v-开头的属性称为指令，v-html="rawHtml"的作用就是将rawHtml的值用html方式显示出来。 比如,若是rawHtml为<b>Hello</b>，Hello将会以粗体的方式显示在页面上。
除了上面两种插值外，还可以在双大括号内直接使用js表达式，如：{{ message.split('').reverse().join('') }}
这将会逆转 message 文本。要注意的是，表达式末尾不要加分号，只能使用表达式，而不能是多条语句，也不能是if、while等结构。
可以使用普通js表达式，例如{{ alert('vue.js') }}
会在浏览器弹出 ‘vue.js’ 。
指令
vue.js中标签带v-开头的属性称为指令。
指令参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如：
<a v-bind:href="url">...</a>
其中href即为v-bind参数。
指令修饰符
修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。
<form v-on:submit.prevent="onSubmit">...</form>
v-bind 指令
v-bind指令带有一个参数，这个参数表示要绑定的html属性名，参数值可以变量，这样可以就进行动态绑定属性了。
例如：
<div v-bind:class="boxClass"></div>
之后就可以使用 vm.boxClass 动态修改该div的class的了。v-bind 常用参数有 style、class、id、href、disabled 等。
vue.js为v-bind提供了缩写，上面的例子可以写成：
<div :class="boxClass"></div>
即v-bind:缩写为:即可。
v-on 指令
v-on指令用于监听 DOM 事件：
<a v-on:click="doSomething">...</a>
其中doSomething可以是js代码，也可以一个方法名，这个方法名需要在Vue()构造方法的参数 methods 对象中定义：
var vm = new Vue({
el: '#app',
// 在 `methods` 对象中定义方法
methods: {
doSomething: function (event) {
// some code
}
}
});
vue.js为v-on提供了缩写，上面的例子可以写成：
<a @click="doSomething">...</a>
即v-on:缩写为@即可。
计算属性
计算属性是 vue 中可以使用一个函数计算后返回的属性值。
<div id="app">
<p>Origin: {{ message }}</p>
<p>Reversed: {{ reverseMessage }}</p>
</div>
var vm = new Vue({
el: '#app',
data: {
'message': 'luoluolzb',
},
computed: {
//reverseMessage getter
reverseMessage: function() {
return this.message.split('').reverse().join('');
},
});
这个例子中显示的结果为：
<div id="app">
<p>Origin: luoluolzb</p>
<p>Reversed: bzlouloul</p>
</div>
其中reverseMessage函数的返回值会插入到{{ reverseMessage }}位置。 计算属性不同于普通方法，计算属性是有缓存的，只有在依赖的message值改变时，reverseMessage函数才会重新执行。
侦听器
侦听器可以在数据发生变化的时候执行某些操作，从而动态响应数据的变化。
<div id="app">
<input type="text" v-model="expr" placeholder="输入表达式" /> = {{ result }}
<div style="display: none;">{{ expr }}</div>
</div>
var vm = new Vue({
el: '#app',
data: {
'expr': '',
'result': '',
},
watch: {
//expr listener
expr: function(){
this.result = eval(this.expr);
}
},
});
这个例子是一个简易的计算器，v-model指令可以将表单值与一个vue变量绑定在一起。 watch中的函数在制定的变量值改变时将会被执行。
计算属性和监听器的使用比较：watch（异步场景，事件监听），computed（数据联动）
条件渲染
vue提供了条件渲染功能，在需要的时候在显示某些内容。
<span v-if="s == 1">
s = 1
</span>
<span v-else-if="s == 2">
s = 2
</span>
<span v-else>
s > 2
</span>
这个例子会根据变量s的值动态选择一个span标签显示出来。其中v-else-if和v-else是可选的。
另外，若在template标签上使用条件渲染，将不会显示此标签。
此外，v-show指令也可以用于是否显示，不同的是v-show的显示是否是通过display实现的。
循环渲染
v-for指令提供了循环渲染功能：
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
其中items是要遍历的数组或对象，在标签中可以使用item访问数组元素。
对于数组可以添加一个参数来获取序号：
<ul>
<li v-for="(item, index) in items">
{{ item.message }}
</li>
</ul>
对于对象还有两个参数来获取属性名和序号：
<ul>
<li v-for="(item, key, index) in items">
{{ item.message }}
</li>
</ul>
此外，v-for也可以用于在template标签上，从而作为容器包裹多个标签。
组件
组件注册
使用Vue.component()函数注册全局vue组件：
Vue.component('blog-title', {
props: ['title'],
template: '<h3>{{ title }}</h3>',
});
其中props数组声明这些属性可以从父组件中传入，template为组件的html内容，注意必须用一个顶级标签包裹起来(每个组件必须只有一个根元素)。
初始化对象中还可以写 data、methods、computed、watch 等属性。
以上定义了 blog-title 组件后，使用以下方式进行使用：
<blog-title title="article title"></blog-title>
或者用动态绑定的方法传入：
<blog-title v-bind:title="title"></blog-title>
插槽
当我们需要在自定义组件内传入内容时，组件怎么获取到这些内容呢：
<slot-test>测试插槽</slot-test>
Vue.component('slot-test', {
template: '<b><slot></slot></b>',
});
这个例子中的渲染结果为：
<b>测试插槽</b>
说明了在组件定义时候可以使用slot标签使用传入的内容。
本文标签: JavaScript Vue
暂无评论，赶紧发表一下你的看法吧。