赶鸭子上架之Vue学习（一）

最新推荐文章于 2023-05-09 16:49:56 发布
最新推荐文章于 2023-05-09 16:49:56 发布
阅读量210 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18873031/article/details/106410596
版权

Vue下载及安装
阿伟的第一个vue代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
<!--        使用 v-cloak 能够解决插值表达式的闪烁问题 -->
        <p v-cloak>+++++++++++++++{{ msg }}</p>
        <h4 v-text="msg">=============</h4>
<!--        默认 v-text 是没有闪烁问题的，会覆盖元素中原本的内容，但插值表达式只会替换自己的占位符，不会把整个元素的内容清空 -->
        <div v-text="msg2"></div>
<!--        v-html 会将文本解析成html，也会覆盖原本的内容 -->
        <div v-html="msg2"></div>
<!--        v-bind 是vue中，提供的用于绑定属性的指令 -->
        <input type="button" value="按钮" v-bind:title="mytitle + '123'">
<!--        v-bind 简写形式-->
        <input type="button" value="按钮" :title="mytitle + '123'">
<!--        v-on：事件绑定机制 -->
        <input type="button" value="按钮" v-on:click="show">
<!--        v-on 简写形式 -->
        <input type="button" value="按钮" @click="show">
    </div>


    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'欢迎学习Vue',
                msg2:'<h1>哈哈哈哈哈哈哈哈哈</h1>',
                mytitle:'这是一个自己定义的title'
            },
            methods:{//methods中定义了当前vue实例所有可用的方法
                show:function () {
                    alert('hello')
                }
            }
        })
    </script>
</body>
</html>

阿伟的第二个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
    <div id="app">
        <ul>
<!--            循环-->
            <li v-for="dog in dogs"> {{dog}} </li>
<!--            带索引的循环，注意参数的顺序是（value，key）-->
            <li v-for="(dog,i) in dogs">{{ dog }} 是第 {{i}} 个</li>
        </ul>
        <hr>
        <ul>
<!--            输出1-10-->
            <li v-for="n in 10"> {{n}} </li>
<!--            输出0-9-->
            <li v-for="n in 10"> {{n-1}} </li>
        </ul>

        <hr>

        <p>自从你打开这个页面，已经过了 {{seconds}} 秒。</p>

        <hr>
<!--双向数据绑定 用 v-model !!!  -->
        <input type="text" v-model="inputText">
        <p>inputText: {{ inputText }}</p>

    </div>


    <script>
        new Vue({
            el:'#app',
            data: {
                dogs: ['a','b','c','d'],
                seconds:0,
                inputText:'initial value'
                },
            created(){
                setInterval(()=>{
                    this.seconds++;
                },1000);
            }
        });
    </script>
</body>
</html>

阿伟的第三个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
    <div id="app">

        <input type="text" :value="inputText" value="initial value">
        <p>inputText: {{ inputText }}</p>

        <hr>

        <label><input type="radio" v-model="value" value="一">一</label>
        <label><input type="radio" v-model="value" value="二">二</label>
        <label><input type="radio" v-model="value" value="三">三</label>
        <p>选中的 value 值为 {{value}}</p>

        <hr>

        <ul>
            <li v-for="number in filterPositive(numbers)"> {{ number }} </li>
        </ul>

    </div>


    <script>
        new Vue({
            el:'#app',
            data: {
                inputText:'',
                value:'一',
                numbers:[-5,0,2,-1,1,0,5]
                },
            methods:{
                //过滤掉所有负数
                filterPositive(numbers){
                    return numbers.filter((number) => number >= 0);
                }
            }
        });
    </script>
