参考网址
官网：https://cn.vuejs.org/v2/api/#Vue-component
https://www.jianshu.com/p/0cfff4a2f226
https://www.jb51.net/article/140581.htm
注意事项：template中的html最外层必须有一个根节点
目标
- 组件
- 生命周期
组件
我的理解：组件类似java中的类（封装）
组件（Component）是 Vue.js 最强大的功能之一。
注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。
组件可以扩展 HTML 元素，封装可重用的代码，减少重复劳动。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
全局组件
所有实例都能用全局组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>
<div id="app2">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!<br><span>换行后内容</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
// 创建根实例
new Vue({
el: '#app2'
})
</script>
</body>
</html>
局部组件
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
如下例子，app2中访问不到runoob组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>
<div id="app2">
<runoob></runoob>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': {template: '<h1>自定义组件!</h1>'}
}
})
</script>
</body>
</html>
template方式创建
上面的创建方式把html直接做为字符串写到template里，不方便看效果和调试，所以可以把html部分的内容抽取到body里面，包到<template> </template>之间，并可以为template指定唯一的id,js中就可以通过引用id把模板内容包含进来了
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>
<div id="app2">
<runoob></runoob>
</div>
<template id="mytemp">
<h1>自定义组件!<br><span>换行后内容</h1>
</template>
<script>
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': {
template: '#mytemp'
}
}
})
</script>
</body>
</html>
更先进的方式(先了解，上脚手架后会应用)
上面是一个最简单的注册例子，但是实际上我们并不会这么用。将来用vue-cli脚手架搭架后，我们会单独创建一个vue文件来封装一个组件。
在其他需要的地方用import ... from ...引用，类似java中类的引用
参考网址：https://www.jb51.net/article/146223.htm
生命周期详解
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
https://www.php.cn/vuejs/463882.html
<body>
<div id="content">
信息:{{msg}}
</div>
<script type="text/javascript">
let vue=new Vue({
el:'#content',
data:{
msg:'old msg'
},
beforeCreate:function(){
alert("beforeCreate");
},
created:function(){
alert("created");
},
beforeMount:function(){
alert("beforeMount");
},
mounted:function(){
alert("mounted");
},
beforeUpdate:function(){
alert("beforeUpdate");
},
updated:function(){
alert("updated");
}
});
setTimeout(function(){
vue.msg="change......";
},3000)
</script>
</body>
例子（根据后台数据加载列表框的值）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="content">
<template v-for="item in chks">
<input type="checkbox" name="hobby1" :value="item.id" :checked="chkvar.indexOf(item.id) > -1" />{{item.name}}
</template>
<br>
<select multiple>
<!-- <select v-model="selectid" >单选-->
<template v-for="item in chks">
<option type="checkbox" name="hobby2" :value="item.id" :selected="chkvar.indexOf(item.id) > -1">{{item.name}}
</option>
</template>
</select>
</div>
<script>
var vue = new Vue({
el: '#content',
data: {
chks: [{
id: 1,
name: "吃饭"
},
{
id: 2,
name: "睡觉"
},
{
id: 3,
name: "打豆豆"
},
{
id: 4,
name: "唱歌"
},
{
id: 5,
name: "学习"
}
],
chkvar: '',
selectid:2
},
mounted: function() {
var arr = [1, 2, 4] //假设这是被选中的爱好
this.chkvar = arr
}
})
</script>
</body>
</html>
Vue目前学到的属性
- el
- data
- methods
- computed
- watch
- filters
- components
- beforeCreate:
- created
- beforeMounted
- mounted
- beforeUpdated
- updated 等
