# VUE组件
### 1.基本格式
```html
<body>
<div id="app">
<span>{{ name }}</span>
<button @click="dianji">点我一下</button>
</div>
</body>
<script>
new Vue({
#1.
el:'#app',
#2.
data:{
name:'python'
},
#3.
methods: {
dianji:function(){
alert('弹窗一个')
}
},
})
</script>
```
1. 绑定标签 被绑定的标签下面的元素都可以直接调用 #表示绑定id .表示绑定class
2. 命名变量 之后要使用的变量都在这里命名出来,如果需要变量在html页面中显示出来,那么使用{{ 变量名 }} 格式
3. 方法 所有的方法都定义在此中 格式:
函数名:funcation(参数){执行代码}
4. 基本绑定:
- v-on: 绑定事件 可以使用@代替
- v-bind: 用于设置HTML属性
- v-model 关联属性
### 2.组件的使用
#### 1.全局组件的使用
```js
// 全局组件 第一个参数是组件名 第二个参数是一个{}
//template属性是指定html标签内容
Vue.component(
'zujian_all',
{
template:'<div>这是一个组件</div>'
}
)
```
使用时:
```html
<!-- 把组件名作为标签去调用 -->
<zujian_all></zujian_all>
```
#### 2.局部组件的使用
1. 局部组件加载在全局组件中
2. 局部组件需要定义在全局组件的前面
定义:
```html
// 局部组件
var jubu_a={
template:'<div>这是一个局部</div>'
}
```
使用:
镶嵌在全局组件的template中
```js
template:'<div>这是一个组件 <jubu_a></jubu_a> </div>',
```
全局组件中注册子组件
```js
components:{
zujian_a
},
```
### 3.组件中数据的绑定
组件中数据的获取 不能从vue标签中的data数据获取,而是需要自己去重新定义
```js
Vue.component(
'zujian_all',
{
template:'<div>这是一个组件 <jubu_a></jubu_a> {{quanju_var}} </div>',
// 将局部组件添加在全局中
components:{
jubu_a
},
//变量的定义
data:function(){
return {
quanju_var:'全局变量',
}
}
}
)
```
1. 需要定义在component的下面
2. data函数的返回值中定义变量
3. 组件使用变量(data)定义为方法的原因:
因为组件不可能只调用一次,定义为变量时,如果对数据做了更改,其他的也会发生变化,所以需要定义为方法,这样每个之间互不干扰
### 4.组件中的传值
#### 1.父组件往子主键传值
1. 在局部组件中添加接收
```
props:['pos']
```
2. 局部标签模板中绑定该数据
```
template:'<div>这是一个组件 <jubu_a v-bind:pos="age" ></jubu_a> {{quanju_var}} </div>',
```
最外层的是全局组件, v-bind:pos="age" 表示使用pos变量绑定哪一个全局组件中的变量
3. 局部组件中调用{{pos}} 就可以获得全局组件中age的值
```
template:'<div>这是一个局部 {{pos}} {{jubu_var}}</div>',
```
总体:
```js
<script>
// 局部组件
var jubu_a={
template:'<div>这是一个局部 {{pos}} {{jubu_var}}</div>',
data:function(){
return {
jubu_var:'局部变量'
}
},
//接收父主键数据
props:['pos'],
}
// 全局组件 第一个参数是组件名 第二个参数是一个{}
//template属性是指定html标签内容
Vue.component(
'zujian_all',
{
template:'<div>这是一个组件 <jubu_a v-bind:pos="age" ></jubu_a> {{quanju_var}} </div>',
// 将局部组件添加在全局中
components:{
jubu_a
},
data:function(){
return {
quanju_var:'全局变量',
age:10
}
}
}
)
new Vue({
el:'#app',
data:{
name:'python'
},
methods: {
dianji:function(){
alert('弹窗一个')
}
},
})
</script>
```
#### 2.子组件往父组件传值
1. 子组件中定义方法methods 方法返回值为:
this.$emit(‘uploda’,this.需要传递的变量)
```js
methods:{
jubuB_fun:function(){
return this.$emit('upload',this.jubuB_var)
}
}
```
2. 子组件绑定该方法 点击该按钮时触发事件 将变量上传
```js
template:'<div>这是一个局部组件2222 <button v-on:click="jubuB_fun"> 上传</button> </div>',
```
3. 全局变量中 template中的局部标签中绑定方法 用于接收数据
```js
template:'<div>这是一个组件 <jubu_a v-bind:pos="age" ></jubu_a> {{quanju_var}} <jubu_b v-on:upload="getdata" ></jubu_b> </div>',
```
<jubu_b v-on:upload="getdata" ></jubu_b>为绑定的方法 当获得upload事件时执行getdata函数
4. 定义getdata函数
```js
methods:{
getdata:function(data){
alert(data)
}
}
```
此处只做了弹出操作,也可以做其他的操作
### 5.单文件组件
#### 1.环境配置
单文件组件不能直接运行使用，需要依赖**node**项目对其进行解析打包，在使用之前需要先进行环境配置
1. 安装node版本管理工具nvm
1. ```shell
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置 更新配置需要在家目录下面 或者直接关闭终端 重新打开
source .bashrc
```
2. 安装最新版本的node
1. ```shell
nvm install node
```
3. 更新npm的安装源
1. ```shell
npm config set registry https://registry.npm.taobao.org
```
安装完成了,接下来可以创建项目了
#### 项目创建
1. 创建项目目录
1. ```shell
mkdir project
```
2. 进入项目目录，初始化项目目录
1. ```shell
cd project
npm init
```
2. 初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块
3. 配置package.json文件
1. ```json
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"css-loader": "^0.28.11",
"element-ui": "^2.7.2",
"file-loader": "^1.1.4",
"lodash": "^4.17.4",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-router": "^3.0.2",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
}
}
```
2. g该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
4. 安装项目依赖模块
1. ```shell
npm install
```
5. 创建项目文件 main.js ,index.html, App.vue
1. ```shell
touch index.html main.js App.vue.
可以借助vscode编辑工具创建文件
```
2. index.html文件时项目的首页文件
3. main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件
4. App.vue文件为单文件组件文件
6. 创建webpacke打包的配置文件webpack.config.js
1. ```javascript
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: { main: "./main.js" }, //入口文件
output: {
filename: 'index.js', //出口文件名
path: path.resolve(__dirname), //当前目录
library: 'index' // 打包后模块的名称
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module: {
rules: [ //定义不同类型的文件使用的loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'vue-style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
minimize: true //添加
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
},
]
}
}
```
2. 在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染
目录创建完成后结构如下
#### 2.基本流程
##### 1.html页面
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<!-- 1. 定义要用来作为模块的标签 -->
<div id="app">
<!-- 7.这个是mian.js中render渲染后的app 这个时候就可以使用组件封装的内容了 -->
<!-- 8.内容指定在App.vue中 -->
<App></App>
</div>
<!-- 2.引入js文件 -->
<!-- <script src="./main.js"></script> -->
<!-- 9.引入打包好的js文件 -->
<script src="./index.js"></script>
</body>
</html>
```
##### 2.main.js页面
```javascript
// 3.引入vue 这个vue来源是配置文件的包(note_model) 指定模块的名字叫Vue
import Vue from 'vue'
// 5.导入组件 名字为App
import App from './App.vue'
// 4. 创建vue对象 为id=app的标签
new Vue({
el:'#app',
// 6.调用app.vue 使用这个方法进行渲染操作
render:function(create){
// 对app进行渲染操作 结果返回给index
return create(App)
}
})
```
##### 3.App.vue界面
```vue
<template>
<!-- html页面内容 -->
<div> 单文件组件</div>
</template>
<script>
// 当前页面的js代码
// 让其他文件可以导入这个js代码 export default 没有这个的话就不能引用
export default {
}
</script>
<style>
/* css样式 */
</style>
```
流程:
1. html中文件中定义好需要作为vue模块的文件,设置导入文件为mian.js
2. main.js中导入需要使用的模块, import Vue from ‘vue’ vue是配置环境中的vue
3. main.js中创建
##### 4.配置完成后,可以打包js文件了
```bash
$ npm run build
```
#### 3.多个单文件组件的使用
###### 1.嵌套方式
1. 在project目录下创建components文件夹，然后将所有子组件放入components文件夹下
2. 文件组件都以vue后缀命名
3. 全局组件中导入单文件组件
1. 单文件组件导入嵌套方法第一步 导入单文件组件(全局组件script中)
```vue
<script>
// 单文件组件导入嵌套方法第一步 导入单文件组件
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
```
2. *单文件组件导入嵌套方法第二步 单文件组件添加到全局组件中(接着上面的代码继续书写
```vue
// 当前页面的js代码
export default {
// 单文件组件导入嵌套方法第二步 单文件组件添加到全局组件中
components:{
Child1,
Child2
}
}
</script>
```
3. *单文件组件导入嵌套方法第三步 全局组件中使用单文件组件
```vue
<template>
<!-- html页面内容 -->
<div> 单文件组件
<!-- // 单文件组件导入嵌套方法第三步 全局组件中使用单文件组件 -->
<Child1></Child1>
<Child2></Child2>
</div>
</template>
```
###### 2.路由分发方式
1. 新建路由文件 js文件
2. 导入模块 vue router 单组件文件
```
import Vue from 'vue'
import Router from 'vue-router'
```
3. 使用路由 Vue.use(Router--路由导入的名称)
```
Vue.use(Router)
```
4. 指定路由规则
```hs
export default new Router({
匹配规则
routes:[
{
path:'/' 路径
component: 组件名
}
]
})
export default new Router(
{
path:'/',
component:Child1
},
{
path:'two',
component:Child2
}
)
```
5. mian.js 导入路由文件
```
import router from './router/router.js'
```
- **必须使用这个变量名 不能修改**
6. 路由文件添加到vue对象中
7. 主组件App.vue添加注册路由
## 6.Elenment-ui的使用
[element官网](https://element.eleme.cn/#/zh-CN)
1. 单文件组件直接复制需要的即可
- 注意需要将所有的代码装在一个div中
2. main中使用引入element-ui的模块
```js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'
// 引入ElementUI
import ElementUI from 'element-ui'
// 引入css
import 'element-ui/lib/theme-chalk/index.css'
// 使用ElementUI
Vue.use(ElementUI)
new Vue({
el:'#app',
router,
render:function(creater){
return creater(App)
}
})
```
3.路由匹配
常规的路由匹配而已 |
|
收藏
淘帖
踩
