Vue前端框架

最新推荐文章于 2023-04-21 14:31:06 发布

giao211

最新推荐文章于 2023-04-21 14:31:06 发布

阅读量347

点赞数

文章标签： vue.js 前端框架前端

本文链接：https://blog.csdn.net/giao211/article/details/130223919

版权

1.什么是Vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架

2.Vue框架的特性

主要体现在如下两方面：

① 数据驱动视图

② 双向数据绑定

3.Vue的基本使用

3.1 Vue的基本使用步骤：

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的基本使用</title>
</head>
<body>
    <!--1.导入vue组件-->
    <script src="libs/vue-2.6.12.js"></script>
    <!--2.创建一个被控制的dom区域-->
    <div id="app">{{username}}</div>

    <script>
        //3.在script里面创建一个vue实例
        let app = new Vue({
            el:'#app',
            data:{
                username:'山鬼谣'
            }
        });
    </script>
</body>
</html>

3.2. 基本代码与 MVVM 的对应关系

el指向的选择器就是View的视图区域，data指向的对象就是Model数据源，new Vue()构造函数得到的vm对象就是ViewModel

4.vue 的指令与过滤器

4.1. 指令的概念指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令

② 属性绑定指令

③ 事件绑定指令

④ 双向绑定指令

⑤ 条件渲染指令

⑥ 列表渲染指令

4.1.1 内容渲染指令：内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。

常用的内容渲染指令有如下 3 个：v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令

v-text
{{ }}
v-html

4.1.2属性绑定指令 v-bind

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性绑定指令v-bind</title>
</head>
<body>
    <script src="libs/vue-2.6.12.js"></script>
    <div id="app">
        <!--全写法-->
<!--
        <input type="text" v-bind:placeholder="inputValue"><br/>
-->
        <!--简写写法-->
        <input type="text" :placeholder="inputValue"><hr/>
        <!--<img v-bind:src="imgSrc" alt="" />-->
        <!--图片绑定的简写-->
        <img :src="imgSrc" alt="">
    </div>

    <script>
        const app = new Vue({
            el:"#app",
            data:{
                // 文本框的占位符内容
                inputValue:"请输入姓名",
                imgSrc:"images/3.gif"
            }
        });
    </script>
</body>
</html>

4.1.3 事件绑定指令 v-on

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定指令v-on</title>
</head>
<body>
    <script src="libs/vue-2.6.12.js"></script>
    <div id="app">
        <h3>count 的值为：{{count}}</h3>
        <!--<button v-on:click="addCount">+1</button>-->
        <!--简写方式  绑定事件并传参-->
        <button @click="addCount(10)">+10</button>
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:0
            },
            methods:{
                addCount(step){
                    // this 表示当前 new 出来的 VM 实例对象
                    // 通过 this 可以访问到 data 中的数据
                    this.count+=step;
                }
            }
        });
    </script>
</body>
</html>

4.1.4 双向绑定 v-model

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <script src="libs/vue-2.6.12.js"></script>
    <div id="app">
        <p>{{username}}</p>
        <input type="text" v-model="username">

        <p>选择的省份是:{{province}}</p>
        <select v-model="province">
            <option value="">请选择</option>
            <option value="hb">河北</option>
            <option value="hn">湖南</option>
            <option value="sh">上海</option>
        </select>
    </div>

    <script>
        const app = new Vue({
            el:"#app",
            data:{
                username:"",
                //省份
                province:""
            }
        });
    </script>
</body>
</html>

4.1.5 条件渲染 v-if v-show

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是： v-if v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染v-if和v-show</title>
</head>
<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeStatus"><hr/>
    <!--直接删除img标签-->
    <img v-if="flag" src="images/1.png">
    <!--不会删除标签只会改变样式，display:none-->
    <img v-show="flag" src="images/1.png">
    <p>{{age}}</p>
    <input type="button" value="年龄累加" @click="addAge">
</div>

<script src="libs/vue-2.6.12.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
        // flag 用来控制元素的显示与隐藏
        // 值为 true 时显示元素
        // 值为 false 时隐藏元素
            flag: false,
            age:17
        },
        methods:{
            changeStatus(){
                this.flag=!this.flag
            },
            addAge:function () {
                this.age++;
            }
        }
    })
</script>

</body>
</html>

v-if 和 v-show 的区别：

实现原理不同： v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏； v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏。

性能消耗不同： v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好如果在运行时条件很少改变，则使用 v-if 较好

v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

4.1.6：列表渲染v-for

vue 提供了 v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。 v-for 指令需要使用 item in items 的特殊语法，

其中： items是待循环的数组

item是当前的循环项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for列表渲染指令</title>
</head>
<body>
    <script src="libs/vue-2.6.12.js"></script>
    <div id="app">
        <ul>
            <li v-for="(item,id) in list">id是:{{item.id}}, 姓名是：{{item.name}}</li>
        </ul>
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                list:[
                    {id:"01",name:"李白"},
                    {id:"02",name:"杜甫"}
                ]
            }
        });
        
    </script>
</body>
</html>