Vue入门

最新推荐文章于 2023-04-02 11:15:07 发布
最新推荐文章于 2023-04-02 11:15:07 发布
阅读量44 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45722508/article/details/115742243
版权

属性绑定 v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!--<div id="app">{{msg}}</div>-->

<!--v-bind事件绑定 简写:-->
<!--<span id="app" v-bind:title="msg">鼠标悬停查看</span>-->
<span id="app" :title="msg">鼠标悬停查看</span>

<script>
    var vm = new Vue({
        el: "#app",
        // model 数据
        data:{
            msg: "hello vue"
        }
    });
</script>
</body>
</html>

if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--<p v-if="show">yes</p>
    <p v-else="show">no</p>-->

    <p v-if="type==='a'">a</p>
    <p v-else-if="type==='b'">b</p>
    <p v-else-if="type==='c'">c</p>
    <p v-else="type==='d'">d</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // show: true
            type: "a"
        }
    });
</script>
</body>
</html>

for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="(obj,index) in list">
        {{obj.msg}}---{{index}}
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            list: [
                {msg: "html"},
                {msg: "css"},
                {msg: "js"}
            ]
        }
    });
</script>
</body>
</html>

事件绑定 v-on

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <!--v-on 事件绑定 简写@-->
    <button v-on:click="sayHello">button</button>
    <button @click="sayHello">button2</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        // Vue的方法需要定义在methods中
        methods: {
            sayHello: function () {
                alert(this.msg);
            }
        }
    });
</script>
</body>
</html>

双向绑定 v-model

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

<!--<input type="radio" value="male" v-model="sex">男
<input type="radio" value="female" v-model="sex">女
    <br>
    你的性别为:<span>{{sex}}</span>-->

    <!--下拉框使用双向绑定会失去selected 默认选择-->
    <select v-model="type">

        <option value="" disabled>---请选择---</option>
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    <div>value:{{type}}</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            // sex: ""
            type: ""
        }
    });
</script>
</body>
</html>

组件 component

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

   <starry v-for="(item,index) in items" v-bind:key="index" v-bind:value="item"></starry>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    // 定义组件
    Vue.component("starry",{
        // 父组件给子组件传递参数需要使用props
        props: ['value'],
        template: '<li>{{value}}</li>'
    });


    var vm = new Vue({
        el: "#app",
        data: {
            items: ["html","css","js"]
        }
    });


</script>
</body>
</html>

Axios异步通信

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点击跳转</a>
    <ul>
        <li v-for="(item,index) in info.links" v-bind:key="index" >
            {{item.name}}---{{item.url}}
        </li>
    </ul>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        // 方法
        data(){
            return {
                info: {
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    },
                    links: []
                }
            };
        },
        // 钩子函数
        mounted(){
            axios.get("../data.json").then(response => (this.info = response.data));
        }
    });


</script>
</body>
</html>

计算属性 computed

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

<div>方法:{{currentTime1()}}</div>
<div>属性:{{currentTime2}}</div>
<!--计算属性和方法都能到达相同的效果,计算属性可以缓存结果,计算属性就是属性-->


</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>

    var vm = new Vue({
        el: "#app",
        data: {
            msg: "test"
        },
        // 方法
        methods: {
            // 返回当前时间戳
            currentTime1:function () {
                return Date.now();
            }
        },
        // 计算属性中方法的操作会被缓存起来,下次再运行方法时,直接返回缓存的值,当数据被改变时才会再次只需方法
        // console.log(vm.currentTime2)
        computed: {
            // 返回当前时间戳
            currentTime2:function () {
                this.msg;
                return Date.now();
            }
        }
    });


</script>
</body>
</html>

插槽 slot

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--<p>列表书籍</p>
    <ul>
        <li>java</li>
        <li>linux</li>
        <li>python</li>
    </ul>-->

    <!--slot绑定对应的组件,v-bind 绑定定义的参数-->
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :key="index" :item="item"></todo-items>
    </todo>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>

    // slot插槽 name属性绑定对应的组件
    Vue.component("todo",{
        template: `<div>
                        <slot name="todo-title"></slot>
                        <ul>
                            <slot name="todo-items"></slot>
                        </ul>
                   </div>`
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: `<p>{{title}}</p>`
    });

    Vue.component("todo-items",{
        props: ['item'],
        template: `<li>{{item}}</li>`
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "书籍列表",
            items: ['Java','Linux','Python']
        },

    });


</script>
</body>
</html>

