Web——Vue入门语法

最新推荐文章于 2022-11-25 11:17:09 发布
最新推荐文章于 2022-11-25 11:17:09 发布
阅读量224 收藏
点赞数
分类专栏： WEB 文章标签： vue 入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37049781/article/details/98787736
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue 入门</title>
	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
</head>
<body>
	<!--变量在data中定义 使用时用双大括号-->
	<div id="root1">{{msg}}</div>
	<script>
		// 声明一个vue对象
		new Vue({
			el:"#root1",
			data:{
				msg:"this is my coat !"
			}
		})
	</script>


	<div id="root2">
		<!-- v-text 不会转义 -->
		<h1 v-text="text"></h1>
		<!-- v-html 会自动转义 -->
		<h2 v-html="text"></h2>
	</div>
	<script>
		new Vue({
			el:"#root2",
			data:{
				text:"<p>yes it is !</p>"
			}
		})
	</script>

	<!-- 绑定事件 -->
	<div id="root3" :title="title"> 
		<!-- @ v-on的简写，绑定事件
		     : v-bind的简写，绑定属性
		      v-model 双向绑定-->	
		<div @click="myfunction">{{msg}}</div>
		<input :placeholder="password" type="password" name="pd" v-model="password" />
		<p>您的密码是：{{password}}</p>
	</div>
	<script>
		new Vue({
			el:"#root3",
			data:{
				title:"这是一个测试例子",
				msg:"nice to meet you !",
				action:"请输入密码：",
				password:""
				// msg1:password,
			},
			// 方法定义
			methods:{
				myfunction: function() {
					this.msg = "nice to meet you too !"
				}
			}
		})
	</script>
	
	<!--计算属性与监听器-->
	<div id="root4">
		<input v-model="firstname"/>
		<input v-model="lastname"/>
		<div>my name is {{fullname}}</div>
		<div>修改次数：{{count}}</div>
	</div>
	<script>
		new Vue({
			el: "#root4",
			data: {
				firstname: '',
				lastname: '',
				count:0
			},
			// 计算属性定义 适用于一个数据受多个数据影响
			computed: {
				fullname: function() {
					return this.firstname + ' ' + this.lastname
				}
			},
			// 监听器  适用于一个数据影响多个数据
			watch: {
				fullname:function(){
					this.count ++
				}
			}
		})
	</script>
	
	<!--条件及循环语句-->
	<div id="root5">
		<!-- v-if 根据条件直接从dom中清除 -->
		<!-- <div v-if="show">hello world</div> -->
	
		<!-- v-show 对元素进行隐藏 -->
		<div v-show="show">hello world</div>
		
		<button @click="handleClick">toggle</button>
		<ul>
			<!-- <li v-for="item of list">{{item}}</li> -->
			<!-- key值效率更高，但不能相同 -->
			<li v-for="(item, index) of list":key="index">{{item}}</li>
		</ul>
	</div>

	<script>
		new Vue({
			el: "#root5",
			data: {
				show: false,
				list: ['a','b','c']
			},
			methods: {
				handleClick: function() {
					this.show = !this.show
				}
			}
		})
	</script>

	<!--插入与删除-->
	<div id="root6">
		<ul>
			<li v-for="(item, index) of list" :key="index">
				{{item}}&emsp;<button @click="removevalue(index)">移除</button>
			</li>
			<input v-model="inputvalue"/>
			<button  @click="insertvalue">添加</button>
		</ul>
	</div>
	<script>
		new Vue({
			el: "#root6",
			data: { 
				inputvalue: "",
				list: []
			},
			methods: {
				insertvalue: function () {
					this.list.push(this.inputvalue)
					this.inputvalue = ""
				},
				removevalue: function (index) {
					this.list.splice(index,1)
				}
			}
		})
	</script>

</body>
</html>

组件及传值

<!DOCTYPE html>
<html>
<head>
	<title>todolist2</title>
	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
