vue之创建项目、定义并使用组件、elementui的使用、与后端交互

2022-05-03 15:00:28 阅读：141 来源： 互联网

标签：vue name elementui js --- axios 组件

昨日回顾
今日内容

昨日回顾

# 1 计算属性
		-computed--->把方法变成属性---》延缓计算
  	-在页面中直接使用函数，页面只要刷新，函数就会重新运行，使用计算属性--》只有当前函数使用的变量发生变化时，才重新运算
    
# 2 监听属性
		-watch:属性----》只要这个变量发生变化，就会执行方法
    
# 3 组件化开发
	-局部组件:写在组件内部：Vue.components
  -全局组件：Vue.component()
  -组件有自己的html，css，js，相互不影响
  -template 一定要放在一个标签中
  -data必须是函数data(){retrun {} }
  -各级组件的data数据是不共享的
  
  
# 4 组件间通信
	-通过自定义属性：父传子---》自定义的属性写在自定义的组件上---》props:['自定义属性名']
  -通过自定义事件：子传父---》子中调用this.$emit('自定义事件名',参数，参数)--》触发写在定义组件上的 @自定义事件名='函数'---》函数执行(父组件)
  -ref属性：
  	放在普通标签---》通过this.$refs.属性值---》原生dom
    放在组件上---》通过this.$refs.属性值---》当前组价对象---》拿到组件中的值，执行组件中的方法
    
# 5 动态组件
		-多个组件切换，通过动态组件的is来决定显示哪个组件
  	-keep-alive：组件切换的时候不销毁
    
# 6 插槽
		-<组件>写内容</组件>---》如果定义了插槽---》替换到插槽中
  	-具名插槽---》给插槽名名字---》使用的时候，指定替换哪个插槽的内容

今日内容

1 vue-cli创建项目

# 单文件组件-->一个文件,以 xx.vue 命名，就是一个组件
# vue-cli创建项目，webpack构建---》nodejs环境
	-nodejs是一门后端语言--》javascript解释型语言，只能运行在解释器中---》浏览器中集成了js的解释器---》javascript只能运行在浏览器中---》谷歌浏览器的v8引擎---》运行在操作系统之上---》os，网络通信的模块，文件处理---》nodejs的解释器
  -http://nodejs.cn/---》一路下一步---》cmd命令窗口下---》node命令(python)，npm命令(pip)
  -以往版本：https://nodejs.org/zh-cn/download/releases/
    
# 在nodejs的环境上装vue-cli：vue脚手架
	-npm install -g cnpm --registry=https://registry.npm.taobao.org
  -以后使用cnpm替换掉npm即可：下载速度快
	-cnpm install -g @vue/cli  # 速度慢，淘宝写了工具 cnpm，完全替换npm的功能，使用cnpm回去淘宝镜像站下载，速度快
 
# 创建项目---》git上拉取
	-方式一：命令行方式
		-vue create myfirstvue
  -方式二：图形化界面
  	-vue ui   # 会启动一个服务，用浏览器访问创建vue项目

# GUI ：图形化界面，  GUI编程---》图形化界面编程
# C#做win平台的图形化界面
# python写图形化界面：Tkinter
# pyqt: qt是个平台，可以使用c语言，使用python在平台写代码---》做图形化界面

2 vue项目目录介绍运行项目

#  运行项目方式一
	在项目路径下:npm run serve
    
# 使用pycharm运行
	-点击绿色箭头运行
# 目录介绍
	-myfirstvue   # 项目名字
  	-node_modules  # 放着当前项目所有的依赖，可以删除，删除项目运行不了了,npm install 把该项目的依赖再装上，把项目发给别人，提交到git上，文件夹要删掉
    -public   # 文件夹
    	-favicon.icon  # 小图标
      -index.html   # 单页面开发，整个项目就这一个页面，以后不要动
    -src     # 以后咱们都是在这里面写东西
    	-assets  # 放静态资源，图片，js，css
      -components  # 组件，xx.vue组件，小组件，给页面组件用
      	-HelloWorld  # 提供的默认组件，示例
      -router     # vue-router就会有这个文件夹
      	-index.js   # vue-router的js代码
      -store      # vuex 就会有这个文件夹
      	-index.js   # vuex 的js代码
      -views     # 组件，页面组件
      	-About
        -Home   # 默认提供了示例组件
      -App.vue   # 根组件
      -main.js   # 项目的入口于
	 -.gitignore   # git的忽略文件
   -babel.config.js  # babel配置
   -package.json  # 项目的所有依赖，类似于  requirements.txt,不要删，npm install根据这个文件下载第三方模块
  -vue.config.js  # vue的配置

3 es6语法之导入导出

# js 模块化开发--》模块，包的概念
# 写了一个包，在其他js中导入使用


# 导入
# import 起个名字 from '路径'
# import Vue from 'vue' # 起了个名字叫Vue，vue在node_modules中了，直接写名字即可
// 演示代码--》导入使用--》拿到的就是导出的对象
import settings from '../assets/js/settings'
console.log(settings.name)
console.log(settings.printName())
# 导出
# export default 对象

let name = 'lqz'
function printName() {
    console.log(name)
}
// 把对象导出
export default {name:name,printName:printName}


# 包的导出---》文件夹下新建index.js 
# 包导入的时候，导到文件夹这一层即可
import lqz from '../lqz'
console.log(lqz.name)

4 定义并使用组件

# 新建一个 xx.vue,内部包含三块
	-<template></template> # 写原来模板字符串``   html内容
  -<script>
    export default {
      data(){retrun {
        name:'lqz'
      }},
      methods:{},
    }
    </script>
 -<style scoped>   # scoped 样式只在当前组件中生效
	</style>
  
# 自定义组件
<template>
    <div>
        <h1>{{name}}</h1>
        <button @click="handleC">点我看美女</button>

    </div>
</template>

<script>
    export default {
        name: "Lqz",
        data(){
            return {
                name:"lqz is nb"
            }
        },
        methods:{
            handleC(){
                alert('美女')
            }
        }
    }
</script>

<style scoped>
h1 {
    background: pink;
    font-size: 60px;
    text-align: center;
}
</style>

5 集成bootstrap，jQuery，elementui

# bootstrap---》ui---》后期一般不用bootstap
	-第一步：下载
   -cnpm install bootstrap@3 -S  #  -S表示把当前模块加入到package.json文件中
   -cnpm install jquery

  -第二步在main.js中配置
  	// bootstrap的配置
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'
    
  -第三步:vue.config.js中
    const {defineConfig} = require('@vue/cli-service')
    const webpack = require("webpack");  # 这句要加
    module.exports = defineConfig({
        transpileDependencies: true,
        # 从这里开始复制
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    "window.$": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        },
        # 到这里结束
    })

5.2 elementui

# 专门给vue的ui库--》写ui尽量用它

第一步：下载
cnpm install element-ui -S
第二步：main.js 配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

6 与后端交互

第一步：安装
cnpm install axios -S
第二步：main.js 配置
import axios from 'axios'
Vue.prototype.$axios = axios;

第三步：使用
# 在任意组件中
# this.$axios   就是axios对象
this.$axios.get().then(res=>{})

第四步：如果没有第二步的配置
# 在任意组件中
import axios from 'axios'
axios.get('').then(res=>{})

# 后端起个flask项目，django(解决跨域)
# 写个电影的显示---》elemenui的样式做好看一些

标签：vue,name,elementui,js,---,axios,组件
来源： https://www.cnblogs.com/zonghan/p/16218397.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9