【Vue】入门练习

最新推荐文章于 2023-07-22 20:43:31 发布
最新推荐文章于 2023-07-22 20:43:31 发布
阅读量549 收藏 2
点赞数 1
分类专栏： # Java实训 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48180029/article/details/118481480
版权

在new Vue中定义一个数据msg,在body模块显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">

        <p>{{msg}}</p>
    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
                msg:'萨瓦迪卡'
            },

        })

    </script>

</body>
</html>

在new Vue中定义数据msg，flag;
flag为true在body模块显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">

        <p v-if="flag">{{msg}}</p>
        <p v-else>{{text}}</p>
    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
                flag:false,
                msg:'萨瓦迪卡',
                text:'你好'
            },

        })

    </script>

</body>
</html>

定义一个复选框，与Vue中的数据flag绑定，当其选中时，flag为true
当flag为true时，显示msg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">


        选择:<input type="checkbox" v-model="flag">
        <p v-if="flag">{{msg}}</p>
    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
                flag:false,
                msg:'萨瓦迪卡',
            },

        })

    </script>

</body>
</html>

当复选框绑定的是一个变量时，变量值只有真假，即选中为真。
当绑定的是一个数组，选中的内容为value
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">
       <input type="checkbox" id="t1" value="Java" v-model="checked">
        <label for="t1">Java</label>
        <input type="checkbox" id="t2" value="C++" v-model="checked">
        <label for="t2">C++</label>
        <input type="checkbox" id="t3" value="Python" v-model="checked">
        <label for="t3">Python</label>

        <br>
        <span>选择的值为:{{checked}}</span>

    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
                checked:[]
            },


        })

    </script>

</body>
</html>

定义一个单行文本框，与msg绑定，显示msg
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">
        输入:<input type="text" v-model="msg">
        <br>
        <p>{{msg}}</p>

    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
               msg:''
            },

        })

    </script>

</body>
</html>

变量sex与单选框绑定显示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <input type="radio" v-model="sex" value="男"></input>
        <label >男</label>
        <input type="radio" v-model="sex" value = "女"></input>
        <label >女</label>

        <p>选中了:{{sex}}</p>

    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                sex:'',

            }

        })

    </script>

</body>

</html>

第一步:定义一个按钮，当点击时，count++，显示count
在这里插入图片描述
第二步：监听count,显示新、旧值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">
        <p>{{count}}</p>
        <button @click="count++">点击</button>

    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
               count:0
            },
            watch:{
                count:function (nval,oval) {
                    alert('旧值为: '+oval+'新值为: '+nval);
                }
            }

        })

    </script>

</body>
</html>

写一个按钮，当被点击时，执行Vue中的一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <home></home>
    <div id="app">
        <button v-on:click="greet('萨瓦迪卡')">按钮1</button>
        <button v-on:click="greet('你好')">按钮2</button>

    </div>
    <script>

        var vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{
                greet:function (message) {
                    alert(message)
                }
            }

        })

    </script>

</body>
</html>

=========================================================

使用自定义外部js方法

在这里插入图片描述

export function getRandomValue() {
  return Math.random() - 0.5
}

在这里插入图片描述
Vue3.0中setup函数的使用

