1. vue 使用快速入门三步走
(1) 新建 HTML 页面,引入 Vue.js文件
1 2 3 4 5 6 7 | <!DOCTYPE html> <html> <head> <meta charset= "UTF-8" > <title>Vue.js 入门示例</title> <script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script> </head> |
(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 | <div id= "app" > <p>{{ message }}</p> <button v-on:click= "greet" >Greet</button> </div> |
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 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <!-- 页面标题 --> <h1>欢迎你</h1> <!-- 新增按钮 --> <input type= "button" value= "新增" id= "add" ><br> <hr> <!-- Vue.js应用 --> <div id= "app" > <!-- 数据表格 --> <table border= "1" cellspacing= "0" width= "1200" > <!-- 表头 --> <tr> <th>序号</th> <th>品牌名称</th> <th>企业名称</th> <th>排序</th> <th>品牌介绍</th> <th>状态</th> <th>操作</th> </tr> <!-- 利用v- for 指令循环渲染品牌数据 --> <tr v- for = "(brand,i) in brands" align= "center" > <!-- 序号 --> <td>{{i + 1}}</td> <!-- 品牌名称 --> <td>{{brand.brandName}}</td> <!-- 企业名称 --> <td>{{brand.companyName}}</td> <!-- 排序 --> <td>{{brand.ordered}}</td> <!-- 品牌介绍 --> <td>{{brand.description}}</td> <!-- 状态 --> <td>{{brand.status == 1 ? "启用" : "禁用" }}</td> <!-- 操作 --> <td> <a href= "#" >修改</a> <a href= "#" >删除</a> </td> </tr> </table> </div> <!-- 引入Vue.js库 --> <script src= "js/vue.js" ></script> <!-- 引入Axios库 --> <script src= "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" ></script> <script> new Vue({ // Vue实例挂载到id为"app"的元素上 el: "#app" , data() { return { // 品牌数据列表 brands: [] } }, // 在Vue实例挂载后执行的代码 mounted() { var _this = this ; // 发起GET请求获取数据 axios({ method: "get" , url: "http://localhost:8080/brand_demo/selectAllServlet" }).then( function (resp) { // 将获取的数据赋值给brands数组 _this.brands = resp.data; }) } }) </script> </body> </html> |
最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:
这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!