Vue框架初识01

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

摘要

  • vue简介

  • vue使用

一、Vue简介：

简介：

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

Vue是前端三大框架之一(Angular、Vue、React)

JS渐进式框架：一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目

# 思考：vue如何做到一次引入控制整个项目 => 单页面应用 => vue基于组件的开发

初识vue，我们可以思考一下vue的工作原理：vue如何渲染一个页面

vue学习曲线：vue的指令 vue的实例成员 vue组件 vue项目开发

vue的优点：

①单页面：高效

②虚拟DOM：页面缓存

③数据的双向绑定：数据具有监听机制

④数据驱动：从数据触发，不是从DOM出发

vue的使用：

1、下载地址：https://cn.vuejs.org/v2/guide/installation.html

2、在html页面用<script> 标签引入使用

在html中书写挂载点的页面结构，用id表示
在自定义的script标签实例化Vue对象，传入一个大字典
在字典中通过 el与挂载点页面结构绑定，data为其通过数据

二、vue的基本使用：

点击事件：v-on:click="点击事件产生动作名称" 

<body>
<div id="app">
    <!--{{ vue变量 }} 插值表达式-->
    <h1 v-on:click="clickAction">{{ h1_msg }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 挂载点
        data: {
            h1_msg: 'vue利用插值表达式渲染的变量内容',
        },
        methods: {
            clickAction:function () {
                alert(123)
            }
        }
    })
</script>

 vue操作简单样式

<body>
<div id="app">
    <p v-on:click="btnClick1" v-bind:style="v_style">点击p标签文字颜色变绿</p>
    <div v-on:click="btnClick2" v-bind:style="v_style">点击div标签文字颜色变绿</div>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 挂载点
        data: {
            v_style: {color: 'black'},
        },
        methods: {
            btnClick1:function () {
                this.v_style.color = 'green'
            },
            btnClick2:function () {
                this.v_style.color = 'red'
            }
        }
    })
</script>

小结：vue是通过v-*指令来控制标签，同时通过变量内的数据来驱动页面的渲染

vue相关指令认识：

文本指令

<body>
<div id="app">
    <!--插值表达式另一种形式 v-text-->
    <p>{{ msg1 }}</p>
    <p v-text="msg2"></p>
    <!--可以通过v-html来解析html标签-->
    <p v-html="msg3" v-on:mouseover="action1"></p>
    <!--v-once，必须赋初值，且渲染的结果不会变化-->
    <p v-once="msg4" v-on:mouseover="action">{{ msg4 }}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 挂载点
        data: {
            msg1: '**msg1**',
            msg2: '<b>**msg2**</b>',
            msg3: '<b>**msg3**</b>',
            msg4: '**msg4**',
        },
        methods: {
            action:function () {
                this.msg4 = '**新的msg4**'
            },
            action1:function () {
                this.msg3 = '**新的msg3**'
            },
        }
    })
</script>

事件指令

<body>
<div id="app">
    <!--v-on:事件名="函数名"，这种表示可以进行简写：@事件名="函数名"，也就是将v-on:简写成一个@代替-->
    <p v-on:click="action1">{{ msgs[0] }}</p>
    <p @click="action2">{{ msgs[1] }}</p>
    <!--事件的传参-->
    <ul>
        <li @click="liAction(100)">列表组1</li>
        <li @click="liAction(200)">列表组2</li>
        <li @click="liAction(300)">列表组3</li>
    </ul>
    <!--鼠标事件对象：直接写函数名，默认将鼠标事件对象传入-->
    <div @click="func1">func1</div>
    <!--鼠标事件对象，一但添加()，就必须手动传参，$event就代表鼠标事件对象-->
    <div @click="func2($event, 'abc')">func2</div>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 挂载点
        data: {
            msgs: ['111', '222']
        },
        methods: {
            action1:function () {
                alert(this.msgs[0])
            },
            action2:function () {
                alert(this.msgs[1])
            },
            liAction:function (num, msg) {
                console.log(num, msg)
            },
            func1:function (ev) {
                console.log(ev)
            },
            func2:function (ev,msg) {
                console.log(ev);
                console.log(msg)
            },
        }
    })
</script>

属性指令

    <style>
        .rDiv {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .gDiv {
            width: 100px;
            height: 50px;
            background-color: blue;
        }
        .br {
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--属性指令：用vue绑定属性，将属性内容交给vue处理-->
    <!--语法：v-bing:属性名="变量" (v-bind:可以简写为:)-->
    <p class="" style="" v-bind:sgt="oo" :jason="xx"></p>
    <!--class 属性-->
    <p :class="c1" @click="action1"></p>
    <!--多个类名-->
    <p :class="[c1, c2]"></p>
    <!--'br'固定写死的数据，不再是变量-->
    <p :class="[c1, 'br']"></p>
    <!--style属性-->
    <!--一个变量：该变量的值为{}，{}内部完成了一个个属性的设置-->
    <p class="gDiv" :style="s1">12345</p>
    <!--一个{}，{}内是一个个属性，由一个个变量单独控制-->
    <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',    // 挂载点
        data: {
            oo: 'SGT',
            xx: 'JASON',
            c1: 'rDiv',
            c2: 'br',
            s1: {
                fontSize: '30px',
                color: 'black'
            },
            fs: '10px',
            c: 'orange'
        },
        methods: {
            action1:function () {
                if (this.c1=='rDiv'){this.c1='gDiv'}
                else{this.c1='rDiv'}
            }
            },
    })
</script>


if条件指令

通过变量控制元素或组件的渲染与否，即控制相关元素的销毁与重建

<body>
<div id="app">
    <!-- 条件指令 v-show | v-if-->
    <!-- v-show：消失是以 display: none渲染 -->
    <div class="div" v-show="s1">123</div>
    <!-- v-if：消失时不会被渲染 -->
    <div class="div" v-if="s2">456</div>
</div>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            s1: false,
            s2: true
        }
    })
</script>
</body>

#).v-show也用于根据条件控制元素的显示与隐藏，不同的是，v-show无论取何值，元素都会被渲染到dom结构，v-show的取值只是影响元素的display取值。

#).v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 v-model双向绑定指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>
<script src="vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data:{
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

以上是 Vue框架初识01 的全部内容， 来源链接： utcz.com/z/380269.html

回到顶部