初始Vue

最新推荐文章于 2022-08-03 00:19:58 发布

SHUIPING_YANG

最新推荐文章于 2022-08-03 00:19:58 发布

阅读量170

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/zhezhebie/article/details/90723690

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue初次接触，了解到以下几个概念：

双向数据绑定；
渐进式前端框架

1.双向绑定；

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<!-- 引入vue.js就可以开干了！ -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="vue-app">
		<h1>{{ name }}</h1>
	</div>
</body>
<script src="app.js"></script>
</html>

下面是app.js里面的内容：

var app = new Vue({
	el:'#vue-app',
	data:{
		'name':'阳水平的第一个vuejs应用。'
	}
});

效果如图：
在这里插入图片描述
打开console，可以进行动态的改变name的值：

app.name='代冰雪';

在这里插入图片描述

渲染数组：

复杂例子，动态增加减少：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="vue-app">
		<h1>{{ name }}</h1>
		<div>
			<ul>
				<li v-for="product in products">
					<!-- 商品信息 -->
					id:{{ product.id }} 
					description:{{ product.description }} 
					stock:{{ product.stock }}
					<span v-if="product.stock === 0">
						- Out of stock
					</span>

					<!-- 增加减少按钮 -->
					<button @click="product.stock += 1">增加</button>
					<button @click="product.stock += -1">减少</button>
				</li>
			</ul>
			
			<h3>Total quanty : {{ totalQuanty }}</h3>
		</div>
		<p>{{ greet() }}</p>
	</div>
</body>
<script src="app.js"></script>
</html>

app.js代码：

var app = new Vue({
	el:'#vue-app',
	data:{
		'name':'阳水平的第一个vuejs应用。',
		'products':[],
	},
	computed:{
		totalQuanty(){
			return this.products.reduce((sum,product)=>{
				return sum + product.stock;
			},0)
		}
	},
	// 参考fetch链接：https://www.cnblogs.com/liufei1983/p/8735031.html
	created(){
		fetch('http://192.168.0.136:88/api/product/index')
		.then(response => response.json())
	    .then(data => this.products=data.data.data)
	},
	methods:{
		greet:function() {
			return 'Good Morning!'
		}
	}
});