Vue的一些简单使用

最新推荐文章于 2024-06-29 22:55:10 发布
最新推荐文章于 2024-06-29 22:55:10 发布
阅读量173 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ztcyaonulia/article/details/84101532
版权
  1. v-model 通常实现一些表单数据的双向绑定
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app4">
        {{price}}<br>
        <input v-model="price"><!-- 下行注释的语法糖 -->
        <!-- <input :value="price" @input="price = $event.target.value"> -->
    </div>
    <script>
        new Vue({
            el: '#app4',
            data: {
                price: '20'
            }
        });
    </script>
</body>
  1. {{$data|json}}取出data的数据并格式化输出
  2. computed对属性值进行计算，通常处理一些需要逻辑处理的属性值
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
    <div id="app4">
        {{price}}<br>
        level:{{level}}
        <input v-model="price">  
    </div>
    <script>
        new Vue({
            el: '#app4',
            data: {
                price: '20'
            }
            computed:{
            	level:function(){
            			if(this.price>=100){
            					return 'vip会员'
            			}
            			return '普通会员'
            	}
            }
        });
    </script>
</body>

  1. events
    绑定点击触发事件，点击数字加1

      <!DOCTYPE html>
 	<html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <script type="text/javascript" src="vue.min.js"></script>
 </head>
 <body>
 
 <div id="app">
     <p>{{price}}</p>
     <input type="button" @click="clickbutton">
 </div>
 <script>
     new Vue({
         el:"#app",
         data:{
             price: 0,
         },
         methods:{
             clickbutton:function(){
                 this.price+=1
             },
         },
     })
 </script>
 </body>
 </html>

  2. component
    （1）提供代码复用

     		<html>
 		<head>
 		    <meta charset="utf-8">
 		    <title></title>
 		    <script type="text/javascript" src="vue.min.js"></script>
 		</head>
 		<body>
 		<div id="app">
 		    <p>{{price}}</p>
 		    <input type="button" @click="clickbutton">
 		    <conter></conter>
 		    <conter></conter>
 		    <conter></conter>
 		    <conter></conter>
 		</div>
 		<script>
 		    Vue.component(
 		        'conter',{
 		        	template:'<h1>helloworld</h1>'，
 		        	}
 		    )
 		    new Vue({
 		        el:"#app",
 		        data:{
 		            price: 0,
 		        },
 		        methods:{
 		            clickbutton:function(){
 		                this.price+=1
 		            },
 		        },
 		    })
 		</script>
 		</body>
 		</html>

（2）组件化标签有变量的情况

		<html>
		<head>
		    <meta charset="utf-8">
		    <title></title>
		    <script type="text/javascript" src="vue.min.js"></script>
		</head>
		<body>
		<div id="app">
		    <p>{{price}}</p>
		    <input type="button" @click="clickbutton">
		    <conter></conter>
		    <conter></conter>
		</div>
		<template id="counter-templet">
		    <h1>helloworld</h1>
		    <button @click="count+=1">add{{count}}</button>
		</template>
		<script>
		    Vue.component(
		        'conter',{
		            template:'#counter-templet',
		            //
		            data:function () {
		                return {count:0}
		            }
		        }
		    )
		    new Vue({
		        el:"#app",
		    })
		</script>
		</body>
		</html>

(3)组件中的props，实现组件具有不同的属性

	<html>
	<head>
	    <meta charset="utf-8">
	    <title></title>
	    <script type="text/javascript" src="vue.min.js"></script>
	</head>
	<body>
	<div id="app">
	    <p>{{price}}</p>
	    <input type="button" @click="clickbutton">
	    <conter heading="like" color="red"></conter>
	    <conter heading="dislike" color="blue"></conter>
	</div>
	<template id="counter-templet">
	    <h1>helloworld</h1>
	    <button @click="count+=1" style="background-color:{{color}}">{{heading}}{{count}}</button>
	</template>
	<script>
	    Vue.component(
	        'conter',{
	            template:'#counter-templet',
	            data:function () {
	                return {count:0}
	            },
	            props:['heading','color'],
	        }
	    )
	    new Vue({
	        el:"#app",
	    })
	</script>
	</body>
	</html>

  1. v-for相关

     <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <script type="text/javascript" src="vue.min.js"></script>
 </head>
 <body>
 <style>
     .compl{
         text-decoration: line-through;
     }
 </style>
 <div id="app">
  <ul>
      <li @click=" change(task)" :class="{'compl':task.compl}" v-for="task in tasks">{{task.body}}</li>
  </ul>
 </div>
 <script>
     new Vue({
         el:"#app",
         data:{
             tasks:[
                 {body:'go to the movie',compl:false},
                 {body:'leanr vue.js',compl:true},
                 {body:'go to the shop',compl:false},
             ]
         },
         methods:{
             change:function (task){
                 console.log(task.compl)
                 task.compl = ! task.compl
             }
         }
     })
 </script>
 </body>
 </html>
i`m_ztc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的基本使用
weixin_44529746的博客
10-31 3173
社区资料：Vue：Vue.js专业中文社区 vue官方手册：API — Vue.js 一、vue的介绍 vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) 补充： MVC设计模式： M model 数据层 V view 视图层 C control控制层
Vue简单使用
weixin_30423977的博客
06-28 73
1. 使用Vue <!-- 将来new的Vue实例,会控制这个元素中的所有内容 --> <!-- Vue 实例所控制的这个元素区域,就是我们的V --> <div id="app"> <h1>{{msg1}}</h1> <h1>{{msg2}}</h1> </div> ...
vue的简单使用
最新发布
m0_68599156的博客
06-29 808
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MWVM(Model-View-ViewModel)思想，实现数据的双向绑定（这个双向绑定一会儿看操作就行在MVVMModel（模型）Model 代表应用程序的数据层，包括数据和业务逻辑。它通常负责管理应用程序的状态和规则，不直接与用户界面交互。View（视图）View 是用户界面的一部分，它负责展示数据给用户，并接收用户的输入。
vue简单使用
一剑轻语
05-16 396
背景：写了几天的Vue页面。做一个简单介绍。 1.vue页面标签和传统的标签很相似。基本就是传统的标签首字母大写，或者是加上v-。 2.vue页面标签一般都会绑定数据，实现数据和标签的双向绑定，即数据变化页面变化，页面变化时数据也相应变化 3.vue绑定了很多东西。目前主要是用的data(){} 数据 methods:{}方法。除此以外，computed 计算属性 componen...
Vue简单的使用
会写Bug的攻城狮
10-09 2456
Vue简单的使用 1、概念 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 在创建的vue中，初始化一个npm管理的项目npm init -y 在安装其他的包npm install vue 2、简单使用（单向绑定） <div i
vue2中使用less简易教程
08-27
Vue2 中使用 Less 简易教程 Vue2 中使用 Less 是非常简单的，因为不需要手动配置 Webpack。只需要安装 Less 和 Less-loader 就可以了。在本教程中，我们将介绍如何在 Vue2 中使用 Less，并且详细解释每一个步骤。 ...
基于Vue的简易旅游网站设计源码
04-05
本资源提供了一套基于Vue的简易旅游网站的设计源码，包含106个文件，其中包括40...这些文件详细展示了如何使用Vue、JavaScript、TypeScript、HTML和CSS构建一个简易的旅游网站，非常适合用于学习和参考Vue项目的开发。
一个Vue前端框架使用简单实例
01-07
下文是Vue的简单使用并使用nginx进行发布。 1.环境：本次实例在windows环境进行，所以首先下载windows环境下的nginx并置于相关目录下，本次实验的nginx版本为1.12.2 2.下载vue.min.js文件，这个请读者自行解决 3....
vue-clock:使用Vue.js的简单时钟组件
05-13
使用Vue.js的简单时钟组件 安装 CDN < script src =" https://unpkg.com/@dangvanthanh/vue-clock " > </ script > NPM $ npm install @dangvanthanh/vue-clock --save 用法 Vue 全球的 import Vue ...
Vue实现简单分页器
10-17
Vue实现简单分页器主要涉及Vue.js框架与前端分页组件的开发。Vue.js是一个轻量级的渐进式JavaScript框架，它允许开发者构建可复用的组件，并且提供了响应式的数据绑定和组件化功能，使得开发过程更加高效。在这个...
Vue的简单使用
weixin_56162501的博客
05-30 116
1.什么是Vue 2.如何使用Vue <html> <head> <title>$Title$</title> <%--导入vue得脚本--%> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <%--创建一个双标签--%> <d
Vue简单介绍和操作指南
weixin_45581495的博客
07-16 218
Vue解决的问题是:逻辑部分和赋值部分进行分离 Vue分为: 视图部分:负责页面渲染，主要由HTML+CSS构成。 脚本部分:：负责业务数据模型（Model）以及数据的处理逻辑。 let vm = new Vue({ 选项列表; }); 选项列表 el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。 data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。 methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。 数据绑定 在视..
Vue学习笔记（1） 一开始的使用以及Vue实例的详解
XP and Altoria
01-11 1692
Vue一款轻量级的js框架，在此分享一下自己学习历程，Vue的学习成本比较低，相对于React以及Angular来说算是相当简单了的 首先是不使用npm安装的前提下，我们简单利用link直接使用Vue 在你的网页中添加如下的js 然后接下来我们就可以开始Vue的学习之路了 首先从Vue实例开始说起 我们现在的网页是这样的 Vue
Vue入门，8大基本用法
橘子hhh
08-18 1391
以上为Vue最基础且常用的内容， 下次更新项目应用中整体结构、服务启动、路由等
vue3 简单使用axios
08-23
在Vue3中简单使用axios的步骤如下所示： 1. 首先，需要导入Vue、axios和VueAxios这三个库。可以使用以下代码进行导入： ``` import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值