关于Vue的简单学习

最新推荐文章于 2023-04-04 14:39:45 发布

苏福唉

最新推荐文章于 2023-04-04 14:39:45 发布

阅读量1.9k

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_52951579/article/details/122989850

版权

本文详细介绍了Vue.js的基础知识，包括Vue实例、条件渲染、列表渲染、事件处理、v-bind、v-model、组件、计算属性、插槽与自定义事件，以及结合Vue-cli、Webpack、vue-router和ElementUI进行项目构建。还涵盖了Vue项目中的异步通信、路由参数传递、嵌套路由、Vuex状态管理等内容，帮助读者全面理解并掌握Vue开发。

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

第一个Vue程序

v-if、v-else-is、v-else

第一个Vue程序

Vue官网

先要引入 vue.js，在官网复制 CDN ，或者下载 js 文件都行

<!DOCTYPE html>
<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>
		<script>
		var app = new Vue({
			// element 缩写，挂载元素
			el: "#app",
			data: {
				message: "Hello Vue!" 
			}
		})
		</script>
	</body>
</html>

v-if、v-else-is、v-else

具体作用和其他语言一样

		<div id="app">
			<h1 v-if="flag === 'awe'">Vue is awesome</h1>
			<h1 v-else-if="flag === 'no'">No no 👻</h1>
			<h1 v-else>Yes yes 🤡</h1>
		</div>
		<script>
		var app = new Vue({
			
			el: "#app",
			data: {
				// flag: "awe",
				// flag: "no",
				flag: "yes"
			}
		})
		</script>

v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

这里的 items 相当于 Java 中的数组，而 item 就相当于从数组中遍历出的对象，要使用其中的属性直接对象.属性即可

		<ul id="app">
			<li v-for="item in items">
				{
  {item.message}}
			</li>
		</ul>
		<script>
		var app = new Vue({
			
			el: "#app",
			data: {
				items: [
					{message: '小红'},
					{message: '小明'},
					{message: '小李'}
					]
			}
		})
		</script>

v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。以点击为例

		<!-- 点击按钮，弹出弹窗，显示 message 中的内容 -->
		<div id="app">
			<button v-on:click="func">按钮</button>
		</div>
		<script>
		var app = new Vue({
			
			el: "#app",
			data:{
				message: "Hello Vue"
			},
			methods:{
				func:function(){
					alert(this.message)
				}
			}
		})
		</script>

使用Axios实现异步通信

第一个Axios应用程序

现在前端伪造一段 json 数据

{
	"name": "百度",
	"url": "http://www.baidu.com",
	"page": 66,
	"isNonProfit": true,
	"address": {
		"street": "海定区",
		"city": "北京",
		"country": "中国"
	},
	"links": [
		{
			"name": "Google",
			"url": "http://www.geogle.com"
		},
		{
			"name": "Sougou",
			"url": "http://www.sougou.com"
		}
	]
	
}

使用 axios 来获取

		<div id="app">
			<div>
				名称：{
  {info.name}}<br>
				链接：{
  {info.url}}
			</div>
			<ul>
				<li v-for="link in info.links">
					<p>名称：{
  {link.name}}</p>
					<p>链接：{
  {link.url}}</p>
				</li>
			</ul>
		</div>
		<script>
		var app = new Vue({
			el: "#app",
			data(){
				return{
					info: {
						name: '',
						url: '',
						links: []
					}
				}
			},
			mounted() {
				axios.get('data.json').then(respose => this.info = respose.data)
			}
			
		})
		</script>

v-bind

我们可以在标签的任意属性前面加上 v-bind，这样我们就可以将值赋给标签的属性了

例如：让上面百度的链接可以点击

v-model

使用 v-model 来实现数据的双向绑定。注意：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

实现和表单的数据同步显示

		<div id="app">
			<input type="text" v-model="message"/>
			<p>Message is: {
  {message}}</p>
		</div>
		<script>
		var app = new Vue({
			el: "#app",
			data:{
				message: ""
			}
		})
		</script>

其他的 多行文本、单选按钮、复选框、选择框 的使用查看官网即可