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. 如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法,所以大概会讲述下面这些点: Q1:我为什么会想使用 vuex 来管理数据状态交互? Q2:使用 vuex 框架有哪些缺点或者说副作用? Q3: ...

  2. 6款AI工具网站，赶紧收藏，以备不时之需

    1.海鲸AI-支持AI对话.AI文档解析.AI绘画 海鲸AI-基于新一代人工智能技术,只需输入问题,即可得到智能回答 https://​www.weijiwangluo.com/talk/ 海鲸AI是 ...

  3. .NET周刊【11月第4期 2023-11-26】

    国内文章 万字长文:从 C# 入门学会 RabbitMQ 消息队列编程 https://www.cnblogs.com/whuanle/p/17837034.html 如题,详细的介绍RabbitMQ ...

  4. Echarts 柱形图最全详解

    Echarts 是一款基于 JavaScript 的开源可视化图表库,被广泛应用于数据可视化领域.它提供了丰富的图表类型和交互功能,其中柱形图是最常用和重要的一种图表类型之一.下面是对 Echarts ...

  5. Tomcat国内安装及乱码解决详细步骤(无f墙)

    1.下载安装包 链接:https://pan.baidu.com/s/1x_hWMnUrui4aDYo9UE-GdA?pwd=p8kn 提取码:p8kn --来自百度网盘超级会员V4的分享 2.一键下 ...

  6. 从0到1，手把手带你开发截图工具ScreenCap------001实现基本的截图功能

    ScreenCap---Version:001 说明 从0到1,手把手带你开发windows端的截屏软件ScreenCap 当前版本:ScreenCap---001 支持全屏截图 支持鼠标拖动截图区域 ...

  7. 【UniApp】-uni-app-修改组件主题和样式

    前言 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-扩展组件 那么了解完了uni-app-扩展组件之后,这篇文章来给大家介绍一下 uni-app-修改组件主题和样式 首先不管三七二十一, ...

  8. bash shell笔记整理——date命令

    date命令初步了解 简单来说date的主要作用大多数用于以给定的格式来显示时间. 在后期我们写一些脚本当中也会使用到,比如说按照日期来给文件备份打包等. 下面我们来看看帮助信息: [root@ngi ...

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

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

  10. 【UniApp】-uni-app-处理项目输入数据(苹果计算器)

    前言 上一篇文章完成了项目的基本布局,这一篇文章我们来处理一下项目的输入数据 项目的输入数据主要是通过按键来输入的,所以我们需要对按键进行处理 那么我们就来看一下 uni-app-处理项目输入数据 步 ...