今日 内容:
1.VUE自定义组件(尤雨溪)
2.脚手架
3.路由
4.Element-UI(容易)
1.组件
-
组件概述
组件是Vue框架非常重要的功能之一,它主要对html元素进行封装,可以复用.
简单来说,使用vue组件方法对html元素进行定义. -
为什么使用组件？
需要在其它网页里面需要使用有弧度按钮
在每个网页的每个按钮中,设置style=“border-radius: 10px;”
怎么解决这个问题?
vue提供的组件来解决这个问题.
步骤一 1: 定义模板,其实对html标签进行自定义
步骤二 2: 定义的模板注册到组件(全局组件)
全局组件: 一次定义,到处使用,就能解决原始html中代码重复的问题 -
组件使用
方式二: 基本语法
Vue.component(“組件名稱”,{
“template”:“定义标签,设置样式等等”
});
方式一:基本语法
1. 定义模板: var tem = Vue.extend({
“template”:“定义标签,设置样式等等”}); 2.模板注册到组件中(全局组件) Vue.component(组件名称,模板对象); 比如:Vue.component("el-button",tem); 注意事项 1.调用方法时, Vue的V必须大写 2.设置参数时, template名称是固定的 3.定义组件名称时,推荐写法一 写法一: 英文单词(都是小写的)-英文单词(都是小写的) 比如: el-button 写法二: 英文单词(首字母大写,其它小写)英文单词(首字母大写,其它小写) 比如:ElButton 写法三: 英文单词(首字母小写,其它小写)英文单词(首字母大写,其它小写) 比如: elButton
入门三: 自定义标签属性
入门二定义模板:将button标签的值写死了: 自定义样式按钮
<button style='border-radius: 10px;'>自定义样式按钮</button>
解决入门二的问题:
props:
作用可以自定义组件的属性,给组件里面的标签灵活赋值
比如:<el-button 属性名称="赋值"> 赋值设置到组件的标签里面了
入门四:自定义的组件绑定事件,改变组件的文本值
data函数:{}
定义模板时:
Vue.extend({
"props" :["属性名称1","属性名称2",----"属性名称N"],
"template":"html标签,设置自定义的样式等等",
"data":function(){
方法体;
},
});
props选项,给自定义组件设置多个属性
* 总结
1. 定义模板时,用到选项:template
作用: 定义html标签,自定义标签的样式等
2. 定义模板时,用到选项:props
作用: 通过给自定义的组件设置属性,从而改变template里面标签的文本
3. 定义模板时,用到选项: data,(特殊data函数)
作用:通过给模板设置data函数,从而改名template里面标签的文本值
- 定义模板时,用到选项: methods,
作用:给模板里面的标签绑定的事件,提供函数
基本入门1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>入門一</title>
</head>
<body>
<!--定义普通按钮-->
<button>普通按钮,没有任何样式</button>
<!--需要在网页里面使用具有弧度的按钮-->
<button style="border-radius: 10px;">所需的按钮</button>
<!--
需要在其它网页里面需要使用有弧度按钮
在每个网页的每个按钮中,设置style="border-radius: 10px;"
怎么解决这个问题?
vue提供的组件来解决这个问题.
步骤一 1: 定义模板,其实对html标签进行自定义
步骤二 2: 定义的模板注册到组件(全局组件)
全局组件: 一次定义,到处使用,就能解决原始html中代码重复的问题
-->
</body>
</html>
基本入门2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件入门二</title>
</head>
<body>
<div id="app">
<el-button></el-button>
<el-button></el-button>
<el-button></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
//1.定义模板,双引号嵌套单引号, 单引号嵌套双引号
var tem = Vue.extend({
"template":"<button style='border-radius: 10px;'>自定义样式按钮</button>",
});
//2.注册组件
Vue.component("el-button",tem);
//创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
</html>
基本入门3
<div id="app">
<el-button title="1111"></el-button>
<el-button title="2222"></el-button>
<el-button title="3333"></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
//1.定义模板: template,props固定写法
var tem = Vue.extend({
"props":["title"],
"template":"<button style='border-radius: 10px;'>{
{title}}</button>",
});
//2.组件注册: 将模板 绑定到 自定义的组件名称
Vue.component("el-button",tem);
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>case1</title>
</head>
<body>
<div id="app">
<el-button></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
//1.定义模板: template,props,data固定写法,至于return数据
var tem = Vue.extend({
"data":function(){
return {"count":1,}
},
"template":"<button style='border-radius: 10px;'>{
{count}}</button>",
});
//2.组件注册: 将模板 绑定到 自定义的组件名称
Vue.component("el-button",tem);
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
</html>
<div id="app">
<el-button></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
/*
* 案例: 点击按钮,改变按的值
需求: 点击按钮,点击一次按钮,值+1
思路:
1.定义模板: 给模板的按钮标签绑定点击事件
在模板里面,使用data函数,定义数据count
2.组件注册: 将模板 绑定到 自定义的组件名称
*/
//1.定义模板
var tem = Vue.extend({
"data":function(){
return {"number":1,};
},
"template":"<button style='border-radius: 10px;' @click='++number' >{
{number}}</button>",
});
//2.组件注册: 将模板 绑定到 组件名称上, 实现: html写组件名称,显示模板
Vue.component("el-button",tem);
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
<div id="app">
<el-button></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
/*
* 案例: 点击按钮,改变按的值
需求: 点击按钮,点击一次按钮,值+1
思路:
1.定义模板: 给模板的按钮标签绑定点击事件
在模板里面,使用data函数,定义数据count
2.组件注册: 将模板 绑定到 自定义的组件名称
*/
//1.定义模板
var tem = Vue.extend({
"data":function(){
return {"number":1,};
},
"template":"<button style='border-radius: 10px;' @click='++number' >{
{number}}</button>",
});
//2.组件注册: 将模板 绑定到 组件名称上, 实现: html写组件名称,显示模板
Vue.component("el-button",tem);
//3.创建vue对象
new Vue({
"el":"#app",
});
</script>
</body>
<div id="app">
<el-button></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
/*
* 案例: 点击按钮,改变按的值
需求: 点击按钮,点击一次按钮,值+1
思路:
1.定义模板: 给模板的按钮标签绑定点击事件
在模板里面,使用data函数,定义数据count
2.组件注册: 将模板 绑定到 自定义的组件名称
*/
//1.定义模板
var tem = Vue.extend({
"data":function(){
return {"count":1,};
},
"template":"<button style='border-radius: 10px;' @click='test1()' >{
{count}}</button>",
"methods":{
//定义函数
test1(){
this.count++;
},
},
});
//2.组件注册
Vue.component("el-button",tem);
//3
new Vue({
"el":"#app",
});
</script>
</body>
<div id="app">
<el-button></el-button>
</div>
<!--路径的写法: 1.绝对路径 2. 相对路径, 同一级目录,上一级目录,下一级目录-->
<script src="js/vue.js"></script>
<script>
/*
* 案例: 点击按钮,改变按的值
需求: 点击按钮,点击一次按钮,值+1
思路:
1.定义模板: 给模板的按钮标签绑定点击事件
在模板里面,使用data函数,定义数据count
2.组件注册: 将模板 绑定到 自定义的组件名称
*/
//1.定义模板
//2.组件注册
Vue.component("el-button",{
"data":function(){
return {"count":100,};
},
"template":"<button style='border-radius: 10px;' @click='test1()' >{
{count}}</button>",
"methods":{
//定义函数
test1(){
this.count++;
},
},
});
//3
new Vue({
"el":"#app",
});
</script>
</body>