繁星伴晚安
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue.js的入门练习案例
01-02
vue.js的入门练习案例 适用于后端程序员初学vue的练习 具体的文件可以参考博主的文章 博主首页：https://blog.csdn.net/weixin_43333483?spm=1011.2415.3001.5343 上述代码文件包含以下博客的练习代码 【Vue】一、...
vue入门学习示例.zip
05-04
根据网上手工编写练习，供需要的用户快速浏览学习，index.html简单学习，super.html for学习，super two.html 自定义事件https://blog.csdn.net/maomaoqiukqq/article/details/99967143
vue项目练习大全
m0_61348045的博客
02-06 1476
vue项目大全
Vue练习题（带解析）
qq_60245590的博客
06-11 7353
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
VUE练习
AimerDaniel的博客
08-02 177
1、VUE练习 2、VUE组件化的思想 3、VUE路由机制 4、京淘后台管理搭建 5、前后端分离思想MP
Vue练习
鹿蹊zz的博客
07-30 740
如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）。v-for的优先级比v-if高，每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。.
Vuejs项目练习
虎康的博客
10-07 698
练习一： 作业需求：点击列表中的哪一项，那么该项文字变为红色（结合v-for和v-bind来实现 实现效果： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <style> .active{ color: red; } </style> &
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
vue-project:vue入门练手项目
04-29
appA Vue.js project很久之前的入门项目，今天突然想起就稍微优化了一下下。很简单的几个页面，麻雀虽小但是五脏还是俱全，如果你是新手从第一次commit开始跟着做，一定没有问题。优化了axios和其他一些小地方，结构...
vue2 + vue-router + vuex 入门项目
10-16
非常简单的一个vue2 + vuex的项目，整个流程一目了然，麻雀虽小，五脏俱全，适合作为入门练习。 如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^ 或者您可以 "follow" 一下，我会不断开源更多的有趣的...
vue习题
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
VUE的基本使用。
qq_61576523的博客
04-06 8485
要想使用vue，你要先安装一个名字叫：Vscode这个软件，这个软件的安装，在这就不说了。在这里直接进行演示。 1，首先你要先创建一个文件夹， 把vue的jar包和jquery的jar包都放进去，然后再在里面创建一个文件，名字可以自定义，一开始创建好是一个空白，你输入！号后点击回车后会呈现出这个界面。 2.写导入jar包的代码。 我在这里有新建了一个文件夹js放，把这两个jar包都放到了js里面所以他的导入jar包的代码是这样的： <script src="js/vue.js" ty
vue实例练习和vue样式练习
qq_53366282的博客
03-18 1287
目录 vue实例练习和vue样式练习 1.vue实例练习 2.vue样式练习 vue实例练习和vue样式练习 1.vue实例练习 <head> <title>vue实例演示</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <!-- 过滤器的两种写法 -
【Vue】项目练习
清风微醺的博客
08-10 1500
Vue 实战快速上手
Vue面试题：最常见得20道含答案和代码示例的练习题
三拾的博客
06-21 1961
computed是计算属性，它会根据其依赖的数据属性自动计算出一个新的值，并将这个值缓存起来，只有当依赖的数据属性发生变化时，才会重新计算。v-model指令会将表单元素的值绑定到组件实例中的数据属性上，同时也会将组件实例中的数据属性的值绑定到表单元素上。在项目中，可以使用Vue.js的语法和组件，同时也可以使用Nuxt.js提供的一些API来实现服务器端渲染和静态网站生成。在配置中，需要将Vue实例转换为一个可以在服务器端运行的对象，并使用Vue SSR的API来渲染组件和模板。最后，在Vue组件中。
2023年最新50道Vue全套vue2+vue3面试题带答案汇总
tangdou369098655的博客
07-22 1万+
• M - Model 数据：数据实体,用来保存页面要展示的数据。比如ajax获取的数据。• V - View 视图，显示数据的页面，一般为html。• C - Controller 控制器： 控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤，进而影响数据在视图上的展示。MVC是应用最广泛的软件架构之一,一般MVC分为:Model(模型),View(视图),Controller(控制器)。
Vue面试题：30道含答案和代码示例的练习题
三拾的博客
05-05 1485
这里使用v-model指令将用户输入的内容绑定到Vue实例的message属性上，然后使用v-on指令监听键盘输入事件，当用户按下“Enter”键时调用Vue实例的sendMessage方法。v-model指令会在表单元素上创建一个监听器，在用户输入时实时更新Vue实例的数据，并且在Vue实例数据变化时更新表单元素的值。Vue组件是可复用的Vue实例，具有自己的模板、状态和行为。mixins可以将多个组件之间的共享功能抽离出来，形成一个混入对象，在组件中引入该混入对象即可获得该对象的所有属性和方法。
vue案例练习
weixin_43526403的博客
01-29 605
vue案例练习（Vue2版本）
vue入门到精通 pdf
最新发布
11-23
《Vue入门到精通》是一本关于Vue.js前端框架的学习指南。本书分为入门、进阶和精通三个部分，帮助读者从零基础开始学习，并逐步掌握Vue.js的核心概念和应用技巧。 在入门部分，书中首先介绍了Vue.js的基本概念，如组件、数据绑定、指令等。读者将学会如何搭建Vue项目、编写Vue组件，并了解Vue的基本语法和工作原理。通过实例演示和练习题，读者可以巩固对Vue基础知识的理解和掌握，为后续的学习打下坚实的基础。 进阶部分则重点讲解了Vue的高级特性和常用技巧。读者将学会如何使用Vue Router进行路由管理、Vuex进行状态管理、以及Vue CLI进行项目构建。此外，该部分还包括了对Vue的响应式原理、性能优化和国际化等方面的深入讲解，帮助读者进一步提升开发能力。 在精通部分，书中通过案例实战、源码解析等方式，深入剖析Vue.js的内部机制和高级用法。读者将学会如何进行自定义指令、混入(mixin)、过滤器(filter)等高级扩展，以及如何优化大型项目的性能和可维护性。此外，书中还介绍了与第三方库、服务端渲染等相关的内容，帮助读者更进一步地掌握和应用Vue.js。 总之，《Vue入门到精通》是一本循序渐进、实例丰富的Vue.js学习教材，适合从零开始学习Vue.js的前端开发者。通过系统地学习该书，读者可以逐步掌握Vue.js的核心知识和实际应用技巧，提升自己在前端开发领域的竞争力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值