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. VMPFC可以融合既有的片段信息来模拟出将来的情感场景

    Ventromedial prefrontal cortex supports affective future simulation by integrating distributed knowl ...

  2. 文心一言 VS 讯飞星火 VS chatgpt （134）-- 算法导论11.2 6题

    六.用go语言,假设将n 个关键字存储到一个大小为 m 且通过链接法解决冲突的散列表中,同时已知每条链的长度,包括其中最长链的长度 L,请描述从散列表的所有关键字中均匀随机地选择某一元素并在 O(L· ...

  3. 使用Jenkins构建镜像：将应用打包成镜像

    学习某册子的CICD,记录使用Jenkins构建镜像的过程. 使用Jenkins集成Git来构建Docker镜像,为后面的部署准备镜像资源. 1. 安装Nodejs环境 如果想要安装Node环境,有以 ...

  4. 赛意SMOM和金蝶云星空单据接口对接

    赛意SMOM和金蝶云星空单据接口对接 数据源系统:金蝶云星空 金蝶K/3Cloud在总结百万家客户管理最佳实践的基础上,提供了标准的管理模式:通过标准的业务架构:多会计准则.多币别.多地点.多组织.多 ...

  5. 一行代码解决IE停用后无法继续使用IE弹窗功能的问题

    微软在2023年2月14日通过Edge浏览器更新,彻底封死IE.Windows Update中没有记录.开始菜单中的IE以及桌面IE图标双击自动打开Edge,默认程序设置了IE也没有任何效果,仅能通过 ...

  6. 如何将IPv4升级到IPv6？看完你就明白了

    引言: 随着互联网的快速发展,IPv4(Internet Protocol version 4)已经无法满足日益增长的设备和用户数量的需求. IPv6(Internet Protocol versio ...

  7. Vs code创建项目教程

    1.首先,vscode本身没有新建项目的选项,所以要先创建一个空的文件夹. 2.然后打开vscode,再在vscode里面打开文件夹,这样才可以创建项目. 3.选择一个空文件夹. 4.Ctrl+shi ...

  8. 51Nod - 1086 多重背包

    有N种物品,每种物品的数量为C1,C2......Cn.从中任选若干件放在容量为W的背包里,每种物品的体积为W1,W2......Wn(Wi为整数),与之相对应的价值为P1,P2......Pn(Pi ...

  9. 一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器

    前言 经常看到有小伙伴在技术群里问有没有什么好用且快速的开发框架推荐的,今天就给大家分享一款基于MIT License协议开源.免费的.NET Core快速开发框架.支持多种前端UI.内置代码生成器. ...

  10. C++ Qt开发：SqlRelationalTable关联表组件

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍SqlRela ...