5-vue-cli创建vue项目 

# 1 计算属性
    computed：写函数，函数名就可以当变量使用
    以后页面再刷新，只有该函数内部使用值变化，函数才重新运算
# 组件
    -局部和全局
    -以后每一个组件就是一个 xx.vue
        -自己的html，css，js
# 组件间通信
    -自定义属性：父传子
    -自定义事件：子传父
        this.$emit(事件名,参数)
    -ref属性：
        -普通标签
        -放在组件上
            this.$refs.名字  # 组件对象
            
# 动态组件
     <keep-alive>
        <component :is="who"></component>
    </keep-alive>

 

1 插槽

# 在定义组件是，预留一个地方使用标签 <slot></slot> 占位
# 以后在父组件中的子组件的标签内部写  内容，html内容  就会被替换到<slot></slot>中

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div class="app">
​
    <child>
        <div><a href="http://www.baidu.com">点我看美女</a></div>
    </child>
​
​
</div>
​
</body>
<script>
    Vue.component('child',{
        template:`<div>
            <button>后退</button>
            <slot></slot>
            <button>前进</button>
        </div>`,
        data(){
            return {
​
            }
        }
    })
    var vm = new Vue({
        el: '.app',
        data: {
​
        },
​
    })
</script>
</html>

1.1具名插槽

# 一个不带 name 的 <slot> 出口会带有隐含的名字“default”,我们可以根据需求给插槽取个名字
 <slot name="Header"></slot>
    
<div slot="Header">
<a href="https://www.baidu.com">点我看帅哥</a>
 </div>
​
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<div id="app">
    <children>
         <div slot="End">
            高清无码
        </div>
​
        <div><button @click="handclick">点我要你好看</button></div>
​
        <div slot="Header">
            <a href="https://www.baidu.com">点我看帅哥</a>
​
        </div>
    </children>
​
​
</div>
<body>
​
<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{
            handclick(){
                alert('123')
            }
        },
        components:{
            'children':{
                template:`<div>
                              <slot name="Header"></slot>
                              <button>前进</button>
                              {{name}}
                              <slot></slot>
                              <button>后退</button>
                              <slot name="End"></slot>
                          </div>`,
                data(){
                    return {
                        name:'致命诱惑'
                    }
                }
            }}
    })
</script>
​
</body>
</html>

 

2 vue-cli创建vue项目

# 创建vue项目，需要使用vue-cli ，vue脚手架：程序项目的骨架，只需要在固定位置写代码即可
# vue-cli需要基于nodejs，安装
# python                             node
  python 解释器   pip安装模块          node命令（解释器）  npm安装第三方模块
    
    
# node是一个后端语言：解释型---》解释器
# 浏览器中有js的解释器
# Chrome V8 引擎 + 底层库(c:网络操作，文件操作，数据库操作。。。)
​
​
​
######## vue-cli环境搭建
# node下载地址，一路下一步
https://nodejs.org/zh-cn/download/
# 安装完成，会自动加入环境变量，释放两个可执行文件  node npm
npm命令安装模块，可能会很慢，就想pip install 很慢（国外），pip换源
npm换源：阿里写了一个npm命令替换的命令  cnpm
​
# 安装vue-cli
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架：以后使用cnpm替换npm即可
cnpm install -g @vue/cli
- 清空缓存处理
npm cache clean --force
​
​
# 使用vue-cli创建vue项目
    -方式一:命令行
        -vue create myfirstvue
        -看下图

 

 

 

 

 

 


    -方式二：图形化界面
        -vue ui  # 启动了一个服务，使用浏览器就能范围这个服务，在浏览器中创建项目
    

 

3 vue项目目录结构

