Vue基础学习

引自：https://mrbird.cc/Vue-Learn-Note.html mrbird大佬博客

Vue 入门

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app">
    <input type="text" v-model="inputValue"/>
    <button @click="createTodoList">提交</button>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul></div><script>
    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            createTodoList: function () {
                if (!this.inputValue) {
                    alert('请输入内容');
                    return;
                }
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        }
    });
</script>

var app = new Vue({})创建了一个实例，通过el: "#app"接管了ID为app的div的所有内容。
data属性用于装载数据，包含list和inputValue。
- v-for指令用于遍历集合，这里用于遍历list数组中的值；
- v-model指令用于双向数据绑定，即在<input type="text" v-model="inputValue"/>中输入的值会改变Vue实例中inputValue的值，通过JS改变Vue实例inputValue的值也会改变<input type="text" v-model="inputValue"/>中的值。
@click指令用于绑定事件，这里绑定了createTodoList事件，对应Vue实例methods中的createTodoList。

全局Vue组件


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app">
    <input type="text" v-model="inputValue"/>
    <button @click="createTodoList">提交</button>
    <ul>
         <todo-item v-bind:content="item"
                   v-bind:index="index"
                   v-for="(item,index) in list">
        </todo-item>
    </ul></div><script>
    Vue.component('TodoItem',{
        props: ['content','index'],
        template: '<li>{{index+1}}-{{content}}</li>'
    });

    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            createTodoList: function () {
                if (!this.inputValue) {
                    alert('请输入内容');
                    return;
                }
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        }
    });
</script></body></html>

这里我们使用Vue.component('TodoItem',{})定义了一个名称为TodoItem全局Vue组件，可以在任何Vue管理的Dom中使用：

TodoItem组件可以使用<todo-item>的方式使用，即大写可以转换为小写，第二个大写字母转小写后必须加上-前缀；
v-bind指令用于绑定值，这里通过v-bind:content将content变量的值绑定为item(即list中的每个元素值)，通过v-bind:index将index变量的值绑定为index（即当前循环的下标）。v-bind可以简写为:；
props属性用于向子组件传递数据，这里接收了由:bind指令传递了从父组件绑定过来的index和content变量；
template定义了模板，即这个Vue组件呈现的样子（通常都是一段HTML加上父组件传递过来的变量值）。
在这个过程中，我们除了学会了怎么定义全局Vue组件外，还学会了怎么从父组件中往子组件传值。

<div id="app">这个Dom结构已经被Vue接管，其内部又包含了<todo-item>Vue组件，所以我们将<div id="app">称之为父组件，<todo-item>称之为子组件。

局部Vue组件

定义一个局部组件来改造上面的todoList：


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>todoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script></head><body><div id="app">
    <input type="text" v-model="inputValue"/>
    <button @click="createTodoList">提交</button>
    <ul>
        <todo-item :content="item"
                   :index="index"
                   v-for="(item,index) in list"
                   @delete="deleteTodoList">
        </todo-item>
    </ul></div><script>
    var TodoItem = {
        props: ['content', 'index'],
        template: '<li @click="handleItemClick">{{index+1}}-{{content}}</li>',
        methods: {
            handleItemClick: function () {
                this.$emit('delete', this.index)
            }
        }
    };

    var app = new Vue({
        el: "#app",
        components: {
            TodoItem: TodoItem
        },
        data: {
            list: [],
            inputValue: ''
        },
        methods: {
            createTodoList: function () {
                if (!this.inputValue) {
                    alert('请输入内容');
                    return;
                }
                this.list.push(this.inputValue);
                this.inputValue = '';
            },
            deleteTodoList: function (index) {
                console.log(index);
                this.list.splice(index, 1);
            }
        }
    });
</script></body></html>

查看全文

