一、Vue.js 模板语法
1、插值
（1）文本
数据绑定最常见的形式就是使用{{...}}（双大括号）的文本插值。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>{{message}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</html>（2）HTML
使用v-html指令用于输出html代码。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divv-html="message"></div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
message: '<h1>菜鸟教程</h1>'
}
});
</script>
</html>
（3）属性
HTML属性中的值应使用v-bind指令。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.class1{
background:#444;
color:#eee;
}
</style>
<body>
<divid="app">
<labelfor="r1">修改颜色</label>
<inputtype="checkbox"v-model="class1"id="r1"/>
<br/><br/>
<divv-bind:class="{'class1':class1}">
directive v-bind:class
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
class1: false
}
});
</script>
</html>
（4）表达式
Vue.js都提供了完全的JavaScript表达式支持。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO'}}<br>
{{ message.split('').reverse().join('')}}
<divv-bind:id="'list-' + id">菜鸟教程</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
ok: false,
message: 'RUNOOB',
id: 1
}
});
</script>
</html>
2、指令
指令是带有v-前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到DOM上。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<pv-if="seen">现在你看到我了</p>
<templatev-if="ok">
<h1>菜鸟教程</h1>
<p>学的不只是技术，更是梦想</p>
<p>哈哈哈哈哈哈哈哈</p>
</template>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: false
}
});
</script>
</html>
这里，v-if指令将根据表达式seen的值（true或false）来决定是否插入p元素。
3、参数
参数在指令后以冒号指明。例如，v-bind指令被用来响应地更新HTML属性。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<pre><av-bind:href="url">菜鸟教程</a></pre>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
url:'http://www.runoob.com',
/*给元素绑定href时绑定一个target，新窗口打开页面*/
target:‘_blank’
}
});
</script>
</html>
在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。
4、修饰符
修饰符是以半角句号.指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。
5、用户输入
在input输入框中我们可以使用v-model指令来实现双向数据绑定。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>{{message}}</p>
<inputv-model="message"/>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
});
</script>
</html>
按钮的事件可以使用v-on监听事件，并对用户的输入进行响应。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>{{message}}</p>
<buttonv-on:click="reverseMessage">反转字符串</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage:function () {
this.message= this.message.split('').reverse().join('');
}
}
});
</script>
</html>
6、过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由”管道符”指示，格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在v-bind指令中-->
<div v-bind:id=”rawId | formatId”></div>
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue模板语法</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
{{ message | capitalize}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize:function (value) {
if (!value)return '';
value = value.toString();
return value.charAt(0).toUpperCase()+ value.slice(1);
}
}
});
</script>
</html>
二、Vue.js 条件与循环
1、条件判断
（1）v-if
条件判断使用v-if指令，例子请看上节。
（2）v-else
可以用v-else指令给v-if添加一个”else”块。
以下例子是：随机生成一个数字，判断是否大于0.5，然后输出对应信息
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue条件与循环</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divv-if="Math.random() > 0.5">
Sorry
</div>
<divv-else>
Not sorry
</div>
</div>
</body>
<script>
new Vue({
el: '#app'
});
</script>
</html>
（3）v-else-if
用作v-if的else-if块，可以链式的多次使用。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue条件与循环</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divv-if="type === 'A'">A</div>
<divv-else-if="type === 'B'">B</div>
<divv-else-if="type === 'C'">C</div>
<divv-else>Not A/B/C</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
});
</script>
</html>
V-else、v-else-if必须跟在v-if或者v-else-if之后。
（4）v-show
使用v-show指令来根据条件展示元素。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue条件与循环</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<h1v-show="ok">Hello</h1>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
});
</script>
</html>
三、Vue.js循环语句
1、循环语句
循环使用v-for指令。
V-for指令需要以site in sites形式的特殊语法，sites是源数据数组，site是数组元素迭代的别名。
V-for可以绑定数据到数组来渲染一个列表：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js循环语句</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<ol>
<liv-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
sites: [
{ name: 'Runoob'},
{ name: 'Google'},
{ name: 'Tapbao'}
]
}
});
</script>
</html>
2、v-for 迭代对象
v-for可以通过一个对象的属性来迭代数据。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js循环语句</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<ul>
<liv-for="value in object">
{{ value }}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url:'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想!'
}
}
});
</script>
</html>
也可以提供第二个参数为键名，第三个参数为索引
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js循环语句</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<ul>
<liv-for="(value,key,index) in object">
{{ index }}-{{ key }} :{{ value }}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url:'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想!'
}
}
});
</script>
</html>
3、v-for 迭代整数
V-for可以循环整数
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js循环语句</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<ul>
<liv-for="n in 10">
{{ n }}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app'
});
</script>
</html>
四、Vue.js 计算属性
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js计算属性</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>{{ site }}</p>
</div>
</body>
<script>
var vm = newVue({
el: '#app',
data: {
name: 'Google',
url:'http://www.google.com'
},
computed: {
site: {
//getter
get: function () {
return this.name+ ' ' +this.url
},
//setter
set: function (newValue) {
var names =newValue.split(' ');
this.name= names[0];
this.url= names[names.length- 1];
}
}
}
});
//调用setter,vm.name和vm.url也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name:' +vm.name);
document.write('<br>');
document.write('url:' +vm.url);
</script>
</html>
从实例运行结果看在运行 vm.site = '菜鸟教程http://www.runoob.com'; 时，setter会被调用， vm.name和 vm.url也会被对应更新。
五、Vue.js样式绑定
1、vue.js class
Class与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。
Vue.js v-bind在处理class和style时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
2、class属性绑定
我们可以为v-bind：class设置一个对象，从而动态的切换class。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.active{
width:100px;
height:100px;
background: green;
}
</style>
<body>
<divid="app">
<divv-bind:class="{active: isActive}"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
});
</script>
</html>
实例中将为isActive设置为true显示了一个绿色的div块，如果设置为false则不显示。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.active{
width:100px;
height:100px;
background: green;
}
.text-danger{
background: red;
}
</style>
<body>
<divid="app">
<divv-bind:class="{active: isActive, 'text-danger': hasError}"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
});
</script>
</html>
上述例子中，text-danger类背景颜色覆盖了active类的背景色。
也可以直接绑定数据里的一个对象，效果跟上述例子一样。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.active{
width:100px;
height:100px;
background: green;
}
.danger{
background: red;
}
</style>
<body>
<divid="app">
<divv-bind:class="classObject"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
danger: true
}
}
});
</script>
</html>
绑定返回对象的计算属性，这是一个常用且强大的模式：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.active{
width:100px;
height:100px;
background: green;
}
.danger{
background: red;
}
</style>
<body>
<divid="app">
<divv-bind:class="classObject"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
error:null
},
computed: {
classObject:function() {
return {
active: this.isActive&& !this.error,
danger: this.error&& this.error.type=== 'fatal',
}
}
}
});
</script>
</html>
2、数组语法
（1）可以把一个数组传给v-bind：class
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.active{
width:100px;
height:100px;
background: green;
}
.danger{
background: red;
}
</style>
<body>
<divid="app">
<divv-bind:class="[activeClass, errorClass]"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
activeClass:'active',
errorClass:'danger'
}
});
</script>
</html>
（2）使用三元表达式来切换列表中的class。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<style>
.danger{
width:100px;
height:100px;
background: red;
}
.active{
background: green;
}
</style>
<body>
<divid="app">
<divv-bind:class="[errorClass, isActive ? activeClass : '']"></div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
activeClass:'active',
errorClass:'danger'
}
});
</script>
</html>
3、vue.js style(内联样式)
（1）可以在v-bind:style直接设置样式
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divv-bind:style="{ color: activeColor, fontSize: errorClass + 'px'}">菜鸟教程</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
activeColor:'green',
errorClass:30
}
});
</script>
</html>
（2）可以直接绑定到一个样式对象，让模板更清晰。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divv-bind:style="styleObject">菜鸟教程</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px'
}
}
});
</script>
</html>
（3）v-bind:style可以使用数组将多个样式对象应用到一个元素上。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js样式绑定</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divv-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight':'bold'
}
}
});
</script>
</html>
注意：
1、v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind：你要动态变化的值=”表达式”。
2、v-bind用于绑定属性和数据，其缩写为”:”,也就是v-bind:id === :id
3、v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
六、Vue.js事件处理器
1、事件监听可以使用v-on指令
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js事件处理器</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<buttonv-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了{{ counter }}次。</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
counter:0
}
});
</script>
</html>
2、v-on可以接收一个定义的方法来调用。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js事件处理器</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<buttonv-on:click="greet">Greet</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
//'this'在方法里当前Vue实例
alert('Hello' +this.name+ '!');
//“event”是原生DOM事件
if (event) {
alert(event.target.tagName);
}
}
}
});
app.greet();
</script>
</html>
3、除了直接绑定到一个方法，也可以用内联JavaScript语句。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js事件处理器</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<buttonv-on:click="say('hi')">Say hi</button>
<buttonv-on:click="say('what')">Say what</button>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message);
}
}
});
</script>
</html>
4、事件修饰符
Vue.js为v-on提供了事件修饰符来处理DOM事件细节，如event.preventDefault()或 event.stopPropagation().
Vue.js通过由点(.)表示的指令后缀来调用修饰符.
.stop、.prevent、.capture、.self、.once
<!--阻止单击事件冒泡-->
<a v-on:click.stop = “doThis”></a>
<!--提交事件不再重载页面-->
<form v-on:submit.prevent = “onSubmit”></form>
<!--修饰符可以串联-->
<a v-on:click.stop.prevent=”doThat”></a>
<!--只有修饰符-->
<form v-on:submit.prevent></form>
<!--添加事件侦听器时使用事件捕获模式-->
<div v-on:click.capture=”doThis”></div>
<!--只当事件在该元素本身（而不是子元素）触发时触发回调-->
<div v-on:click.self=”doThat”></div>
<!--click事件只能点击一次，2.1.4版本新增-->
<a v-on:click.once=”doThis”></a>
5、按键修饰符
Vue 允许为v-on在监听键盘事件时添加按键修饰符。
<!-- 只有在keyCode是13时调用vm.submit() -->
<input v-on:keyup.13 = “submit” />
然而，记住所有的keyCode比较困难，所以Vue为最常用的按键提供了别名。
<!-- 同上 -->
<input v-on:keyup.enter=”submit”>
七、Vue.js 表单
用v-model指令在表单控件元素上创建双向数据绑定。
v-model会根据控件类型自动选取正确的方法来更新元素。
1、输入框
实例中演示了input和textarea元素中使用v-model实现双向数据绑定。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js表单</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>input元素：</p>
<inputv-model="message"placeholder="编辑我..."/>
<p>消息是：{{ message }}</p>
<p>textarea元素：</p>
<pstyle="white-space:pre;">{{ message2 }}</p>
<textareav-model="message2"placeholder="多行文本输入..."></textarea>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鸟教程\r\nhttp://www.runoob.com'
}
});
</script>
</html>
2、复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组。
以下实例中演示了复选框的双向数据绑定：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js表单</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>单个复选框：</p>
<inputtype="checkbox"id="checkbox"v-model="checked"/>
<labelfor="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<inputtype="checkbox"id="runoob"value="Runoob"v-model="checkedNames"/>
<labelfor="runoob">Runoob</label>
<inputtype="checkbox"id="google"value="Google"v-model="checkedNames"/>
<labelfor="google">Google</label>
<inputtype="checkbox"id="taobao"value="Taobao"v-model="checkedNames"/>
<labelfor="taobao">Taobao</label>
<br/>
<span>选择的值为：{{ checkedNames}}</span>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
checked: false,
checkedNames: []
}
});
</script>
</html>
3、单选按钮
以下实例中演示了单选按钮的双向数据绑定。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js表单</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<inputtype="radio"id="runoob"value="Runoob"v-model="picked"/>
<labelfor="runoob">Runoob</label>
<br/>
<inputtype="radio"id="google"value="Google"v-model="picked"/>
<labelfor="google">Google</label>
<br/>
<span>选中的值为：{{ picked }}</span>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
picked: 'Runoob'
}
});
</script>
</html>
4、select列表
以下实例中演示了下拉列表的双向数据绑定。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js表单</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<selectv-model="selected"name="fruit">
<optionvalue="">选择一个网站</option>
<optionvalue="www.runoob.com">Runoob</option>
<optionvalue="www.google.com">Google</option>
</select>
<divid="output">
选择的网站是：{{ selected }}
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
</html>
5、修饰符
（1）.lazy
在默认情况下，v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change时间中同步：
<!-- 在”change”而不是”input”事件中更新-->
<input v-model.lazy=”msg”/>
（2）.number
如果想自动将用户的输入值转为Number类型(如果原值的转换结果为NaN则返回原值),可以添加一个修饰符number给v-model来处理输入值。
<input v-model.number=”age” type=”number”>
（3）.trim
如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到v-model上过滤输入。
<input v-model.trim=”msg”>
八、Vue.js组件
组件（Component）是Vue.js最强大的功能之一。
组件可以扩展HTML元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
1、全局组件:所有实例都能用全局组件。
注册一个简单的全局组件runoob，并使用它：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js组件</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<runoob></runoob>
</div>
</body>
<script>
//注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
});
//创建根实例
new Vue({
el: '#app'
})
</script>
</html>
2、局部组件：这样的组件只能在这个实例中使用。
注册一个简单的局部组件runoob,并使用它：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js组件</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<runoob></runoob>
</div>
</body>
<script>
var Child ={
template: '<h1>自定义组件!</h1>'
}
//创建根实例
new Vue({
el: '#app',
components: {
//<runoob>将只在父模板可用
'runoob': Child
}
})
</script>
</html>
3、Prop
Prop是父组件用来传递数据的一个自定义属性。父组件的数据需要通过props把数据通过props把数据传给子组件，子组件需要显式地用props选项声明”prop”。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js组件</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<childmessage="hello!"></child>
</div>
</body>
<script>
//注册
Vue.component('child', {
//声明props
props: ['message'],
//同样也可以在vm实例中像"this.message"这样使用
template: '<span>{{ message }}</span>'
});
//创建根实例
new Vue({
el: '#app'
})
</script>
</html>
4、动态Prop
类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js组件</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<ol>
<todo-itemv-for="item in sites"v-bind:todo="item"></todo-item>
</ol>
</div>
</body>
<script>
//注册
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
//创建根实例
new Vue({
el: '#app',
data: {
sites: [
{text:'Runoob'},
{text:'Google'},
{text:'Taobao'}
]
}
})
</script>
</html>
5、自定义事件
父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件。
我们可以使用v-on绑定自定义事件，每个Vue实例都实现了事件接口(Events interface),即：
（1）使用$on(eventName)监听事件
（2）使用$emit(eventName)触发事件
另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Vue.js组件</title>
<scripttype="text/javascript"src="js/vue.min.js"></script>
</head>
<body>
<divid="app">
<divid="counter-event-example">
<button-counterv-on:increment="incrementTotal"></button-counter>+
<button-counterv-on:increment="incrementTotal"></button-counter>=
<span>{{ total }}</span>
</div>
</div>
</body>
<script>
//注册
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter:0
}
},
methods: {
increment: function () {
this.counter+= 1;
this.$emit('increment');
}
}
});
//创建根实例
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal:function () {
this.total+= 1;
}
}
})
</script>
</html>
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
