本文章出自【码同学软件测试】
码同学公众号：自动化软件测试，领取资料可加：Matongxue_8
码同学抖音号：小码哥聊软件测试
作为一名测试开发，平常主要工作就是做一些测试平台的开发。
开发一个web平台，需要非常熟悉前后端的相关技术。后端的话，像是Java、Python都可以。前端主要是HTML和js，HTML比较简单，js通常需要使用一些框架，比如早期的jQuery。近些年，另外一个js框架越来越火，那就是大名鼎鼎的vue，那什么是vue呢？
学习vue前提是了解 HTML、CSS 和 JavaScript基础知识
引入vue最直接方式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对应新手不推荐使用新手直接使用vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时
Vue的特点
1）遵循 MVVM 模式
2）编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3）它本身只关注 UI, 可以轻松引入 vue 插件或其它第三方库开发项目
这是element-ui组件库，提供了很多前端组件
而这些组件学习的前提是vue
直接上干货，例子学习
（1）创建vue.html，放入以下内容
浏览器运行vue.html 看到效果
Hello Vue!
免费领取码同学软件测试课程笔记+超多学习资料+完整视频+面试题，可加微信：Matongxue_8
免费领取码同学软件测试课程笔记+超多学习资料+完整视频+面试题，可加微信：Matongxue_8
说明：
Vue 对象 el 绑定了
div 可以通过{{ message }} 使用vue的data对象
如果具备一些前端知识可以发现 现在我们不再和JavaScript和 HTML 直接交互了。一个 Vue 应用会将html元素挂载到一个 DOM 元素上 ,例如div 元素和vue绑定，操作页面元素只需要操作vue对象即可。
为了加深印象，我们可以看例子二
（2）创建vue2.html
浏览器打开运行结果
- 学习 JavaScript
- 学习 Vue
- 整个牛项目
data里面元素 todos 是个数组，为了动态渲染数组 vue提供了 v-for指令可以绑定数组的数据来渲染，就出现了上面效果
类似相关的标签还有v-if 等很多，例如
vue3.html
显示效果
Hello, Vue.js!
Yes!
Age: 28
（3）vue为了处理页面交互，可以增加自定义method方法
创建vue4.html
这个例子会在你点击Greet 按钮时候触发greet 方法，当你点击Hi按钮时候可以触发say方法，并且有参数传递。
以上只是vue语法基本使用，如果想更详细学习vue可以关注码同学的java测开课程，课上会手把手教大家使用当前最流行Vue+Springboot，开发一个测试平台。
END
免费领取码同学软件测试课程笔记+超多学习资料+学习完整视频 ☞ 可加：Matongxue_8／关注码同学公众号
本文著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。