Vue和element第一节,环境的安装

 我的笔记   2019-06-19 13:34   587 人阅读  0 条评论

一、安装环境

废话就不多少了,我首先在电脑装了nodejs这是必不可少的。

https://nodejs.org/en/

安装完成之后,使用命令

nmp -v

就能看到版本号了

然后我需要把当前的环境镜像切换到淘宝的

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、vue-cli脚手架安装,及其新建项目

npm install -g @vue/cli
npm i element-ui -S
vue create my-app
cd my-app
vue add element

三、运行

到这里,基本上就可以新建项目了。

vue ui

四、结言

在此之前,我事先看了一个小时左右的vue入门文章。

并且自己写了一个小例子,

因为之前我从来没有真正关注过vue,仅仅停留在知道有这么个东西存在,项目中也从来没有用到过,

当我弄完这个小例子,我是真感觉到了vue的强大,双向绑定的优点,比传统的js/jq为基础写的框架体验太好了

<!DOCTYPE html>
<html>
<body>
	<div id="app">
	<div>
		<input type="text" v-model="message"/><br>
		<button @click="clickText">弹出文本框</button>
		<button @click="say('Hi')">sayHi</button>
	</div>
	<hr>
	<div>
		姓名:<input type="text" v-model="newPeople.name"/><br>
		年龄:<input type="text" v-model="newPeople.age"/><br>
		性别:<select v-model="newPeople.sex"/>
				<option value="Male">男</option>
				<option value="Female">女</option>
				<select><br>
		<button @click="createPeople">创建一个人</button>
		<button @click="say('Hi')">sayHi</button>
	</div>
	
	<table>
		<thead>
			<tr>
			<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(p,index) in people">
			<td>{{ index }}</td>
				<td>{{ p.name }}</td>
				<td>{{ p.age }}</td>
				<td>{{ p.sex }}</td>
				<td :class="'text-center'">
				<button @click="deletePeople(index)">删除</button></td>
			</tr>
		</tbody>
	</table>
	</div>
</body>
<script src="vue.js"></script>
<script>
	var vue=new Vue({
		el:"#app",
		methods:{
				clickText:function(){
					alert(this.message);
				},
				say:function(mes){
					alert(mes);
				},
				createPeople:function(){
					this.people.push(this.newPeople);
				},
				deletePeople:function(index){
					console.log("index"+index);
					this.people.splice(index,1);
				}
			},
		data:{
			message:"这是一个文本框",
			newPeople:{
				name:'',
				age:'',
				sex:''
			},
			people:[{
				name:'A',
				age:'10',
				sex:'男'
			},
			{
				name:'B',
				age:'11',
				sex:'女'
			},
			{
				name:'C',
				age:'12',
				sex:'男'
			},
			{
				name:'D',
				age:'13',
				sex:'女'
			},
			{
				name:'E',
				age:'14',
				sex:'女'
			}]
			}
			
		
	})
</script>
</html>


我的笔记博客版权我的笔记博客版权
本文地址:https://wdnote.com/post/706.html
版权声明:本文为原创文章,版权归 我的笔记 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情

还没有留言,还不快点抢沙发?