angulardemo1-8代码大概内容记录

angular 学习

• 1.首先安装好node，可以使用node -v查看版本，cnpm install -g @angular/cli安装脚手架。
• 2.进入终端，使用命令 ng new 项目名称，创建项目。
• 3.使用ng serve --port 8080 --open将项目在浏览器中打开

angulardemo01

• 演示如何创建一个angular项目
• 创建news和home组件，放到app组件，创建header组件，放到news组件。
• 定义变量，在模板中输出。{{变量名}}
• 组件使用前需要在app.modules.ts中声明

angulardemo02

• 指令：ngIf,ngFor,ngSwitch,ngClass,ngStyle
• 事件：(click),(keydown),(keyup),(change)
• 表单绑定数据，[(ngModel)]绑定input,select,radio，
• [title],[innerHTML]
• storageService存储的使用

angulardemo03

• 获取前端元素，并且添加样式（@ViewChild()）
• dom操作放在ngAfterViewInit,这时候dom加载完成。
• 调用子组件中的方法，(把子组件引入节点获取，当作一个dom节点)

angulardemo04

• 子组件得到父组件的传值。 @Input() 声明
• 子组件得到父组件传的方法。
• 声明周期函数（ngOnInit,changeMsg,ngAfterViewInit,ngAfterChecked,ngDocheck,ngAfterContentChecked,ngAfterContentInit,ngDestroy）
• 父组件得到子组件的传值，类似父组件调用子组件方法。

angulardemo05

• 请求数据方法。
• 同步方法，callback异步方法，promise异步方法，rxjs异步方法。rxjs多次执行。map。（不咋懂）

angulardemo06

• 发送请求到服务器，
• HttpClient,HttpHeaders
• axios，promise封装。

angulardemo07

• 路由配置 [routerLink]跳转
• get方式传参[queryParams]，写在页面。
• 动态路由（写在函数中）

angulardemo08

• 自路由设置
• 默认路由设置

vue学习

• 安装vue脚手架

  • cnpm i -g vue-cli

• 创建项目

  • vue init webpack vue-demo
  • 安装时，除了路由，其他选项都选择no，最后，再进入项目，使用cnpm install安装需要的包。

• 启动项目

  • npm run dev

• 项目打包

  • 先配置好webpack.config.js
  • 在项目根目录下输入 webpack即可生成一个dist文件夹。

• 使用bootstrap3

  • 引入jquery，在项目下输入 npm install jquery --save-dev