提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

1.快速入门
2.Vue常用的指令
3.Vue声明周期
- 3.1 生命周期图示
- 3.1 钩子函数

1.快速入门

1.1 Vue概述

Vue是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
特点：
- 易用：在有HTMLCSSJavaScript的基础上，快速上手。
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

1.2 快速入门案例

开发步骤 :

导入Vue.js包
编写视图负责页面渲染，主要由HTML+CSS构成。
编写脚本负责业务数据模型（Model）以及数据的处理逻辑。

代码演示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>入门案例</title>
    </head>
    <body>
        <div id="app">
            <span>{{msg}}</span>
        </div>
    </body>
    <!-- 第一步：导入Vue包 -->
    <script src="vue.js"></script>
    <script>
        // 第二步:实例化Vue对象
        var vue = new Vue({
            el:"#app", // 获取div内容
            // data对象，专门用来存储数据
            data:{
                msg:"白日依山尽"
            }
        });
    </script>
</html>

1.3 快速入门的详解

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

var vue对象名 = new Vue({
    el:"id名称",
    data:{
        属性名:属性值,
        ...
    },
    methods:{
        函数名(){
            
        },
        ...
    }
});

- el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。 
- data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 
- methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。

数据绑定在视图部分获取脚本部分的数据。 {{变量名}}

2.Vue常用的指令

2.1 Vue指令概述

指令：是指带有v-前缀的特殊属性，不同的指令具有不同的含义。
在使用指令时通常是作用标签属性上，值可以是js表达式。
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
如果你对DOM概念念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。
常用的指令有：

指令	作用
v-html	把文本解析成HTML代码，作用和js中的innerHTML类似
v-text	给标签动态设置一个文本内容，作用与js中的innerText类似
v-bind	为HTML标签绑定属性值
v-if	条件性渲染某元素，当调价为true时渲染，为false不渲染
v-else	条件性渲染某元素，当调价为true时渲染，为false不渲染
v-else-if	条件性渲染某元素，当调价为true时渲染，为false不渲染
v-show	根据条件展示某个元素，区别在于它是切换的display的值
v-for	列表渲染，遍历容器或者对象的属性
v-model	在表单上实现双向数据绑定

2.2 插值表达式

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：{{ 数据语法 }}

<body>
    <div id="app">
        <span>{{msg}}</span>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", // 获取div内容
        // data对象，专门用来存储数据
        data:{
            msg:"白日依山尽"
        }
    });
</script>

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

2.3 属性绑定 v-bind

插值表达式虽然可以直接将Vue中的数据直接展示到页面，但是它只能作用在HTML标签的内容中吗，不能作用在标签的属性上，这就产生了局限性。这是我们就可以通过v-bind指令的方式来操作HTML标签中的属性。v-bind 指令指示 Vue 将元素的 id 属性与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除。

<!--语法格式-->
<标签 v-bind:html属性名="data属性名"></标签>
<!--语法简写格式-->
<标签 :html属性名="data属性名"></标签>

<script>
	new Vue({
        el:"容器",
        data:{
            属性名:属性值;
        }
    });
</script>

代码演示

<body>
    <div id="app">
        <a v-bind:href = "url">百度一下</a>
        <a :href = "url">百度一下</a>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", 
        data:{
            url:"http://www.baidu.com"
        }
    });
</script>

2.4 文本表达式 v-text、v-html

v-text

更新元素的文本内容。
期望的绑定值类型：string
v-text 通过设置元素的 textContent属性来工作，因此它将覆盖元素中所有现有的内容。

语法格式：

<标签 v-text= "属性名" ></标签>

代码演示

<body>
    <div id="app">
        <span v-text="msg"></span>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", 
        data:{
            msg:"白日依山尽"
        }
    });
</script>

v-html

更新标签中的元素内容，并且解析html代码。作用类似于innerHTML
v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。

<标签 v-html="属性名"></标签>

代码演示

<body>
    <div id="app">
        <span v-html="msg"></span>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", 
        data:{
            msg:"<font color='red'>白日依山尽</font>"
        }
    });
</script>

v-text于v-html的区别

v-text不能解析html代码
v-html可以解析html代码

2.5 条件渲染 v-if 、v-else、v-else-if、v-show

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
- 当 v-if 元素被触发，元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假，那么其内部的内容根本都不会被渲染。
v-else：条件性的渲染。
- 限定：上一个兄弟元素必须有 v-if 或 v-else-if。
- 可用于 <template> 表示仅包含文本或多个元素的条件块。
v-else-if：条件性的渲染。
- 限定：上一个兄弟元素必须有 v-if 或 v-else-if。
- 可用于 <template> 表示仅包含文本或多个元素的条件块。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
- v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

