Vue渐进（一）入门

最新推荐文章于 2022-07-30 21:50:31 发布

献丑

最新推荐文章于 2022-07-30 21:50:31 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue js html

本文链接：https://blog.csdn.net/this_break/article/details/111561978

版权

本文是一篇关于Vue.js的入门教程，由阿里P8尤雨溪创建。文章介绍了Vue作为渐进式js框架，强调简化DOM操作和响应式数据驱动。内容涵盖Vue的基本认识、入门示例、核心指令如v-text、v-html、v-on等，以及组件、Axios通信、计算属性、slot插槽和自定义事件等内容。

摘要由CSDN通过智能技术生成

索引

一、认识
二、入门
三、指令
- v-text
- v-html
- v-on
- v-show
- v-if
- v-bind
- v-for
- 键盘回车事件
- v-model
四、组件
五、Axios通信
六、计算属性
七、slot插槽
八、自定义事件内容分发

一、认识

官网：

https://cn.vuejs.org/

作者：

尤雨溪，据说现在是阿里P8

首先，官方说是渐进式js框架，对于后端程序员来说，我觉得渐进式的意思是指：可以通过操作很少的DOM甚至不需要操作DOM元素，就能轻易完成数据和视图的绑定。

它不推荐再使用jQuery

最后，抓住它三个关键词就行了：js框架、简化DOM操作、响应式数据驱动

二、入门

先把官网的例子看一看，入门肯定要写一遍hello world

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		  {
  { message }}
		</div>
	</body>
	<script>
		var app = new Vue({
    
		  el: '#app',
		  data: {
    
		    message: 'Hello Vue!'
		  }
		})
	</script>
</html>

效果：数据绑定上了

el的值就是css选择器，data里放数据

三、指令

v-text

作用：设置标签的文本值
简写：{ {}}
效果：它会完全替换掉里边的文本，{ {}}是这个指令的简写
所以：各有各的应用场景，要么完全替换，要么替换部分

		<div id="app">
			<h1 v-text="message">耗子尾汁</h1>
			<h1 v-text="info">耗子尾汁</h1>
			<h1>{
  {message}}耗子尾汁</h1>
		</div>

		var app = new Vue({
   
		  el: '#app',
		  data: {
   
		    message: '用户名：break',
			info: '用户名：java程序猿'
		  }
		})

v-html

作用：设置标签的innerHTML

		<div id="app">
			<p v-html="context"></p>
			<p v-text="context"></p>
		</div>

		var app = new Vue({
   
		  el: '#app',
		  data: {
   
		    context: "<a href='#'>一个a标签</a>"
		  }
		})

v-on

作用：给元素绑定事件
简写：@

		<div id="app">
			<input type="button" value="呆鸡" v-on:click="go" />
			<input type="button" value="划过" v-on:mouseenter="go" />
			<input type="button" value="双鸡" v-on:dblclick="go" />
			<input type="button" value="双鸡简写" @