Vue入门1

1、引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、声明式数据渲染

JS代码：

var app = new Vue({
  el: '#msgDiv',
  data: {
    message: 'Hello word'
  }
})

HTML代码：

<div id="msgDiv">
  {{ message }}
</div>

运行结果：

3、数据双向绑定 v-model

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
			message:'<h1>Hello word</h1>'
		}
	})

HTML代码：

<div id="msgDiv" >
<p>【文本显示】{{message}}</p>
<p>【html显示】<span v-html="message"/></p>
<p>请输入信息：<input type="text" v-model="message"></input></p>
</div

运行结果：

补充：
（1）延迟修改 lazy：
即输入完成后再显示出来

<input type="text" v-model.lazy="message"></input>

（2）空格处理 trim:
即输入空格不会显示出来

<input type="text" v-model.trim="message"></input>

4、条件与循环

（1）条件 v-if与v-else-if：

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
			age:'16'
		}
	})

HTML代码：

<div id="msgDiv" >
<p>请输入年龄：<input type='number' v-model='age'/></p>
<p v-if='age>0 && age<18'>小屁孩！！！好好读书</p>
<p v-else-if='age>=18 && age<50'>青年人！！！好好努力奋斗</p>
<p v-else-if='age>=50 && age<250'>老年人！！！好好享受</p>
<p v-else>非人类！！！</p>
</div>

运行结果




（2）循环 v-for:

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		depts:[
		{'dno':10,'dname':'财务处','loc':'上海'},
		{'dno':20,'dname':'管理处','loc':'深圳'},
		{'dno':30,'dname':'教务处','loc':'北京'}
		]
		}
	})

HTML代码：

<div id="msgDiv" >
<table>
<thead><tr><th>部门编号</th><th>部门名称</th><th>部门位置</th></tr></thead>
<tbody>
<tr v-for='dept in depts'>
<td>{{dept.dno}}</td>
<td>{{dept.dname}}</td>
<td>{{dept.loc}}</td>
</tr>
</tbody>
</table>
</div>

运行结果：

5、数据翻转

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
			message:'Hello word'
		}
	})

HTML代码：

<div id="msgDiv" >
<h1>【原始消息】：{{message}}</h1>
<h1>【翻转消息】：{{message.split('').reverse().join('')}}</h1>
</div>

运行结果：

6、绑定处理

（1）事件绑定v-on

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		message:'努力学习！！！'
		},
		methods:{
		changemessage:function(newMessage){
		//	console.log（）表示在控制台显示的内容
		console.log('【原始数据】'+this.message);
		console.log('【更改后数据】'+newMessage);
		this.message=newMessage;
		}
		}
	})

HTML代码：

<div id="msgDiv" >
<p>{{message}}</p>
<button v-on:click="changemessage('争取保研！！！')">修改信息</button>
<!-- <button @click="changemessage('争取保研！！！')">修改信息</button> -->
</div>

运行结果：

其中v-on:可以写成@
【ES标准】
".stop”：阻止事件冒泡操作;.
“.prevent”：提交事件不进行页面的重新加载;
".self”：只在本元素上进行事件的触发;
“.once”：此事件只执行一次。
如：

<button @click.once="changemessage('争取保研！！！')">修改信息</button>

（2）数据绑定v-bind

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		       message:'加油学习，努力保研！！！'
		}
	})

HTML代码：

<div id="msgDiv" >
<image src="image/logo5.jpg" v-bind:title="message"></image>
<!-- <image src="image/logo5.jpg" :title="message"></image> -->
</div>

运行结果：

其中v-bind:可以写成:

（3）数组绑定：

JS代码：

app=new Vue({
		el:'#msgDiv',
		data:{
		id:'depttable',
		trPrefix:'dept-',
		inputdno:'',
		inputdname:'',
		inputloc:'',
		depts:[
		{'dno':10,'dname':'财务处','loc':'上海'},
		{'dno':20,'dname':'管理处','loc':'深圳'},
		{'dno':30,'dname':'教务处','loc':'北京'}
		]
		},
		methods:{
		reverseArray:function(){
		this.depts.reverse();
		},
		addArray:function(){
		this.depts.push({'dno':this.inputdno,'dname':this.inputdname,'loc':this.inputloc});
		this.resetArray(); 
		},
		resetArray:function(){
		this.inputdno='';
		this.inputdname='';
		this.inputloc='';
		},
		deleteArray:function(ind){
		this.depts.splice(ind,1)
		}
		}
	})

HTML代码：

<div id="msgDiv" >
<div id="deptForm" style="float:left;width:30%">
部门编号：<input type="text" v-model="inputdno"/><br/>
部门名称：<input type="text" v-model="inputdname"/><br/>
部门位置：<input type="text" v-model="inputloc"><br/>
<button @click="addArray()">添加数据</button>
<button @click="resetArray()">重置数据</button>
</div>
<div id="deptList" style="float:left;width:50%">
<table :id="id">
<thead><tr><th>索引</th><th>部门编号</th><th>部门名称</th><th>部门位置</th><th>操作</th></tr></thead>
<tbody>
<tr v-for='(dept,index) in depts' :id="trPrefix+dept.dno">
<td>{{index}}</td>
<td>{{dept.dno}}</td>
<td>{{dept.dname}}</td>
<td>{{dept.loc}}</td>
<td><button @click="deleteArray(index)">删除</button></td>
</tr>
</tbody>
</table>
<button @click="reverseArray()">反转数组</button>
<div>
</div>

运行结果：