子组件向父组件传递参数 this.$emit

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-text="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--<p>列表书籍</p>
    <ul>
        <li>java</li>
        <li>linux</li>
        <li>python</li>
    </ul>-->

    <!--slot绑定对应的组件,v-bind 绑定定义的参数-->
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" :key="index" :item="item"
                   :index="index"  @remove="removeItem(index)"></todo-items>
    </todo>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<script>

    // slot插槽 name属性绑定对应的组件
    Vue.component("todo",{
        template: `<div>
                        <slot name="todo-title"></slot>
                        <ul>
                            <slot name="todo-items"></slot>
                        </ul>
                   </div>`
    });

    Vue.component("todo-title",{
        props: ['title'],
        template: `<p>{{title}}</p>`
    });

    Vue.component("todo-items",{
        // 定义参数index
        props: ['item','index'],
        // 添加事件绑定
        template: `<li>{{item}} <button @click="remove">删除</button></li>`,
        methods: {
            remove:function (index) {
                // this.$emit传递参数,
                // 参数一:自定义方法名,
                // 参数二:实际执行方法参数
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "书籍列表",
            items: ['Java','Linux','Python']
        },
        methods: {
            /* 操作vm虚拟DOM参数 items
                * splice()从数组中删除元素,可添加参数
                * start: number, 开始索引
                * deleteCount: number, 删除数量
                * ...items: T[] 添加元素
                * */
            removeItem:function (index) {
                this.items.splice(index, 1);
            }
        }

    });


</script>
</body>
</html>
starriesWEB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门基础
XMY021016的博客
02-17 1305
Vue快速入门 1、Vue概述 (1) 什么是Vue vue是一套用于快捷开发前端应用的框架技术。它的特点用于构建用户界面的前端渐进式框架，采用自底向上的逐层应用，只关于视图层，技术简单易于上手。 （2）Vue和其他框架 使用vue可以实现视图页面上的组件重复使用，提高了开发和维护的效率！同时优化了页面的加载和 渲染的效率，提高了用户体验。 --React： 重量级框架，一般中大型项目、大厂会直接使用React技术开发项目 封装较为彻底，定制化功能较差，需要有一定的技术门槛 运行时性能得到
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue学习-Vue入门
weixin_59357453的博客
04-02 4278
这是一篇vue学习记录
Vue入门——初步了解
秋书一叶的博客
11-25 2124
Vue的简单介绍及快速入门
Vue入门教程
tttalk的博客
12-23 4761
一、Vue介绍 简介：Vue.js（ /vjuː/） 是一套构建用户界面的渐进式框架, Vue只关注视图层， 采用自底向上增量开发的设计。 特点：响应式编程、组件化。 优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 注：这里是基于Vue2的教程，现在已经出了Vue3,但是还没完全普及，并且Vue3基本兼容Vue2，所以可以先学Vue2，再去了解Vue3的更新，后面会更新这部分内容。 二、安装 一般有三种方式：本地下载、CDN和NPM(推荐)。 1.本地下载地址：
Vue框架---Vue入门
鑫709的博客
04-26 6281
Vue概述 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 vue.js的核心特点—响应的数据绑定 传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取元素然后在处理业务逻辑 响应式数据绑定的方式操作页面，可以直接使用像下面代码那样的写法就可以将数据填充到页面中 为什么要学习vue 通过学习Vue提供的指令, 很方便的就能把数据渲染到页面上, 不在需要手动操作DOM元素, 前端的Vue之类的框架, 不提.
vue入门
yifei_345678的博客
09-15 3060
vue是一个构建用户界面UI的渐进式javascript框架渐进式的框架
若依-vue入门
weixin_41915066的博客
03-25 3273
1.若依（若依-vue） 1.1什么是若依？ 开源项目，学习开源项目的目标： 1、用，减少自己的工作量 2、 学习优秀开源项目底层的编程思想，设计思路，提高自己的变成能力 官网 基础：Spring Boot + Vue 环境要求： 1、JDK1.8+ 2、MySql 3、Redis 4、Maven 5、Vue 1.2使用若依 使用开源项目的步骤： 1、 下载并运行 2、 看懂业务流程 3、 进行二次开发 下载： ​ ...
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
VUE入门
06-20
在“VUE入门”这门课程中，你将深入学习Vue的核心概念和技术，以便将它有效地应用到实际项目中。 首先，我们要理解Vue的**双向数据绑定**。这是Vue的一大亮点，它使得视图与模型之间的数据自动同步。Vue通过`v-...
从出口数据看中国经济新动能-华福证券.pdf
07-21
从出口数据看中国经济新动能-华福证券
java毕设&课设-ASP玩具交换网站设计与实现(源代码+论文).zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
人工智能行业深度报告：WAIC2024，国产AI+应用“百花齐放”
07-21
2024年世界人工智能大会（WAIC 2024）上，国产AI+应用生态呈现“百花齐放”的局面 1. WAIC 2024：国产 AI+应用生态“百花齐放” 多家厂商携大模型及AI应用成果亮相展会，涵盖金山办公、科大讯飞、华为、商汤等知名企业。 OpenAI 禁令加速推动国产 AI 生态，国产大模型性能持续提升，缩小与海外差距。 预计未来国产 AI+行业应用将迎来“百花齐放”局面，商业空间加速打开。 2. 国产大模型加速迭代，代表性厂商生态加速构建 科大讯飞 发布星火 V4.0 大模型，全面对标 GPT-4 Turbo，多模态能力显著提升。 星火医疗和教育垂类模型能力升级，赋能行业应用落地。 推出星火企业智能平台，赋能企业构建岗位专属助手。 华为 发布盘古大模型 5.0 系列，包括不同参数规模，适用于多种场景。 推出盘古具身智能大模型，推动人形机器人技术升级。 盘古 5.0 赋能华为小艺升级，在多个行业落地应用。 商汤 发布“日日新 5.5”模型，交互体验对标 GPT-4o，多模态能力实现突破。 推出面向 C 端用户的可控人物视频生成模型 Vimi。 率先实现原生多模态大模型车端部署
HDTF-DATA.z09
最新发布
07-21
HDTF-DATA.z09
2023肠道产业发展白皮书-热心肠研究院.pdf
07-21
2023肠道产业发展白皮书-热心肠研究院
Vue入门教程：环境安装、组件与生命周期
Vue入门教程深入解析 在这个Vue入门指南中，我们将带你逐步进入Vue的世界，一个强大的前端JavaScript框架，它简化了Web应用的开发过程。首先，我们关注于安装环境的准备，确保拥有Node.js，这是Vue开发的基础，因为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值