1，测试开发：
- 一定不仅是测试
- 非常敏锐的开发视角
- 及其强大的开发能力
- 一定不是开发
2，测试工具- 不需要严谨的校验
- 不需要完美的用户体验
- 测试平台是工具不是产品
- 效率第一
- 一般两周之内
- 至少实现基本功能
- 不需要花里胡哨的功能
- 无序严谨的校验
- 能用轮子的尽量用轮子
- 能少写的代码，就少写代码
- 效率第一
3，测试开发的理念，价值
- 能看懂大神的代码，也能从中获取启发
- 能改大神的代码，去除糟粕，去取精华
4，编程思维重于一切
- 轮子
- 敏捷开发的思维
前端主流框架
- Angular.js
- React.js
- Vue.js
Vue
特点
- 使用gzip压缩之后，只有20kb
- 入门容易 （中国人开发文档清晰）
自动响应式更新
- 只需要关注前端业务，不需要操作DOM元素
高级特性
- 解耦视图与数据
- 可复用组件
- 前端路由
- 虚拟DOM
MVVM模式
模式.png
- M
- 模型
- 从后端获取数据
- v
- 视图
- 界面展示
- VM
- 视图模型
- 核心控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习1</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<!-- 控制的区域，是MVVM中的V视图 -->
<div class="box" id = "app">
{{msg}}
</div>
<script>
// vm实例，会控制id 为app元素中的所有内容
// vue 的实例就是MMVM中的VM控制器
let vm = new Vue({
// 需要控制的位置
el:'#app',
// 代码数据，mvvM中的M
data:{
msg:'Hello Vue学习页面1'
}
})
</script>
</body>
</html>
组件化
- 模块化 ： 以不同的组件，来划分不同的功能模块
- 复用：
- 高效：
- 解耦
组件化可以让我们的代码低耦合，我们不用像传统开发一样把所有的东西都揉在一起，从而极大的提高了我们的开发效率。同时我们避免了重复造轮子，提高了我们的代码质量，降低了维护的成本
安装vue
安装vue_cli脚手架
- npm - install -g @vue/cli
创建项目
-
vue create vue 项目名
image.png
i
-
使用gitbash创建命令
winpth vue.cmd create 项目名
使用
- 启动
npm run serive 或者cnpm run serive(淘宝的镜像源)
image.png
项目包
- node_model 存放需要的带三方的库
- public 存放不需要打包的文件
- src 存在需要打包优化的文件
- assert 存放静态文件
- components 存放组件
- app.vue 以vue结尾的是组件，app.vue是根组件
// template展示给用户看，想当于MVVM中的V
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 在父组件中给子组件传值 -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// 导入子组件
import HelloWorld from './components/HelloWorld.vue'
export default {
// 定义组件名称
name: 'app',
components: { //声名子组件
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- mian.js 是入口
>
mian,js.png
image.png
首个VUE界面
- geeeting.vue
<!-- 展示给用户看得 -->
<template>
<div>
<!-- 插值表达式 -->
<p>{{message}}</p>
</div>
</template>
<script>
// 数据
export default {
name : 'geeting',
data(){
return {
message:'hello Vue学习菜鸟'
}
}
}
</script>
// 样式
<style scoped>
p{
color : red;
}
</style>
- app.vue
// template展示给用户看，想当于MVVM中的V
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!-- 在父组件中给子组件传值 -->
<HelloWorld msg="学习VUE"/>
<greeting/>
</div>
</template>
<script>
// 导入子组件
import HelloWorld from './components/HelloWorld.vue'
import greeting from './components/greeting.vue'
export default {
// 定义组件名称
name: 'app',
components: { //声名子组件
HelloWorld,
greeting
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
网友评论