框架课学习笔记--复习篇

现在spring boot 框架课完成前端游戏界面，后端登录注册页面。现在复习vue，巩固学到的知识，反复的看
git的两个作用，一 可以看到历史版本代码。存档的功能。二 同步代码 同步不同机器上的代码。
acgit 与 本地是通过ssh通信的。使用密钥操作
转到想要的文件夹，git init 初始化。

总结以下刚才的历程-复习vue，然后想要创建项目，保存到AC git上。重新复习学习git 连结网上仓库，但是失败了。
linux框架课有专门的git模块，主要的四个命令（status，add，commit，push），spring boot 框架课讲创建项目，git的应用。
现在开启项目，都要学习git，进行存档。
怎么将本地项目传到云端。自己是本地仓库推送到远程仓库出错。
error: remote origin already exists. 远程源已经存在，说明刚刚project仓库还有关联。删除关联，建立new project关联
进行git push操作时报错：fatal: The current branch master has no upstream branch. 没有与远程仓库进行关联，重新关联即可
变成自己的理解，现在已经可以自己创建项目并且git到云端了。

上传到云端最关键的一步 git remote add origin git@git.acwing.com:anbanyv/project.git

vuex 将所有的js打包到一起。
引入bootstrap 的脚本与样式

学习算法，，科学主义，理论证明。工程课 实用主义。

专门的学习vue。设置一个myspace网页框架。

实现这六个页面
每个vue组件 都会导出一个对象。导出的对象会用到两个属性。第一个属性是name，暂时用不到，第二个属性是components，在template中会用到的组件，放到components中

引入bootstrap，记得引入脚本和样式。
写好单个的navbar vue。在script中，export default，导出去

<script>
export default {
    // name:navbar,
    name:"NavBar",
}
</script>

container 在bootstrap定义好的。响应式调整内容区域大小
**VS Code代码自动对齐。快捷键 shift+alt+f **

前端实现网页跳转。刷新页面表示，从服务器重新请求数据。
**vscode 实现多个同时选中。alt + click 其他地方 **

<router-link class="nav-link" :to="{name:'home'}">首页</router-link>

前端渲染
用户页面展示内容

• 用户信息
• 用户的发帖信息，历史记录
• 用户发帖界面
  bootstrap的 grid 完成页面布局。
  div.row>(div.col-3+div.col-9) 按tab，快速补全
  实现交互，设计函数。setup

// 一个属性的函数可以简写如下
  // setup: ()=> {

  // }
  setup() {
// 定义变量。 ref 速度慢，可以重新定值。reactive 速度快，不可以重新赋值
    // reactive 只能接收对象。ref可以接受普通的变量类型， .value重新赋值
    const user = reactive({
      id: 1,
      username: "xianyv",
      lastname: "Zhang",
      firstname: "Jvyao",
      followerCount: 0,
      is_followed: false,
    });

    return {
      user,
    }
  }

vue在不同的组件之间传递信息，类似于 react。
父组件向子组件传递信息，通过props 属性。子组件向父组件传递信息，通过调用函数的方式（event）

// props存储父组件传递过来的数据
<!-- 给组件绑定属性，传递信息。v-bing: 缩写":" 。然后在子组件接受-->
<UserProfileInfoVue v-bind:user="user"></UserProfileInfoVue>

  setup(props) {
    // 定义变量。computed实现自动计算。
    let fullName = computed(()=>props.user.lastname+' '+props.user.firstname);
    console.log(fullName);
    return {
        fullName,
    }
  }

template 部分

• 。存放父组件传过来的children
• v-on:click或@click属性：绑定事件
• v-if、v-else、v-else-if属性：判断
• v-for属性：循环，:key循环的每个元素需要有唯一的key
• v-bind:或:：绑定属性

子组件向父组件传递信息，通过绑定事件的方法

ref定义变量，可以用.value属性重新赋值
reactive定义对象，不可重新赋值
props存储父组件传递过来的数据
context.emit()：触发父组件绑定的函数

双大括号 ，模板语法。在显示的时候进行变量替换，显示内容。 {{ username }}

存储父组件传递的对象。进行显示。

发帖分析，获取text area信息。

<!-- text area的内容 与content内容进行绑定。 -->
        <textarea v-model="content" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
        <button type="button" class="btn btn-primary btn-sm">发帖</button>
绑定的内容      
{{ content }}

发帖功能的实现。子组件write 有发帖按钮，点击发帖按钮，触发post_a_post 按钮。post_a_post函数，触发父组件的post-post事件。父组件的函数会更新posts。posts是一个reactive类型的变量，会自动修改引用这个变量的组件。然后会更新post，发帖区的内容
** @ v-on 绑定函数，绑定事件。冒号 v-bind 绑定属性，联系script 里面设置的变量。**