Vue实例

最新推荐文章于 2022-09-18 10:53:09 发布
最新推荐文章于 2022-09-18 10:53:09 发布
阅读量93 收藏
点赞数
文章标签： Vue实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44584870/article/details/86563793
版权

做点赞和讨厌的按钮功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<counter heading="Likes" color="green"></counter>
			<counter heading="Dislikes" color="red"></counter>
		</div>
		
		<template id="counter-template">
			<div>
				<h1> {{ heading }} </h1>
				<button @click="count+=1"  style="background: {{color}}"> {{ count }} </button>
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

		<script>
			Vue.component('counter',{
				template:'#counter-template',
				props:['heading'],
				data:function(){
					return {count:0};
				}
			});
			
			new Vue({
				el:"#app"
			});
		</script>
	</body>
</html>

做level判断的功能 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			level :  {{level}}
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					a:200
				},
				computed:{
					level:function(){
						if(this.a<=100){
							return '普通会员';
						}
						
						return 'VIP会员'
					}
				}
			})
		</script>
	</body>
</html>

做数组里的值的展示 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="task in tasks">{{task}}</li>
			</ul>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					tasks:[
						'Ronaldo',
						'Messi',
						'Nermal'
					]
				}
			});
		</script>
	</body>
</html>

做一些点击处理 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shanchuxian{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li @click="dianji(task)"  
					:class="task.completed?'shanchuxian':''" 
					v-for="task in tasks">{{task.body}}
				</li>
			</ul>
		</div>
		
		<script src="js/vue.min.js"></script>
		<script>
			new Vue({
				el:"#app",
				data:{
					tasks:[
						{body: '天津泰达',completed:false},
						{body: '北京国安',completed:true},
						{body: '上海申花',completed:false}
					]
				},
				methods:{
					dianji:function(task){
						task.completed = !task.completed;
					}
				}
			});
		</script>
	</body>
</html>

多功能的展示

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.shanchuxian{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<task-app :list="tasks">

			</task-app>
			
			<task-app :list="[{body:'盐城权健',completed:flase}]">

			</task-app>
		</div>
		
		<template id="task-template">
			<h1>未完成的数量:<span v-show="remaining">{{remaining}}</span></h1>
			<ul>
				<li @click="dianji(task)" 
					:class="task.completed?'shanchuxian':''" 
					v-for="task in list">
					{{task.body}}
					<strong @click="delete(task)">X</strong>
				</li>
			</ul>
		</template>
		
		<!--<script src="js/vue.min.js"></script>-->
		<script src="http://cdn.bootcss.com/vue/1.0.14/vue.js"></script>
		<script>
			Vue.component('task-app',{
				template:'#task-template',
				props:['list'],
				methods:{
					dianji:function(task){
						task.completed = !task.completed;
					},
					delete:function(task){
						this.list.$remove(task);
					}
				},
				computed:{
					remaining:function(){
						return this.list.filter(function(task){
							return !task.completed;
						}).length;
					}
				}
			});
			
			new Vue({
				el:"#app",
				data:{
					tasks:[
						{body: '天津泰达',completed:false},
						{body: '北京国安',completed:true},
						{body: '上海申花',completed:false}
					]
				},
				
			});
		</script>
	</body>
</html>
昊晨爱泰达TEDA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 实例
彳亍
09-05 256
创建一个 Vue 实例 每个 Vue 应用都需要通过 Vue 构造器实例化一个 Vue 实例来实现。 语法格式： var vm = new Vue({ // 选项 }) 我们把 Vue() 称为 Vue 构造器。 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。 ...
Vue 实例篇
weixin_44908855的博客
08-11 365
1. Vue的使用 1.1 vue.js 的安装 方式一：直接CDN引入 <script src='https://cdn.jsdelivr.net/npm/vue'></script> 方式二：下载到本地引入 <script src='vue.js'></script> 方式三：npm 下载 // 下载命令 npm install vue // 页面中引用 <script src="node_modules/vue/dist/vue.
Vue的根实例
weixin_66059613的博客
09-18 728
Vue的根实例
vue.js基础01--基础用法及内部指令
muzidigbig的博客
07-25 4200
一、vue的概述及vue的入门小实例 vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作D... v-if和v-for为什么不建议同时使用
全面了解Vue基础知识（实例、指令）
bug处理进行时
07-27 732
一、vue 应用的组成 1 - vue 实例 一个vue应用由一个根实例及多个嵌套的、可选的组件树构成 <div id="app"> {{message}} <todo-list/> </div> <script> // 组件 Vue.component('todo-list', { data() { return { message: "this is a component" }
Vue实例简单方法介绍
08-31
在本篇文章中，我们将深入探讨Vue实例的一些简单方法，以帮助初学者更好地理解和运用Vue。 首先，创建Vue实例是通过`new Vue()`来完成的。在上述示例中，我们创建了一个名为`vm`的Vue实例，指定了`el`属性来绑定...
基于Vue实例对象的数据选项
08-29
"基于Vue实例对象的数据选项" Vue实例对象的数据选项是 Vue 框架中的一种重要概念，它允许开发者在创建 Vue 实例时定义数据对象，并将其绑定到实例上。数据选项是 Vue 实例的核心组成部分，它决定了实例的行为和...
Vue 实例事件简单示例
10-16
在Vue实例中，事件处理是构建交互式Web应用程序的关键部分。本示例主要关注Vue实例的事件，包括事件监听、触发和管理。 首先，Vue实例的事件系统允许我们在组件之间进行通信。在示例中，我们创建了一个名为`app`的...
Vue 组件修改根实例的数据的方法
10-17
主要介绍了Vue 组件修改根实例的数据的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实例demo
04-09
Vue实例是Vue应用的核心部分，它代表了Vue的根级组件。在这个“vue实例demo”中，我们将深入探讨如何使用Vue进行基本操作，包括集成vue-router进行路由管理，以及实现父子组件间的通信。 1. **Vue实例创建**： ...
vue实例001
06-28
在"vue实例001"这个简单的demo中，我们将深入理解Vue的核心概念和基本用法。 首先，Vue实例是Vue.js应用的基础。在创建Vue实例时，我们通常会通过`new Vue({})`构造函数来初始化一个Vue对象，这个对象包含了Vue应用...
6.VUE实例
yangwq的博客
08-11 287
VUE实例：当一个程序加载时会有一个入口点 newVue的VUE实例叫做一个根实例 实际上除了根实例是一个VUE实例外 VUE中的每一个组件也是一个VUE实例【在创建一个组件的时候 VUE底层也会把这个组件编译成一个VUE的实例】可以理解为一个VUE的项目是由很多小的组件组成的【组件化 每个组件就是一个VUE的实例】 也可以理解为一个VUE的项目是由很多VUE的实例拼装而成 <!DOCTYPE html> <html lang="en"> <head> .
关于创建和挂载根实例失败无法在html页面加载App.vue问题
qq_29109193的博客
05-08 3865
   今天我要说一下我在学vuejs遇到的神坑，这个问题让我抓狂了一晚上，就是根据官方的文档来写页面不报错，终端也不不报错，就是无法在页面显示我在app.vue写的html代码，我找了一晚上的资料，发现在启动路由这里没有加载到app.vue页面的代码，后来我在里面加上render: h =&gt; h(App)这句就成功了，下面附上启动路由的完整代码，希望各位不要在遇到这种令人吐血的问题了：con...
vue-cli构建的项目，vue组件和根实例的关系
qq_35139897的博客
11-13 2033
一、问题 学习vue.js，根据资料，直接用vue-cli构建的项目。想像其它项目一样，如Java的项目，在这个基本的框架上，做几个基本的练习，把教程中的内容都练习一下。 搜索菜鸟教程vue.js教程，想直接按照例子写，出现问题了。 例如，条件判断使用 v-if 指令： 照内容，新建一个Study.vue文件组件，这里直接用 new Vue（）来写，路由配置好，但是页面进入后是空白，控制台输出...
vue 根实例 template 和 组件 template
weixin_41796631的博客
04-05 2584
1. 根实例 template 和 组件 template 是一样的，都只能有一个根元素（根元素指的是包含在最外层的元素）； new Vue({ el: '#app', store, components: {App, zujian}, //注册这两个组件 template: '<zujian></zujian>' }) 2. 优先级：根实例 temp...
vue组件和根实例的关系
gabby____的博客
04-18 4189
学vue组件的时候，一直没有弄明白，用Vue.component注册组件的时候，整个component方法单摆浮搁，没有和其他任何Vue实例有关联，想不明白为什么也能修改html内容。 在传统思维里，HTML标签我们只有选择器（读）的权限，少有修改（写）的权限，如果思维固化，会导致认为标签里的名称对于我们没有实际意义，尤其div这种空气标签，非常容易会被忽略为不存在，而Vue里，<my-c...
Crypto_30_vHsm_Types.h
07-09
Crypto_30_vHsm_Types
vmware虚拟机安装教程.pdf
最新发布
07-10
VMware虚拟机安装教程是一个详细且系统的过程，涵盖了从下载、安装到配置虚拟机的多个步骤。以下是一个详尽的VMware虚拟机安装教程，旨在帮助用户顺利搭建自己的虚拟环境。
Vue实例学习
05-30
Vue实例是Vue应用的基本单位，它是Vue的核心概念之一。学习Vue实例需要掌握以下几个方面： 1. 创建Vue实例：在Vue应用中，我们需要先创建Vue实例。可以使用Vue构造函数来创建一个新的Vue实例，如下所示： ``` var ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值