vue 基础学习 一

 1. vue 使用快速入门三步走

(1) 新建 HTML 页面，引入 Vue.js文件

1 2 3 4 5 6 7

"UTF-8">

(2) 在JS代码区域，创建Vue核心对象，进行数据绑定

1 2 3 4 5 6 7 8

new Vue({     el: "#app",     data() {         return {             name: ""         }     } });

创建 Vue 对象时，传递一个 js 对象，该对象中需要如下属性：

• el ： 用来指定哪些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
• data ：用来定义数据模型
• methods ：用来定义函数。这个我们在后面就会用到

(3) 编写视图，绑定数据和方法

1 2 3 4

"app">    {{ message }}   "greet">Greet

2. vue 常见指令及作用　　

常用的指令有

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

3. vue 生命周期　

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

这些钩子方法重点关注 mounted,也最常使用。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

小案例

列表查询

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83

"en">     "UTF-8">      欢迎你 "button" value="新增" id="add"> "app">           "1" cellspacing="0" width="1200">                                                                                                                                         for="(brand,i) in brands" align="center">                                                                                                                                                                                                     序号 品牌名称 企业名称 排序 品牌介绍 状态 操作 {{i + 1}} {{brand.brandName}} {{brand.companyName}} {{brand.ordered}} {{brand.description}} {{brand.status == 1 ? "启用" : "禁用"}}                 "#">修改                 "#">删除

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！