</head>
<body>
	<div id="root">
		<ul>
			<todo-item
			 v-for="(item,index) of list"
			 :key="index"
			 :content="item"
			 ></todo-item>
			<input v-model="inputvalue"/>
			<button  @click="insertvalue">添加</button>
		</ul>
	</div>
	<script>
		// 全局组件 在任何vue实例中都可以直接使用
		// 组件通过props接受外部传入的参数
		Vue.component("todo-item", {
			props: ['content'],
			template: "<li>{{content}}</li>"
			// 每个组件都相当于一个vue实例
			// data: { 
			// },
			// methods: {

			// }
		})

		// 私有组件
		// var TodoItem = {
		// 	template: "<li>{{content}}</li>",
		// 	props: ['content']
		// }

		new Vue({
			el: "#root",
			// components: {
			// 	'todo-item': TodoItem
			// },
			data: { 
				inputvalue: "",
				list: []
			},
			// 如果实例中没有定义模板，那么他会寻找挂载点下的所有内容作为实例的模板
			// template: ...
			methods: {
				insertvalue: function () {
					this.list.push(this.inputvalue)
					this.inputvalue = ""
				},
				removevalue: function (index) {
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>

父子组件

<!DOCTYPE html>
<html>
<head>
	<title>todolist3</title>
	<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
</head>
<body>
	<div id="root">
		<ul>
			<todo-item
			 v-for="(item,index) of list"
			 :key="index"
			 :content="item"
			 :index="index"
			 @delete="handleDelete"
			 ></todo-item>
			<input v-model="inputvalue"/>
			<button  @click="insertvalue">添加</button>
		</ul>
	</div>
	<script>
		// 父组件以属性的方式向子组件传值，以@的方式监听子组件的发布
		Vue.component("todo-item", {
			props: ['content','index'],
			template: '<li @click="handleClick">{{content}}</li>',
			methods: {
				handleClick: function(){
					this.$emit('delete', this.index)
				}
			}
		})

		new Vue({
			el: "#root",
			data: { 
				inputvalue: "",
				list: []
			},
			methods: {
				insertvalue: function () {
					this.list.push(this.inputvalue)
					this.inputvalue = ""
				},
				handleDelete: function(index){
					this.list.splice(index,1)
				}
			}
		})
	</script>
</body>
</html>
何惜戈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《web开发： Vue 模板语法》
yexiangCSDN的专栏
02-10 162
一、Vue 模板语法 1. 模板语法概述 把数据填充到HTML标签中 1. 如何理解前端渲染？ 2. 前端渲染方式 ⚫ 原生js拼接字符串 ⚫ 使用前端模板引擎 ⚫ 使用vue特有的模板语法 3. 原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标 签中，前端代码风格大体上如右图所示 缺点：不同开发人员的代码风格差别很大，随着业 务的复杂，后期的维护变得逐渐困难起来 var d = data.weather; var info = document.getElemen
vue基础语法——表单绑定语法、计算属性、侦听器、过滤器、vue生命周期
12-09
对vue基础语法一些简单的总结和案例，适合新手小白哦~
Web核心技术前端框架VUE入门
helpluozhao123的博客
01-21 2535
1，VUE 1.1 概述 Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。 我们之前也学习过后端的框架 Mybatis ，Mybatis 是用来简化 jdbc 代码编写的；而 VUE 是前端的框架，是用来简化 JavaScript 代码编写的。前一天我们做了一个综合性的案例，里面进行了大量的DOM操作，如下 学习了 VUE 后，这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢？ ==基于MVVM(Model-View-ViewModel)思想，实现数据
Vue入门——初步了解
秋书一叶的博客
11-25 1799
Vue的简单介绍及快速入门
Vue入门——基础语法
qq_41108186的博客
03-04 354
原文链接 Vue入门——基础语法 Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 Vue的优势 对于前端开...
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
VUE入门（一）——基础语法
a549654065的博客
03-15 1446
VUE-快速入门 1.1 VUE 基本认识 1.1.1 官网 1) 英文官网: https://vuejs.org/ 2) 中文官网: https://cn.vuejs.org/ 1.1.2 介绍概述 Vue.js（简称为Vue）是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架。所谓 单页Web应用（single page web appl...
vue入门——webpack配置
魔鬼的归宿
03-19 7134
从零开始搭建Vue 2 环境
VUE基础——vue入门、axios、组件基础 、路由的基本使用、脚手架项目搭建
菜鸟的博客
07-25 207
VUE入门
Vue基础入门——概述+语法
weixin_45044097的博客
02-13 238
文章目录Vue1 概述1.1 vuejs入门1.2 MVVM模式2 语法3 生命周期4 axios的ajax异步请求5 综合案例 Vue 1 概述 1.1 vuejs入门 Vue.js 是一个构建数据驱动的web界面的渐进式框架。目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。易上手，便于第三方库或既有项目整合。 https://cn.vuejs.org/ 1.2 MVVM模式 M...
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
Web开发——Vue + Spring Boot 项目（一）
01-07
在看了Evan-Nightly大佬的博客之后发现一直没有系统的写过或者说记录过一些项目从搭建到完成直到使用的一个过程，所以决定写一个系统的过程记录一下，在学习的过程中搭建一个web前后端分离项目。 选用 Vue.js + ...
14_JavaWeb——Vue配套资源
05-09
此资源与我的博客14_JavaWeb——Vue中的案例配套，使用Vue简化了数据的查询和添加功能，希望能够有所帮助
前后端分离的web项目——餐厅后台管理系统——vue2+Django+mysql.zip
最新发布
03-08
—— 对于学习和实践，选择合适的项目和资源确实是一种有效的方式。 在进行毕业设计、课程设计或大作业时，选择具备学习借鉴价值的项目可以帮助你理解和应用所学知识，同时也可以通过修改和扩展来实现其他功能。 ...
H5——CSS
何惜戈
10-09 4103
CSS 即层叠样式表，主要用于对页面的装饰。  使HTML专注于网页的内容，CSS专注于网页的表现  提供了丰富的格式化功能  可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式 CSS与浏览器  并不是所有的CSS的样式都被浏览器支持  不同的浏览器对CSS的实现有细微的不同，需要特别注意 html中引入CSS的方法 CSS基本语法 基本选择器 CSS中长度单位的定义...
H5——html
何惜戈
10-08 2361
一个功能完善的web页面，通常由html 、css、与 js 构成。他们描述了网页的结构，样式以及功能。 HTML 即超文本标记语言，是一种用来制作超文本文档的简单标记语言，是制作网页的最基本语言，可以由游览器执行。 html基本结构如下： &amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;
CSS——行内元素间的默认边距
何惜戈
12-13 1906
简单写一个导航栏 &lt;style type="text/css"&gt; * { margin: 0px; padding: 0px; } #daohang { height: 40px; width: 100%; pa...
项目中常用接口收集
何惜戈
06-25 1489
金融类： 获取银行列表接口（含别名及图标） https://ab.alipay.com/i/yinhang.htm ！ps：需要手动爬 卡号验证（通过卡号获取对应行） https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=6225680421001165184&amp;amp;amp;cardBinCheck=true 汇率转换接...
vue2语法升级到vue3语法工具
05-20
Vue 2 和 Vue 3 的语法有很多不同，虽然可以手动逐步升级，但是使用工具可以更加方便和高效。以下是一些工具： 1. Vue CLI ：Vue CLI 是一个官方提供的命令行工具，可以快速创建 Vue 项目，并且支持 Vue 2 和 Vue 3...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值