Vue入门教程常用指令总结

最新推荐文章于 2024-09-04 15:47:59 发布

学Java去要饭

最新推荐文章于 2024-09-04 15:47:59 发布

阅读量216

点赞数 1

分类专栏： Vue 文章标签： vue js html

本文链接：https://blog.csdn.net/weixin_46002478/article/details/109123818

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于Vue

它是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

快速上手

引入 Vue：有开发环境版本和生成环境版本，选其中一个即可。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--View层-->
<div id="app">
    {{message}}
</div>

<script>
    new Vue({
    	//挂载点
        el: "#app",
        //数据
        data:{
            message: "Hello Vue"
        }
    });
</script>
</body>
</html>

常用指令

el 挂载点通常绑定id
el: "#app"

data 数据

		data: {
            message: "Hello 尤玉溪"
        }

methods 方法区

		methods: {
			//方法名
            method: function () {
            	//方法体
                alert(this.message);
            }
        }

v-text 纯文本
v-text="Hello"

v-html 加结构
v-html="<b>Hello</b>"

v-text与v-html对比

<div id="app">

    <h1 v-text="message"></h1>
    <h1 v-html="message"></h1>
    
</div>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            message: "<b>Hello</b>"
        }
    })
</script>

对比结果

在这里插入图片描述

v-if 判断
v-if="true"
v-else-if="1>2"
v-else

<div id="app">

    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
    
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    })
</script>

v-for 循环
v-for="(item,index) in items" 遍历元素带索引
v-for="arr in arrs" 遍历arrs数组到arr

<div id="app">
<li v-for="(item,index) in items">
    索引：{{index}}
    数据：{{item}}
</li>
<hr>
<li v-for="arr in arrs">
    姓名：{{arr.name}}
    年龄：{{arr.age}}
</li>

</div>
<script>
    new Vue({
        el: "#app",
        data:{
            items: ["Java","C++","Python"],
            arrs: [{name: "卢本伟",age: 35},{name: "茄子",age: 48}]
        }
    })
</script>

在这里插入图片描述

v-on 绑定事件
v-on:click="方法名"吧不方便
@click="方法名" 单击简写
@keyup.enter="方法名" 回车键监听简写

<div id="app">

    <button v-on:click="click">单击</button>
	<!--简写-->
    <button @click="click()">单击</button>

    <button @keyup.enter="click">回车</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello"
        },
        methods: {
            click : function () {
                alert(this.message);
            }
        }
    });
</script>

在这里插入图片描述

v-show 判断是否显示，布尔值，本质是切换元素的display。

<div id="app">

    <h1 v-show="flag >= 0">Hello 尤玉溪</h1>
    
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            flag: 0
        }
    })
</script>

v-model 双向数据绑定，前后端数据实时同步。

<div id="app">

    输入文本：<input type="text" v-model="message">{{message}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello"
        }
    })
</script>

在这里插入图片描述

v-bind 设置属性
v-bind:title="百度" 设置标题，前缀v-bind可省略
:class="flag?'active':''" 简写，三元运算，如果flag为true，则设置属性class为active，否则为空串。
:class="{active:flag}" 简写，对象判断，如果flag为true 就设置属性class为active。

<style>
    .active{
        color: #297;
    }
</style>
<div id="app">
    <a href="https://www.baidu.com" v-bind:title="src">百度一下</a>
    
    <!--三元运算-->
    <h1 :class="flag?'active':''">Hello World</h1>
    <!--对象-->
    <h1 :class="{active:flag}">Hello World</h1>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            src: "百度",
            flag: true
        }
    })
</script>

在这里插入图片描述

↓↓↓↓↓↓↓↓↓↓关于axios异步通信↓↓↓↓↓↓↓↓↓↓

https://blog.csdn.net/weixin_46002478/article/details/109124880

学Java去要饭

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue入门教程常用指令总结

关于Vue目录关于Vue快速上手第一个Vue程序常用指令它是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。快速上手引入 Vue：有开发环境版本和生成环境版本，选其中一个即可。<script src
复制链接

扫一扫

专栏目录