<body>
    <div id="div">
        <!-- 判断num的值，对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3-->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>
        <div v-show="flag">div4</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</script>

2.6 列表渲染 v-for

列表渲染，遍历容器的元素或者对象的属性。
期望的绑定值类型：Array | Object | number | string | Iterable
指令值必须使用特殊语法 alias in expression 为正在迭代的元素提供一个别名
或者，你也可以为索引指定别名 (如果用在对象，则是键值)
v-for 的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示

<标签 v-for="item in items">
    <子标签 >{{item.属性名}}</子标签>
    ...
</标签>

代码演示

<body>
    <div id="app">
        <table border="1">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="stu in stuList">
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
            </tr>
        </table>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", 
        data:{
            stuList:[
                {name:"张三",age:11},
                {name:"李四",age:12},
                {name:"王五",age:13}
            ]
        }
    });
</script>

2.6 绑定事件监听 v-on

为 HTML 标签绑定事件。
缩写：@
期望的绑定值类型：Function | Inline Statement | Object (不带参数)

参数：event (使用对象语法则为可选项)

.stop ——调用 event.stopPropagation()。
.prevent ——调用 event.preventDefault()。
.capture ——在捕获模式添加事件监听器。
.self ——只有事件从元素本身发出才触发处理函数。
.{keyAlias} ——只在某些按键下触发处理函数。
.once ——最多触发一次处理函数。
.left ——只在鼠标左键事件触发处理函数。
.right ——只在鼠标右键事件触发处理函数。
.middle ——只在鼠标中键事件触发处理函数。
.passive ——通过 { passive: true } 附加一个 DOM 事件。

事件类型由参数来指定。表达式可以是一个方法名，一个内联声明，如果有修饰符则可省略。

<标签 v-on:事件类型="函数名()"></标签>
<标签 @事件类型="函数名()"></标签>

代码示例

<body>
    <div id="app">
        <button v-on:click="fun1()">绑定方式一</button>
        <button @click="fun2()">绑定方式二</button>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", 
        methods:{
            fun1(){
                alert("方式一事件绑定成功");
            },
            fun2(){
                alert("方式二绑定成功");
            }
        }
    });
</script>

2.7 表单绑定 v-model

在表单输入元素或组件上创建双向绑定。
望的绑定值类型：根据表单输入元素或组件输出的值而变化
仅限：<input> <select> <textarea>components

修饰符：

.lazy ——监听 `change` 事件而不是 `input`
.number——将输入的合法符串转为数字
.trim ——移除输入内容两端空格

语法格式

<标签 v-model = "属性"></标签>

代码演示

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <div v-text="msg"></div>
    </div>
</body>
<!-- 第一步：导入Vue包 -->
<script src="vue.js"></script>
<script>
    // 第二步:实例化Vue对象
    var vue = new Vue({
        el:"#app", 
        data:{
            msg:""
        }
    });
</script>

3.Vue声明周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

3.1 生命周期图示

在这里插入图片描述

3.1 钩子函数

beforeCreate : 在组件实例初始化完成之后立即调用。
- 初始化事件和钩子函数，还不能使用data和methods，所以会报错。
- 会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。
created : 在组件实例处理完所有与状态相关的选项后调用。
- 当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。
- 已经初始化data和methods，此时就可以使用了
beforeMount : 在组件被挂载之前调用。
- 生成vue虚拟dom树，无法获取vue渲染的标签内容
- 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
mounted : 在组件被挂载之后调用。
- 生成vue真实dom树，可以获取vue渲染的标签内容
- 组件在以下情况下被视为已挂载：
  - 所有同步子组件都已经被挂载。(不包含异步组件或树内的组件)
  - 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。
- 这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
beforeUpdate : 在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
- 修改数据后，生成虚拟dom树，只会获取以前的标签内容
- 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
- 这个钩子在服务端渲染时不会被调用。
updated : 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
- 修改数据后，生成真实dom树，可以获取修改的标签内容
- 这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。
beforeDestroy : 在一个组件实例被卸载之前调用。
- 销毁之前，data和methods不可用 destroyed vue实例销毁完成
- 当这个钩子被调用时，组件实例依然还保有全部的功能。

JavaWeb - 05 Vue框架基本使用

文章目录

1.快速入门

1.1 Vue概述

1.2 快速入门案例

1.3 快速入门的详解

2.Vue常用的指令

2.1 Vue指令概述

2.2 插值表达式

2.3 属性绑定 v-bind

2.4 文本表达式 v-text、v-html

2.5 条件渲染 v-if 、v-else、v-else-if、v-show

2.6 列表渲染 v-for

2.6 绑定事件监听 v-on

2.7 表单绑定 v-model

3.Vue声明周期

3.1 生命周期图示

3.1 钩子函数

网站公告

今日签到

热门文章

最新发布