前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 入门教程

Vue 入门教程

原创
作者头像
ruochen
发布2022-03-07 11:26:25
1.9K0
发布2022-03-07 11:26:25
举报
文章被收录于专栏:若尘的技术专栏

vue

  • 核心:MVVM(Model-View-ViewModel),实现数据的双向绑定,把编程的关注点放在数据上

入门

  • 引入 js 文件 ```html <script src="js/vue.js"></script> ```
  • 在 JS 代码区域,创建 Vue 核心对象,进行数据绑定 ```js new Vue({ el: "#app", data(){ return { username: "" } } }) ```
  • 编写视图 ```html <div id="app"> <input name="username" v-model="username"> {{username}} </div> ```
  • demo ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="username"> <!--插值表达式--> {{username}} </div>
代码语言:txt
复制
        <script src="js/vue.js"></script>
代码语言:txt
复制
        <script>
代码语言:txt
复制
            // 1. 创建 vue 核心对象
代码语言:txt
复制
            new Vue({
代码语言:txt
复制
                el: "#app",
代码语言:txt
复制
                data() {
代码语言:txt
复制
                    return {
代码语言:txt
复制
                        username: ""
代码语言:txt
复制
                    }
代码语言:txt
复制
                }
代码语言:txt
复制
                /* data: function (){
代码语言:txt
复制
                    return {
代码语言:txt
复制
                        username: ""
代码语言:txt
复制
                    }
代码语言:txt
复制
                }*/
代码语言:txt
复制
            });
代码语言:txt
复制
        </script>
代码语言:txt
复制
    </body>
代码语言:txt
复制
</html>
代码语言:txt
复制
```

常用指令

  • v-bind:为 HTML 标签绑定属性值,如设置 href,css 样式等 ```html <a v-bind:href="url">xxx</a> ``` ```html <!-- v-bind 可以省略 --> <a :href="url">xxx</a> ```
  • v-model:在表单元素上创建双向数据绑定 ```html <input name="username" v-model="username"> ```
  • v-on:为 HTML 标签绑定事件 - html ```html <input type="button" value="button" v-on:click="show()"> <input type="button" value="button" @click="show()"> ``` - vue ```js new Vue({ el: "#app", methods: { show() { alert("被点击"); } } }) ```
  • v-if、v-else、v-else-if:条件性的渲染某元素,判定为true时渲染,否则不渲染 ```html <div v-if="count == 1">div1</div> <div v-else-if="count == 2">div2</div> <div v-else="count == 3">div3</div> <div v-show="count == 1">div v-show</div> ```
  • v-show:根据条件展示某元素,区别在于切换的是 display 属性的值
  • v-for:列表渲染,遍历容器的元素或者对象的属性 - v-for```html <div v-for="addr in addrs"> {{addr}}<br> </div> ``` - 加索引 ```html <div v-for="(addr,i) in addrs"> <!-- i表示索引,从0开始 --> {{i+1}}:{{addr}}<br> </div> ```生命周期| 状态 | 阶段周期 | | - | - | | beforeCreate | 创建前 | | created | 创建后 | | beforeMount | 载入前 | | mounted | 挂载完成 | | beforeUpdate | 更新前 | | updated | 更新后 | | beforeDestory | 销毁前 | | destroyed | 销毁后 |
  • mounted:挂载完成,Vue 初始化成功,HTML 页面渲染成功 - 发送异步请求,加载数据 - eg: ```js new Vue({ el: "#app", mounted(){ alert("vue 挂载完毕,发送异步请求 "); } }) ```

业务 - 使用 Vue 简化查询

  • brand.java 添加 ```java // 逻辑视图 public String getStatusStr() { if (this.status == null) { return null; } if (this.status == 1) { return "启用"; } return "禁用"; } ```
  • brand-vue.html ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <a href="addBrand.html"><input type="button" value="新增"></a><br> <hr> <table id="brandTable" border="1" cellspacing="0" width="100%"> <tr> <th>序号</th> <th>品牌名称</th> <th>企业名称</th> <th>排序</th> <th>品牌介绍</th> <th>状态</th> <th>操作</th> </tr>
代码语言:txt
复制
                <!--
代码语言:txt
复制
                    使用 v-for 遍历 tr
代码语言:txt
复制
                -->
代码语言:txt
复制
                <tr v-for="(brand,i) in brands" align="center">
代码语言:txt
复制
                    <td>{{i + 1}}}</td>
代码语言:txt
复制
                    <td>{{brand.brandName}}</td>
代码语言:txt
复制
                    <td>{{brand.companyName}}</td>
代码语言:txt
复制
                    <td>{{brand.ordered}}</td>
代码语言:txt
复制
                    <td>{{brand.description}}</td>
代码语言:txt
复制
                    <td>{{brand.statusStr}}</td>
代码语言:txt
复制
                    <td><a href="#">修改</a> <a href="#">删除</a></td>
代码语言:txt
复制
                </tr>
代码语言:txt
复制
            </table>
代码语言:txt
复制
        </div>
代码语言:txt
复制
        <script src="js/axios-0.18.0.js"></script>
代码语言:txt
复制
        <script src="js/vue.js"></script>
代码语言:txt
复制
        <script>
代码语言:txt
复制
            new Vue({
代码语言:txt
复制
                el: "#app",
代码语言:txt
复制
                data() {
代码语言:txt
复制
                    return {
代码语言:txt
复制
                        brands: []
代码语言:txt
复制
                    }
代码语言:txt
复制
                },
代码语言:txt
复制
                mounted() {
代码语言:txt
复制
                    // 页面加载完成后,发送异步请求,查询数据
代码语言:txt
复制
                    var _this = this;  // _this 作用域为 vue
代码语言:txt
复制
                    axios({
代码语言:txt
复制
                        method: "get",
代码语言:txt
复制
                        url: "http://localhost:8080/brand-demo/ajaxSelectAllServlet"
代码语言:txt
复制
                    }).then(function (resp) {
代码语言:txt
复制
                        // 这里 this 作用域为 window
代码语言:txt
复制
                        _this.brands = resp.data;
代码语言:txt
复制
                    })
代码语言:txt
复制
                }
代码语言:txt
复制
            })
代码语言:txt
复制
        </script>
代码语言:txt
复制
    </body>
代码语言:txt
复制
</html>
代码语言:txt
复制
```
  • 测试
    业务 - vue 实现新增

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue
    • 入门
      • 常用指令
        • 业务 - 使用 Vue 简化查询
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档