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

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

<!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核心对象，进行数据绑定

new Vue({

    el: "#app",

    data() {

        return {

            name: ""

        }

    }

});

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

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

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

<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页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

小案例

列表查询

<!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>

　　

vue 基础学习 一的更多相关文章

  1. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  2. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  3. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  6. Vue 基础学习总结

    介绍 Vue.js 中文文档地址:https://cn.vuejs.org/guide/introduction.html#what-is-vue Vue.js 是什么 Vue (读音 /vjuː/, ...

  7. vue基础学习（二）

    02-01  vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...

  8. vue基础学习（一）

    01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...

  9. 【转】vue基础学习

    1.基本绑定:    new Vue(        {            el:'#elID',            data:{                // data obj     ...

  10. vue基础学习（三）

    03-01  vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...

随机推荐

  1. HarmonyOS 高级特性

    引言 本章将探讨 HarmonyOS 的高级特性,包括分布式能力.安全机制和性能优化.这些特性可以帮助你构建更强大.更安全.更高效的应用. 目录 HarmonyOS 的分布式能力 HarmonyOS ...

  2. AtCoder F - Parenthesis Checking

    原题链接:AtCoder F - Parenthesis Checking 一个全由\('('\)和\(')'\)构成的字符串,由以下两个操作: 1 l r交换字符串第\(l\)个和第\(r\)个字符 ...

  3. 🔥🔥Java开发者的Python快速进修指南：自定义模块及常用模块

    好的,按照我们平常的惯例,我先来讲一下今天这节课的内容,以及Java和Python在某些方面的相似之处.Python使用import语句来导入包,而Java也是如此.然而,两者之间的区别在于Pytho ...

  4. 跨境 ERP 积加系统与金蝶云星空系统数据集成对接方案

    方案简介 由于积加ERP 系统专注服务于亚马逊跨境电商是非常复杂和庞大的应用系统,具有非常丰富的业务流程.复杂的系统架构和服务接口.主要涉及系统解决店铺运营,店铺管理,供应链管理,协同智能补货.采用& ...

  5. Miller_Rabin 学习笔记

    费马小定理:对于任意一个质数满足:\(a^{p-1}\equiv1\pmod p\) 二次探测:对于任意一个奇质数满足:\(x^2\equiv1\pmod p\) 的解为 \(x=1\) 或 \(x= ...

  6. 开源 Serverless 框架 Laf 性能优化实践

    介绍 Laf 是一个完全开源的 Serverless 框架,Laf 的 Node.js 运行时容器 (以下简称为 Runtime) 是 Laf 的函数执行环境,依托于 Express.js 框架.采用 ...

  7. Mybatis-Flex之基础搭建

    1.是什么? MyBatis-Flex 是一个优雅的 MyBatis 增强框架,它非常轻量.同时拥有极高的性能与灵活性.我们可以轻松的使用 Mybaits-Flex 链接任何数据库,其内置的Query ...

  8. 从滑动窗口到YOLO、Transformer：目标检测的技术革新

    本文全面回顾了目标检测技术的演进历程,从早期的滑动窗口和特征提取方法到深度学习的兴起,再到YOLO系列和Transformer的创新应用.通过对各阶段技术的深入分析,展现了计算机视觉领域的发展趋势和未 ...

  9. 文心一言 VS 讯飞星火 VS chatgpt （163）-- 算法导论13.1 3题

    三.用go语言,定义一棵松弛红黑树(relaxed red-black tree)为满足红黑性质 1.3.4 和5的二叉搜索树.换句话说,根结点可以是红色或是黑色.考虑一棵根结点为红色的松弛红黑树 T ...

  10. 传统GIS与数字孪生结合带来的改变

    传统的地理信息系统(GIS)在地理数据的收集.存储和分析方面发挥着重要作用,而数字孪生技术则通过虚拟模型的构建与真实世界进行交互和模拟.将传统GIS与数字孪生技术相结合,不仅增强了地理数据的可视化和分 ...