这是我参与「第四届青训营」笔记创作活动的第7天

Soc:

html+css+js:视图

原来的前端只有视图三类，加上一个ajax用来交互

网络通信: axios，Vue推荐使用，也可以用jQuery里面的ajax但是前者更轻量

页面跳转：vue-router

状态管理:vuex

webpack：将 m->var

CSS特别笨重，如果每次想改样式都得全部改，所以就有了css预处理器，比如中秋节一个页面，端午节一个页面

M：模型 V：视图 C：控制器

View：JSP{{}}

DATA:

MVVM

VM：数据双向绑定

虚拟dom：利用内存

计算属性：Vue特色

vue支持MVVM和虚拟dom

传统的开发路线：后端为主导：MVC

vue的双向绑定：视图改变，数据也改变；数据改变，视图也改变，这里用v-model,在<input>,<textarea>,<select>等元素上使用

当出现这样的样式时，如果Login.vue样式是正确的，去上一级的App.vue,因为前者的<template>是在App.vue中展示的，再没用返回上一级的index.html

命名规则：小驼峰法（camel方法） 变量一般用小驼峰法标识。

　　第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，例如：myFirstName、myLastName

　　大驼峰法（Upper Camel Case） 也称为：帕斯卡命名法：（pascal方法） 常用于类名，函数名，属性，命名空间。

　　相比小驼峰法，大驼峰法把第一个单词的首字母也大写了。例如：public class DataBaseUser

Vue3 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

一个vue组件实例：

<div id="app">
//注册一个简单的全局组件 runoob，并使用它：
<abc></abc> 
</div> 

<script> 
// 创建一个Vue 应用 
       const app = Vue.createApp({}) 
// 定义一个名为 runoob的新全局组件      
       app.component('abc', { template: '<h1>自定义组件!</h1>' }) 
       app.mount('#app') </script>

对于Vue的学习，未完待续...

React基础 | 青训营笔记

传统的开发路线：后端为主导：MVC

Vue3 组件