</body>
</html>
Lemon Love
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
递归小练习-c语言
qq_43109561的博客
11-16 531
递归小知识： ·什么是递归？ 程序调用自身的编程技巧称为递归（ recursion）。 递归做为一种算法在程序设计语言中广泛应用。 一个过 程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一 个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复 计算，大大地减少了程序的代码量。 递归的主要思考方式在于：把大事化小...
JAVA 赶鸭子问题 递归求解
Jackson_Ying的博客
11-18 1330
一个人赶着鸭子去每个村庄卖，每经过一个村子卖去所赶鸭子的一半又一只。这样他经过了七个村子后还剩两只鸭子，问他出发时共赶多少只鸭子？经过每个村子卖出多少只鸭子？ package homework; import java.util.Scanner; public class homework1 {//用循环法 /*一个人赶着鸭子去每个村庄卖，每经过一个村子卖去所赶鸭子 * 的一半又一只。这...
赶鸭子问题 递归 c++
shuyan745294340的博客
12-22 1304
在这里插入代码片 #include<bits/stdc++.h> using namespace std; int fun(int cun, int docuket){ if(cun > 0){ return fun(cun-1,docuket*2+2); } else{ return docuket; } } in...
（c++）递归的运用 （赶鸭子 角谷定理）
恰恰冲鸭
06-01 2992
递归是程序直接或间接调用自身的过程。首先了解递归模型：一个递归模型由递归出口和递归体两部分组成，递归出口确定递归到何时为止，递归体确定递归的方式。 程序实例 ①赶鸭子 一个人赶着鸭子去每个村庄卖，每经过一个村子卖去所赶鸭子的一半又一只。这样他经过了七个村子后还剩两只鸭子，问他出发时共赶多少只鸭子？经过每个村子卖出多少只鸭子？ 分析 剩2只 7村 (2+1)*2=6 6村 ...
go入门-vue+go+redis+gin-电子木鱼
m0_57949886的博客
03-29 408
好奇redis的热点功能应该怎样实际运用，有待深入学习。
vue学习之vue-resource请求
01-07
npm install 引入vue-resource包 this.$http.get(’/someUrl’) this.$http.post(’/someUrl’,{foo:‘bar’}) (1) npm install vue-resource –save引入vue-resource包 (2)在store文件的main.js中配置vue-resource ...
Vue学习之常用指令实例详解
12-29
1、创建一个vue实例 vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先获取到界面的标签元素，并实例化一个vue实例。 例如在HTML创建一...
vue学习笔记之vue1.0和vue2.0的区别介绍
12-29
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板，不在支持片段代码 VUE1.0是:　 我是组件</h3><strong>我是加粗标签 VUE2.0:必须有根元素,包裹住所有的代码 我是组件 我是加粗标签 ...
Vue学习之路之登录注册实例代码
01-19
利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $...
vue学习基础以及大纲
07-19
vue学习大纲
电子木鱼网页版(教学+源码带注释)
热门推荐
zhangawei123的博客
11-05 2万+
近日在网上经常看见电子木鱼的案例，但都是做的小程序，本人就突发奇想，使用css和JavaScript在网页中实现这个功能。于是便有了这个文章。有细致的讲解，也把源码都放在了最后，没有耐心的小伙伴可以直接去看源码，内有详细注释。
电子木鱼 微信小程序源码 今天你积功德了吗？
豆脑的博客
05-09 3291
电子木鱼微信小程序
递归程序设计之赶鸭子
qq_43722072的博客
05-27 2157
作者：无* 时间：2019-5-27 递归程序设计 一．题目分析 题目一： 一个人赶着鸭子去每个村庄卖，每经过一个村子卖去所赶鸭子的一半又一只。这样他经过了七个村子后还剩两只鸭子，问他出发时共赶多少只鸭子？经过每个村子卖出多少只鸭子？ 递归算法：递归出口（num==0,num表示的是村庄数）；递归表达式（duck(2*(sum+1),num-1)sum表示剩余鸭子数）；先调用duck(2,7)...
用递归实现买鸭子问题 C语言
ma2622595880的博客
06-20 2088
c语言：函数的递归调用
最高权限比特流
03-11 2万+
c语言可以将代码模块化，这是其很重要的一个特性。 说道代码模块化，我们很自然的就会联想到函数。而函数中，比较难的一个知识点就是函数的递归调用。 值得注意的是，函数的递归调用在现实工作并不是很常用，但是涉及到算法或者是学校的考试的话，那这个知识点就成了必考的内容。所以，骚年，躲是躲不掉滴~~ 好了，言归正传，首先，我们通过一个例子来具体看一下函数的递归调用。 例如，大家假期结束返回学校，生活
计算机控制技术题库(附答案).doc
07-18
计算机
yolo数据集8：1：1分类
07-18
yolo数据集8：1：1分类
2023中国独角兽ceo调研报告：锐意精进，创赢未来-普华永道.pdf
07-18
2023中国独角兽ceo调研报告：锐意精进，创赢未来-普华永道
大前端技术与管理——饿了么移动性能可视化之路 共32页.pdf
最新发布
07-18
大前端技术与管理——饿了么移动性能可视化之路 共32页.pdf
写一篇vue学习笔记
01-18
以下是一篇关于Vue学习的简单笔记： 1. Hello World ```html <!DOCTYPE html> <title>Vue Hello World <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <h1>{{ message }} var app = ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值