vue介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑
定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}} <!--vue的插值表达式-->
<!--三目运算符-->
{{true?"yes" : "no"}}
<!--数学运算-->
{{num * 2.11}}
<!--不支持插值表达式-->
<!--{{var a = 1;}}-->
</div>
</body>
<script>
//view model
// 创建vue对象
new Vue({
el:"#app", //由vue接管id为app区域
data:{
message:"hello Vue" ,//action:此处不要加分号!
num:100
}
});
</script>
</html>
- v-on:click (@click)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
<button @click="fun1('vue-v-on')" >vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"hello vue"
},
methods: {
fun1: function (msg) {
alert("hello");
this.message = msg;
}
}
});
</script>
</html>
- v-on:keydown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
vue:<input type="text" v-on:keydown="fun($event)">
<hr/>
传统js:<input type="text" onkeydown="showKeyCode()">
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods: {
fun:function (event) {
// $event是vue中的事件对象 和我们传统js的event对象是一样的
var keyCode = event.keyCode;
if (keyCode < 48 || keyCode > 57) {
//不起作用
event.preventDefault();
}
}
}
});
//传统的键盘按下时间
function showKeyCode() {
var keyCode = event.keyCode;
if (keyCode < 48 || keyCode > 57) {
//不起作用
event.preventDefault();
}
}
</script>
</html>
- v-on:mouseover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
width: 980px;
height: 200px;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
</div>
<!--<div onmouseover="divMouse()" id="div">-->
<!-- <textarea onmouseover="textMouse()">这是文件域</textarea>-->
<!--</div>-->
</body>
<script>
//view model
new Vue({
el: "#app",
methods: {
fun1:function () {
alert("鼠标停在div上");
},
fun2:function (event) {
alert("鼠标悬停在textarea上");
event.stopPropagation();
}
}
});
//传统的鼠标移动事件
function divMouse() {
alert("鼠标移动到了div区域");
}
function textMouse() {
alert("鼠标移动到了text域");
event.stopPropagation(); //防止传播
}
</script>
</html>
- v-on:事件修饰符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>v-on:事件修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<form action="http://www.itheima.com" method="post" @submit.prevent >
<input type="text">
<input type="submit" value="提交">
</form>
<!-- <form action="http://www.itheima.com" onsubmit="return checkForm()">
<input type="submit" value="提交">
</form>-->
</div>
</body>
<script>
//view model
new Vue({
el:"#app"
})
//传统的js方式
function checkForm() {
alert("submit success!");
return true;
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:按键修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="fun1" /><br>
<input type="text" @keyup.space="fun2"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
methods:{
fun1:function () {
alert("你按下了回车!")
},
fun2:function () {
alert("你按下了空格!")
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-text与v-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div v-text="message" ></div>
<div v-html="message"></div>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data: {
message:"<h2>传直播</h2>"
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="user.username"><br>
<input type="password" v-model="user.password"><br>
<input type="button" value="获取" @click="fun"/>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"",
password:""
}
},
methods:{
fun:function () {
alert(this.user.username + " " + this.user.password);
this.user.username="liBo";
this.user.password="123";
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-bind上的使用在html的属性中用</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">传智播客</font><hr/>
<font size="5" v-bind:color="ys2">黑马程序员</font>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
ys1:"red",
ys2:"blank"
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历数组</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list">{{"索引:" + index + " 值:" + item}}</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
list:[1,2,3,4,5]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key) in product">
{{key}} ==== {{value}}
</li>
</ul>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
product:{
id:1,name:"电视",price:1234
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for遍历对象</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>序号</td>
<td>名称</td>
<td>价格</td>
</tr>
<tr v-for="p in products">
<td>{{p.id}}</td>
<td>{{p.name}}</td>
<td>{{p.price}}</td>
</tr>
</table>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
products:[
{id:1,name:"qiqi",price:111},
{id:2,name:"tiantit",price:999}
]
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<span v-if="flag">传智播客</span>
<span v-show="flag">itcast</span>
<button @click="toggle">切换</button>
</div>
</body>
<script>
//view model
new Vue({
el: "#app",
data: {
flag: false
},
methods: {
toggle: function () {
this.flag = !this.flag
}
}
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vuejs生命周期</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function() {
console.log(this);
showData('创建vue实例前', this);
},
created: function() {
showData('创建vue实例后', this);
},
beforeMount: function() {
showData('挂载到dom前', this);
},
mounted: function() {
showData('挂载到dom后', this);
},
beforeUpdate: function() {
showData('数据变化更新前', this);
},
updated: function() {
showData('数据变化更新后', this);
},
beforeDestroy: function() {
vm.test = "3333";
showData('vue实例销毁前', this);
},
destroyed: function() {
showData('vue实例销毁后', this);
}
});
function realDom() {
console.log('真实dom结构:' + document.getElementById('app').innerHTML);
}
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
//vm.message = "good...";
vm.$destroy();
</script>
</html>