Vue2 第一天学习
阅读目录
- 1.vue组件注册步骤
- 2.理解组件的创建和注册。
- 3.理解Vue全局注册和局部注册
- 4.理解父组件和子组件
- 5.理解组件的语法糖。
- 6.学会使用 script或 template 标签
- 7.理解使用props
1.vue组件注册步骤
Vue.js 的组件有三个步骤： 创建组件构造器(Vue.extend()方法 )，注册组件(Vue.component())和实例化组件。
如下demo：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container">
<component1></component1>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
var component1 = Vue.extend({
template: '<div>hello world</div>'
});
// 2. 注册组件，并指定组件的标签为<component1>
Vue.component('component1', component1); // 3. 实例化组件
new Vue({
el: '#container'
});
</script>
</html>
浏览器编译后html结构会变为
<div id="container">
<div>hello world</div>
</div>
页面运行显示为
hello world
2.理解组件的创建和注册。
2-1 Vue.extend() 是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。
2-2 Vue.component() 是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。
2-3 组件需要挂载到某个Vue的实例下，否则不生效。
如下实例：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
<div id="container2">
<component1></component1>
</div> <div id="container3">
<component1></component1>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
var component1 = Vue.extend({
template: '<div>hello world</div>'
});
// 2. 注册组件，并指定组件的标签为<component1>
Vue.component('component1', component1); // 3. 实例化组件 container1
new Vue({
el: '#container1'
});
// 3. 实例化组件 container2
new Vue({
el: '#container2'
});
// 不实例化 container3 因此第三个自定义标签是不会生效的
</script>
</html>
最终代码被渲染成为如下：
<div id="container1"><div>hello world</div></div>
<div id="container2"><div>hello world</div></div>
3.理解Vue全局注册和局部注册
调用Vue.component()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。
如下代码：中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
<!-- 不能使用component1组件，因为它是container1里面局部注册的 -->
<div id="container2">
<component1></component1>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
var component1 = Vue.extend({
template: '<div>hello world</div>'
}); // 3. 实例化组件 container1
new Vue({
el: '#container1',
components: {
'component1': component1
}
});
// 实例化container2 是不生效的
new Vue({
el: '#container2'
})
</script>
</html>
实例化container2 是不生效的，并且在浏览器控制台会报如下错误：
4.理解父组件和子组件。
在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。
如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<parent-component></parent-component>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
var Child = Vue.extend({
template: '<div>hello world</div>'
}); var Parent = Vue.extend({
// 在组件内部使用<child-component>组件
template: '<div>hello world <child-component></child-component></div>',
components: {
// 局部注册Child组件
'child-component': Child
}
});
// 全局注册Parent组件
Vue.component('parent-component', Parent); // 实例化组件
new Vue({
el: '#container1'
})
</script>
</html>
简单理解代码如下：
1. var Child = Vue.extend(...) 定义一个Child组件构造器。
2. var Parent = Vue.extend(...) 定义一个Parent组件构造器。
3. components: {'child-component': Child}, 将Child组件注册到Parent组件，并将Child组件的标签设置为 child-component;
4. template: 渲染html模板，找到template选项，然后使用 child-component组件。
5. 注册Parent组件 Vue.component('parent-component', Parent);
6. 最后实例化组件，需要到html元素为id='container1'里面去。
Child组件是在Parent组件中注册的，只能在Parent组件中注册的。如下几种情况都不行的。
4-1 以子标签的形式在父组件中使用；如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<parent-component>
<child-component></child-component>
</parent-component>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
var Child = Vue.extend({
template: '<div>hello world</div>'
}); var Parent = Vue.extend({
// 在组件内部使用<child-component>组件
template: '<div>hello world</div>',
components: {
// 局部注册Child组件
'child-component': Child
}
});
// 全局注册Parent组件
Vue.component('parent-component', Parent); // 实例化组件
new Vue({
el: '#container1'
})
</script>
</html>
上面调用子组件的方式是无效的，因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么，所以当parent-component运行的时候，在父组件使用自定义的子标签。
运行时会当做html的普通标签来渲染，但是它又不是普通的html标签，因此会被忽略掉。
4-2. 在父组件标签外使用子组件。
<div id="container1">
<parent-component></parent-component>
<child-component></child-component>
</div>
js代码还是上面的一样，运行完成后，在浏览器下会报错如下：
5.理解组件的语法糖。
我们可以使用更简单的方式来注册组件。
5-1 使用Vue.component()直接创建和注册组件。如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 全局注册
Vue.component('component1', {
template: '<div>hello world222</div>'
});
// 实例化
var vm1 = new Vue({
el: '#container1'
});
</script>
</html>
Vue.component()的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义，使用该方式，在Vue源码中会调用Vue.extend()方法。
注意： 在template元素中需要使用一个标签容器包围，比如我们可以把div元素去掉的话，只放内容的话，会报错如下：
5-2 在选项对象的components属性中实现局部注册。
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div> <div id="container2">
<component2></component2>
<component3></component3>
</div>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
// 全局注册，my-component1是标签名称
Vue.component('component1',{
template: '<div>This is the first component!</div>'
})
var vm1 = new Vue({
el: '#container1'
}) // 实例化 局部注册
var vm1 = new Vue({
el: '#container2',
components: {
// 局部注册， component2 是标签名称
'component2': {
template: '<div>component2</div>'
},
// 局部注册，component3 是标签名称
'component3': {
template: '<div>component3</div>'
}
}
});
</script>
</html>
6.学会使用 script或 template 标签。
虽然语法糖简化了组件注册，但是在template选项中拼接了html元素，这导致View和C层的高耦合性。幸运的是Vue.js 提供了2种方式将javascript中的html模板分离出来。
6-1 使用script标签, 如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
<script type='text/x-template' id="myComponent">
<div>hello world!!!!!</div>
</script>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#container1',
components: {
'component1': {
template: '#myComponent'
}
}
})
</script>
</html>
注意： 使用<script>标签时，type指定为 text/x-template，是告诉浏览器这不是一段js脚本，浏览器在解析html文档时会忽略script标签内定义的内容。
6-2 使用<template>标签。不需要指定type属性。
如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
<template id="myComponent">
<div>hello world2222!!!!!</div>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#container1',
components: {
'component1': {
template: '#myComponent'
}
}
})
</script>
</html>
7.理解使用props。
父组件的数据如何传给子组件呢？可以使用props把数据传给子组件。
代码如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1 v-bind:my-name="name" v-bind:my-age="age"></component1>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>myName</td>
<td>{{ myName }}</td>
</tr>
<tr>
<td>myAge</td>
<td>{{ myAge }}</td>
</tr>
</table>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#container1',
data: {
name: 'longen',
age: 30
},
components: {
'component1': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
注意： 在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，会转为短横线隔开的，比如上面的代码：
在props中定义的myName,在用作特性时需要转换为 my-name
理解prop的单向绑定
既然父组件使用props把数据传给了子组件，那么如果子组件修改了数据，对父组件是否有影响呢？
看下面的代码如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
font-size: 12px;
font-family: Ubuntu, simHei, sans-serif;
font-weight: 400
}
body {
font-size: 1rem
} table,
td,
th {
border-collapse: collapse;
border-spacing: 0
} table {
width: 100%;
margin: 20px;
} td,
th {
border: 1px solid #bcbcbc;
padding: 5px 10px
} th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer
} tr:nth-of-type(odd) {
background: #fff
} tr:nth-of-type(even) {
background: #eee
} fieldset {
border: 1px solid #BCBCBC;
padding: 15px;
} input {
outline: none
} input[type=text] {
border: 1px solid #ccc;
padding: .5rem .3rem;
} input[type=text]:focus {
border-color: #42b983;
} button {
outline: none;
padding: 5px 8px;
color: #fff;
border: 1px solid #BCBCBC;
border-radius: 3px;
background-color: #009A61;
cursor: pointer;
}
button:hover{
opacity: 0.8;
} #container1 {
margin: 0 auto;
max-width: 480px;
}
</style>
</head>
<div id="container1">
<table>
<tr>
<th colspan="3">
父组件数据
</th>
</tr>
<tr>
<td>name</td>
<td>{{ name }}</td>
<td><input type='text' v-model = "name" /></td>
</tr>
<tr>
<td>age</td>
<td>{{ age }}</td>
<td><input type="text" v-model="age" /></td>
</tr>
</table>
<component1 v-bind:my-name="name" v-bind:my-age="age"></component1>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="3">
子组件数据
</th>
</tr>
<tr>
<td>myName</td>
<td>{{ myName }}</td>
<td><input type="text" v-model="myName" /></td>
</tr>
<tr>
<td>myAge</td>
<td>{{ myAge }}</td>
<td><input type="text" v-model="myAge" /></td>
</tr>
</table>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#container1',
data: {
name: 'longen',
age: 30
},
components: {
'component1': {
template: '#myComponent',
props: ['myName', 'myAge']
}
}
})
</script>
</html>
Vue2 第一天学习的更多相关文章
- Vue2基础知识学习
Vue2基础知识学习 01.初识 new Vue({ el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器符 data () { return { } } }); ...
- 20145213《Java程序设计》第一周学习总结
20145213<Java程序设计>第一周学习总结 教材学习内容总结 期待了一个寒假,终于见识到了神秘的娄老师和他的Java课.虽说算不上金风玉露一相逢,没有胜却人间无数也是情理之中,但娄 ...
- 20145330孙文馨 《Java程序设计》第一周学习总结
20145330孙文馨 <Java程序设计>第一周学习总结 教材学习内容总结 刚开始拿到这么厚一本书说没有压力是不可能的,开始从头看觉得很陌生进入不了状态,就稍微会有一点焦虑的感觉.于是就 ...
- 20135328信息安全系统设计基础第一周学习总结（Linux应用）
学习计时:共xxx小时 读书: 代码: 作业: 博客: 一.学习目标 1. 能够独立安装Linux操作系统 2. 能够熟练使用Linux系统的基本命令 3. 熟练使用Linux中用户管理命令/ ...
- 20145218《Java程序设计》第一周学习总结
20145218 <Java程序设计>第一周学习总结 教材学习内容总结 今天下午看了Java学习的视频,感觉很是新奇,之前觉得Java学起来是艰难枯燥的,但通过第一章的学习觉得如果自己可以 ...
- 《Java程序设计》第一周学习总结
20145224 <Java程序设计>第一周学习总结 教材学习内容总结 通过第一周的学习让我对Java有了个初步的了解,知道了Java分为Java SE.Java EE.Java ME三大 ...
- 《jave程序设计》第一周学习总结
<JAVA程序设计>第一周学习总结 教材学习内容总结 在第一周的学习中,我初次认识了JAVA程序的一些基础知识.我发现了很多问题 问题就是自己的代码编写出现了一点问题,符号和单词的大小写都 ...
- [未完成]WebService学习第一天学习笔记
[未完成]WebService学习第一天学习笔记[未完成]WebService学习第一天学习笔记
- oldboy第一天学习
oldboy第一天学习 一.听Alex Li 吹牛逼! 1.老男孩附加的功能.每节课都有鸡汤.节省时间,投资自己.结识更多的朋友. 2.python的创始人为吉多·范罗苏姆(Guido van Ros ...
随机推荐
- 【转】Git 教程之协同开发
前面我们已经介绍过远程仓库的相关概念,不过那时并没有深入探讨,只是讲解了如何创建远程仓库以及推送最新工作成果到远程仓库,实际上远程仓库对于团队协同开发很重要,不仅仅是团队协同开发的基础,也是代码备份的 ...
- python全局解释器锁（GIL）
文章作者:卢钧轶(cenalulu) 本文原文地址:http://cenalulu.github.io/python/gil-in-python/ ,对文章做了适当的修改,加入了一些自己的理解. CP ...
- vue项目sql图片动态路径引用问题
最近遇到一个vue动态图片路径的引用问题?明明路径是正确的但是却渲染不出图片!先看我慢慢说来!! 1.当我们把图片的路径放置在data(){return:{}}中的数组中的时候,然后通过v-for循环 ...
- Python知识点小记
类 设置类属性必须使用类对象,若使用实例对象设置,会重新创建一个和类属性同名的实例属性 类对象可调用 类方法&静态方法, 实例对象可调用 实例方法&类方法&静态方法; 类方法和 ...
- React 入门学习笔记整理（六）—— 组件通信
1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...
- React 入门学习笔记整理（七）—— 生命周期
(1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...
- 【机器学习】激活函数（Activation Function）
https://blog.csdn.net/ChenVast/article/details/81382795 激活函数是模型整个结构中的非线性扭曲力 神经网络的每层都会有一个激活函数 1.逻辑函数( ...
- 《Inside C#》笔记(三) 数据类型
数据类型系统是一门编程语言的核心..NET系列的语言使用统一的数据类型系统CTS(Common Type System).所有的数据类型都继承自System.Object. 一 值类型和引用类型 a) ...
- 2018最新大厂Android面试真题
前言 又到了金三银四的面试季,自己也不得不参与到这场战役中来,其实是从去年底就开始看,android的好机会确实不太多,但也还好,3年+的android开发经历还是有一些面试机会的,不过确实不像几年前 ...
- TraceView工具的使用
一.TraceView工具如何使用 TraceView有4种启动/关闭分析方式: (1) 第一种使用方法演示 1. 选择跟踪范围 在想要根据的代码片段之间使用以下两句代码 Debug.startMet ...