目录
复习
"""
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>