vue 3

目录

• 复习
• Vue项目需要自建服务器：node
• npm:包管理器 - 为node拓展功能的
• vue cli环境：脚手架 - 命令行快速创建项目
• 创建Vue项目
• 启动项目
• 项目目录
• 组件
• 在根组件中渲染页面组件
• 路由：router.js
  • 在根组件中设计转跳页面的导航栏
  • 创建三个页面组件
  • 配置路由
  • 前后台交互

复习

"""
v-if | v-show  "tag == 0"
	v-if | v-else-if | v-else
v-for="obj in objs"
<div :abc="obj">{{ obj }}</div>
computed：监听绑定函数中的所有变量，返回值给绑定的变量
watch：监听绑定的变量
let localTag = {  # => <local-tag>
	template: `只能有一个根标签`,
    data: funtion() {
        return {
        }
    },
    methods: {
    },...
}
new Vue({
    components: {
		localTag: localTag
    }
})
Vue.component('globalTag', {})
父传子
<子 :abc="msg"></子>
父 {
    data: {
		msg: '信息'
    }
}
子 {
	props: ['abc']
}
子传父
<子 @ooo="fn"></子>
父 {
    methods: {
        fn: function(a, b) {
        }
    }
}
子 {
	data: fn {
		a: 'aaa',
		b: 'bbb'
    },
    methods: {
    	// 子组件中触发 xyz
        xyz: function() {
        	// 触发ooo自定义事件
			this.$emit('ooo', a, b)
        }
    }
}
"""

Vue项目需要自建服务器：node

"""
1.用C++语言编写，用来运行JavaScript语言
2.node可以为前端项目提供server (包含了socket)
"""

npm:包管理器 - 为node拓展功能的

# 换国内源，加速下载
# 管理员命令行：npm install -g cnpm --registry=https://registry.npm.taobao.org
# MacOS: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
# 所有npm的指令都可以换成cnpm
# npm install vuex => cnpm install vuex

vue cli环境：脚手架 - 命令行快速创建项目

"""
cnpm install -g @vue/cli
如果报错：npm cache clean --force
"""

创建Vue项目

"""起步
1.cd 到目标目录
2.创建项目：vue create 目录名
"""
""" 创建项目的过程
提示下载原：选择淘宝镜像
具体配置：上下键切换，空格键选择，回车键进入下一步
1.第二个选项进入自定义配置
2.Babel jsES6语法转换ES5，Router路由   Vuex：组件数据交互，vue就一个页面，但有很多组件，组件之间有通信，它把一个页面里面丢了一个单例对象（在任何地方拿到它都是唯一的对象），对象可以点出来属性，那这个对象保存的值，在任何组件拿到的都是这个值，在一个组件改了值，在其他组件中去拿，就是你在那一个组件改的值，实现了跨组件信息交互   Formatter格式化代码，
3...有提示选择大写，没提示默认第一个即可
"""

启动项目

""" 终端启动
1.进入项目：cd到项目目录
2.启动项目：npm run serve
"""
""" pycharm配置
1.按照vue.js插件，重启
2.配置项目的npm启动项
"""

项目目录

"""
node_modules：依赖
public：共有资源
	ico：页面标签的logo
	html：单页面 - 整个项目的唯一页面
src：代码主体
...：项目、插件等相关配置
"""
""" src
assets：静态资源
components：小组件
views：视图组件
App.vue：根组件
main.js：主脚本文件
router.js：路由脚本文件 vue-router
store.js：仓库脚本文件 vuex
"""

组件

<template>
    <!-- 只能有一个根标签 -->
</template>
<script>
    export default {
        name: "Main",
        data: function() {
            return {
            }
        },
        ...
    }
</script>
<style scoped>
	/* scoped */
</style>

在根组件中渲染页面组件

<!-- Main.vue 主页组件 -->
<template>
    <div class="main">
        <h1>{{ title }}</h1>
    </div>
</template>
<script>
    export default {
        name: "Main",
        data: function () {
            return {
                title: '主页'
            }
        }
    }
</script>
<style scoped>
    .main {
        height: 100vh;
        background-color: orange;
    }
    h1 {
        margin: 0;
        color: red;
    }
</style>

<!-- App.vue根组件 -->
<template>
    <div id="app">
        <!-- 3.使用 -->
        <Main></Main>
    </div>
</template>
<script>
    // 1.导入
    import Main from '@/views/Main'
    export default {
        // 2.注册
        components: {
            Main: Main
        }
    }
</script>
<style>
    html, body {
        margin: 0;
    }
</style>

路由：router.js

在根组件中设计转跳页面的导航栏

创建三个页面组件

配置路由

前后台交互