java笔记7----java中的方法、递归
1、方法方法的定义在程序开发的过程中，会编写到很多重复的代码，，可以使用方法对这些代码进行管理，可以使用方法实现对代的管理和重用(重复使用)，可以把方法理解成一个可以重复多次使用的功能。方法的格式在给方法…...
2023/6/9 2:08:19
Python和C语言哪个更容易学，感觉学了C语言有点难，只学过C语言的大学生很迷茫？
学Python第一天：哇做一个ab程序看上去挺简单的，编程看上去没那么难。学C第一天：我的天include是啥？main是啥？return是啥？……int, float, double, char都是啥？ （不正经地&#xf…...
2023/6/9 4:55:29
剑指 Offer 38. 字符串的排列
题目描述： 输入一个字符串，打印出该字符串中字符的所有排列。你可以以任意顺序返回这个字符串数组，但里面不能有重复元素。示例: 输入：s "abc" 输出：["abc","acb","bac",&…...
2023/6/6 1:34:52
“linux系统内网穿透、外网访问”教程
由于Linux操作系统安全性优于Windows，所以很多用户选择使用Linux系统作为服务器，那么如何在Linux系统上运行快解析程序呢，下面就详细给大家讲一下操作步骤。安装步骤如下： 1)下载金万维gnhostlinux动态域名Linux/Unix下客户端软件…...
2023/6/9 0:10:27
vue-@media媒体查询使用
1、vue需要安装sass-loader和node-sass2个插件来使用 ①安装sass: npm install sass-loader --save-dev②安装node: npm install -g cnpm --registryhttps://registry.npm.taobao.org2、直接在每个页面中使用我这里是：样式写的适配小于750px和大于750px是什么样…...
2023/6/7 13:57:03
使用visualization_msgs::Marker可视化
介绍: visualization_msgs::Marker格式如下: //各种标志物类型的定义，每一个的具体介绍和形状可以到这里查看：http://wiki.ros.org/rviz/DisplayTypes/Marker uint8 ARROW0//箭头 uint8 CUBE1//立方体 uint8 SPHERE2//球 uint8 CYLINDER3//圆柱体 uint…...
2023/6/9 7:35:11
蓝桥杯-九宫重排（python）
蓝桥杯-九宫重排（python） 目录蓝桥杯-九宫重排（python）题目描述思路和总结：题目描述如下面第一个图的九宫格中，放着 1~8 的数字卡片，还有一个格子空着。与空格子相邻的格子中的卡片可以移动到空…...
2023/6/7 9:50:55
windows 安装apex
标题windows 安装apex windows安装可以加速的apex 由于需要使用cuda进行计算，在github官网下载apex，然后在windows上面进行安装，使用的命令是python setup.py install .虽然安装成功，但是不能够正常使用。后来尝试安装命令&…...
2023/6/6 7:43:10
哈尔滨工业大学提出光学设计新思路：基于快速可微光线追迹的端到端单透镜成像系统设计
基于快速可微光线追迹的端到端单透镜成像系统设计 End-to-end learned single lens design using fast differentiable ray tracing 作者单位：哈尔滨工业大学空间光学工程研究中心论文地址：https://doi.org/10.1364/OL.442870 近年来，基于…...
2023/5/27 21:20:27
RabbitMQ启动失败解决
RabbitMQ启动失败解决对梦想的牵挂 2019-06-14 15:04:01 39160 收藏 6 分类专栏： 【----linux----】【----RabbitMQ----】文章标签： RabbitMQ Liunx 版权【----linux----】同时被 2 个专栏收录 10 篇文章0 订阅订阅专栏【----RabbitMQ----】…...
2023/6/2 14:02:53
天风证券基金产品的爬取
#-*-coding:GBK -*- #******************** #微信&电话：13248260503 # 证券开户研报收集 # 代码交流数据分析 # 脚本开发投资推荐 #******************** import urllib.request import requests import re import random import time from urllib.parse im…...
2023/5/26 16:13:22
愉快的周末愉快的在CentOS 7简单安装宝塔面板
CentOS 7简单安装宝塔面板前言一、Linux系统安装宝塔面板脚本二、宝塔使用步骤总结前言因为之前在腾讯云买了个云服务器，用来反弹shell比较方便&安全，而且想着可以自己搭个网站玩玩，但是每次配置端口或者服务的时候都要在控制端扫码登录…...
2023/6/7 10:32:51
linux发行版的ISO下载
linux发行版的ISO下载 (1) debain系列： Debian ISO映像文件: http://www.debian.org/distrib/ Ubuntu ISO映像文件: http://www.ubuntu.com/download (2) redhat系列： redhat企业级Linux试用版ISO映像文件：https://www.redhat.com/zh …...
2023/5/30 18:33:24
Mysql集群架构
1. 集群架构设计 1.1 架构设计理念主要从三个维度考虑问题： 可用性扩展性一致性 1.2 可用性设计站点高可用，冗余站点服务高可用，冗余服务数据高可用，冗余数据保证高可用的方法是冗余。但是数据冗余带来的问题是数据一致性…...
2023/6/6 11:12:09
运算符与表达式（算数、赋值、比较、逻辑、成员关系、对象实例测试、位运算、一元运算）运算符的优先级
运算符运算符分类 python3中地板除 >>> 8//3 #使用两个//就可以 2 算数运算符赋值运算符比较运算符可以多个运算符连用** 如3>5>3 等价于3>5and 5>3 逻辑运算符对于包含了and or not的表达式，从左往右运算，但是会有短路运…...
2023/5/30 6:13:25
沃尔玛悄悄注册元宇宙商标，准备进军虚拟市场
沃尔玛悄悄注册元宇宙商标，准备进军虚拟市场，今早各大媒体争相报道沃尔玛悄悄开始注册新商标，元宇宙又添一名得力干将，在很多人都不知道元宇宙是什么的时候，我国知名品牌们都已经开始为之后的发展蓄力了，下…...
2023/6/6 14:12:01
JPEG原理快速理解
一、图像分割将图像分割成8x8子块二、颜色空间转换 RGB-> YCbCr 通过三个数学式子，即可完成转换比如将图片分解成YCrCb 三、离散余弦变换说简单点就是二维傅里叶变换，把各个像素的值用很多个余弦函数相加四、量化把每个DCT变换后的值经…...
2023/5/23 8:34:30
设计模式之抽象工厂模式
抽象工厂模式1.抽象工厂模式2.介绍3.实现1.抽象工厂模式抽象工厂模式（Abstract Factory Pattern）是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式。 …...
2023/5/25 8:45:39
如何用实在RPA快速调用AI能力？
前文:黛玉只就宝玉手中看了一看，便问道：“还是单送我一人的，还是别的姑娘们都有呢?”周瑞家的道：“各位都有了，这两支是姑娘的了。” Al续写：黛玉却想道：“我如今是个孤女，他们送的…...
2023/5/27 3:08:32
动态链表----单向循环链表的实现
1. 单向循环链表的定义：如果把单链表的最后一个节点的指针指向链表头部，而不是指向null，那么就构成了一个单向循环链表。如图： 2. 单向循环链表的实现：单向循环链表实现与单向链表的实现相似，同样是实现线性…...
2023/6/4 21:57:09

Vue基础学习

Vue 入门

全局Vue组件

局部Vue组件

相关文章

最新文章