# 使用编辑器打开----》pycharm
# 使用vue-cli创建的项目其实是从远程（git）拉下一个空项目
​
# 目录结构
myfirstvue     # 项目名字
    node_modules # 该项目的依赖包，类似于python venv文件夹，可以删掉（再安装），把项目给别人时，这个要删掉，小文件太多，copy特别慢，
    public  # 文件夹，不要改
        -favicon.ico # 小图标，网站图片
        -index.html  # 以后不会动，单页面开发的html页面
    src     # 以后你写代码的地方
        -assets  # 静态资源，图片，js，css，都放在这
        -components # 组件，以后写的非页面组件，放在这
            -HelloWorld.vue  # 官方提供的一个组件
        router   # 第三方模块路由，就会创建出一个文件夹，index.js
            -index.js
        store    # 第三方模块vuex ，就会有
            -index.js 
        views # 页面组件
            -About.vue   # 页面组件
           -Home.vue
        App.vue     # 跟组件，基本不动
        main.js     # 整个项目的入口
    .gitignore      # 忽略：git的忽略文件
    babel.config.js # 高版本语法转换
    package.json    # 存放使用的第三方模块的文件，不要删除
    package-lock.json
    README.md       # 关于项目的介绍

 

4 vue项目的启动与停止

# 方式一，在项目路径下     使用node起了一个web服务，监听8080端口，开发阶段这么用
    -npm run serve
    -访问：http://192.168.12.34:8080/
    -ctrl+c 停止
    
# 方式二：使用编辑器
    配置npm后，点击绿色箭头启动

 

5 es6之导入导出语法

# 以后再写组件，如何写
    - 创建一个 xx.vue
    -创建完有三部分
        -<template>写原来用反引号引起来的 html</template>
        -<script>写js的代码</script>
         export default {
            name: "Login",
            data(){
                return {}
            },
             methods:{}
        }
        -<style>写css的类</style>
        
# Login.vue
​
<template>
<div>
  <p>用户名：<input type="text" v-model="username"></p>
  <p>密码：<input type="password" v-model="password"></p>
  <button @click="handclick">提交</button>
​
</div>
</template>
​
<script>
export default {
  name: "Login",
  data(){
    return {
      username:'',
      password:''
    }
  },
  methods:{
    handclick(){
      alert(this.username+this.password)
    }
  }
}
</script>
​
<style scoped>
​
</style>
        
 # 导入导出语法
    -导出语法
        export default {'showName': showName, 'name': name}
     -导入：
        import Lqz from '../lqz'   // Lqz代指的就是导出的对象，以后使用Lqz. 调用即可
        
     -文件夹下如果有index.js   导入的时候，就不需要写 index.js,导到包这一层就可以了
    
    
 # 页面组件中使用子组件
    -编写一个xx.vue ,写好html，css，js
    -在要使用的地方，导入，注册
    import Header from "../components/Header";
    components:{
            Header
        }
    -在templates标签中之间根据名字使用即可
    
# 子组件（Header.vue）    
<template>
<div>
  <button @click="forward">前进</button>
  {{title}}
  <button>后退</button>
</div>
</template>
​
<script>
export default {
  name: "Header",
  data(){
    return {
      title:'致命诱惑'
    }
  },
  methods:{
    forward(){
      alert('我前进了')
    }
  }
}
</script>
​
​
<style scoped>
​
</style>
    
# 页面组件    
<template>
<div>
  <child></child>
  <p>用户名：<input type="text" v-model="username"></p>
  <p>密码：<input type="password" v-model="password"></p>
  <button @click="handclick">提交</button>
​
</div>
</template>
​
<script>
import cc from '../lhs'
import Header from "../components/Header";
export default {
  name: "Login",
  data(){
    return {
      username:'',
      password:''
    }
  },
  methods:{
    handclick(){
      cc.getName()
      alert(cc.name)
    }
  },
  components:{
    'child': Header
​
  }
}
</script>
​
<style scoped>
​
</style>
​

 

6 vue项目中axios的使用

# 步骤
    -安装  cnpm install -S axios
    -在组件中导入
      import ajax from 'axios'
    -使用
      created() {
            ajax.get('http://127.0.0.1:5000/').then(res => {
                console.log(res.data)
            })
        },

 

7 vue项目中element-ui的使用

# 步骤
    -安装 npm i element-ui -S  # -S表示只在当前项目有效
    
    -配置main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    -在组件中使用
        复制好看的代码过来即可
        

 

posted @ 2022-02-15 20:59  一叶松  阅读(12)  评论(0)  编辑  收藏  举报