1、引入vue.js
2. vue基本基本雏形
<!--导入vue-->
<script src="js/vue.js"></script>
<script>
new Vue({
el:'ccs选择器'
})
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
// =========基本vue的用法模板===========
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box',
data:{ //第二步展示数据
msg:'welcom to'
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}} <!--/第三 步 展示结果-->
</div>
</body>
</html>
3. v-model 指令 一般用于表单的双向数据绑定（v-model：把input的值和变量绑定了，实现）
v-model：把input的值和变量绑定了，实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
<style>
.cccc{
display: none;
}
</style>
</head>
<body>
<div id="app">
<div>
<input type="text" placeholder="姓名" v-model="username">
<input type="text" placeholder="年龄" v-model="age">
<input type="text" v-model="msg" class="cccc">
<input type="submit" value="添加" @click="add">
</div>
<div>
<table cellpadding="0" border="1">
<tr v-for="(item,index) in arr">
<td><input type="text" v-model="item.username"></td>
<td><input type="text" v-model="item.age"></td>
<td><input type="button" value="删除" @click="del(index)"></td>
<td><input type="button" @click="edit(index)" v-model="item.msg"></td>
</tr>
</table>
</div>
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
username:"",
age:"", //变量的初始化
arr:[],
msg:"编辑"
},
methods:{
add:function () {
this.arr.push(
{
"username":this.username,
"age":this.age,
"msg":this.msg
}
);
console.log(this.arr) //打印的是一个数组
},
del:function (index) {
this.arr.splice(index,1); //删除索引对应的哪一个值
},
edit:function (index) {
console.log(index);
if (this.arr[index].msg=="保存"){
// alert(this.arr[index].msg);
this.arr[index].msg="编辑";
}else{
this.arr[index].msg="保存";
}
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-model 指令 一般用于表单的双向数据绑定
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box',//放的是选择器
data:{ //第二步展示数据
msg:'welcome to haid'
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}} <!--/第三 步 展示结果-->
<br />
<input type="text" v-model="msg"> <!-- //v-model 指令-->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-model 指令 一般用于表单的双向数据绑定
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box', //放的是选择器
data:{ //第二步展示数据
msg:'welcome to haid',
msg2:'卧槽你你你你你',
msg3:true,
arr:['apple','bannna','orange','pera'],
json:{a:'apple',b:'hshshh',c:'wocooow'}
}
});
};
</script>
</head>
<body>
<div id="box">
{{msg}} <!--/第三 步 展示结果-->
<br />
{{msg3}}
<br />
{{msg2}}
<br/>
{{arr}}
<br />
{{json}}
<br/>
<input type="text" v-model="msg"> <!-- //v-model 指令-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg">
<input v-model="msg" value="this is test">
<p>{{msg}}</p>
<input type="button" value="点击变化" @click="change"> <!--事件绑定-->
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
// msg:"",
msg:"aaaaa"
},
methods:{
change:function () {
this.msg=512
}
}
});
</script>
</body>
</html>
4. v-for：根据变量的值来循环渲染元素 (循环-重复数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in arr" track-by="$index"> <!--//提高循环性能track-by='索引' 提高循环性能-->
{{val}}
</li>
</ul>
</div>
<script>
//循环：
// v-for="value in data"
//
// 会有重复数据？
// track-by='索引' 提高循环性能
//
// track-by='$index/uid
var vm=new Vue({
data:{
arr:['apple','pear','orange']
},
methods:{
add:function(){
this.arr.push('tomato');
}
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</div>
<script>
//循环：
// v-for="value in data"
//
// 会有重复数据？
// track-by='索引' 提高循环性能
//
// track-by='$index/uid
var vm=new Vue({
data:{
arr:['apple','pear','orange']
},
methods:{
add:function(){
this.arr.push('tomato','哦哦哦哦哦哦哦哦哦');
}
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-for ================= 循环================
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box', //放的是选择器
data:{ //第二步展示数据
arr:['apple','bannna','orange','pera'],
json:{a:'apple',b:'hshshh',c:'wocooow'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
<style>
ul li{
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in arr"> <!-- 对一个数组的循环 --> <!--循环方式四-->
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,index) in arr"> <!-- 循环方式三-->
{{ item }}:{{index}}
</li>
</ul>
<ul>
<li v-for="item in obj">
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,key,index) in obj"> <!--循环方式二-->
{{ item }}:{{ key }}:{{ index }}
</li>
</ul>
<ul>
<li v-for="item in obj2"> <!--循环方式一-->
{{ item.username }}
{{ item.age }}
{{ item.sex }}
</li>
</ul>
<div v-for="i in 8"> <!--循环8次，打印1 2 3 4 5 6 7 8 -->
{{ i }}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
arr:[11,22,33,34],
obj:{a:"张三",c:"李四",b:"王麻子",d:"王大拿"},
obj2:[
{username:"jason"},
{age:20},
{sex:"male"}
]
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-for ================= 循环================
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box', //放的是选择器
data:{ //第二步展示数据
arr:['apple','bannna','orange','pera'],
json:{a:'apple',b:'hshshh',c:'wocooow'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr"> <!--循环数组-->
{{value}} <!--//{{$index}} 是vue的索引-->
</li>
</ul>
<hr />
<ul>
<li v-for="aa in json"> <!--循环json数据-->
{{aa}} {{$index}} {{$key}} <!--//{{$index}} 是vue的索引--> <!--{{$key}}是获取 json数据中名-->
</li>
</ul>
<hr />
<ul>
<li v-for="(k,V) in json"> <!--循环json数据-->
{{k}} {{v}} {{$index}} {{$key}} <!--//{{$index}} 是vue的索引--> <!--{{$key}}是获取 json数据中名-->
</li>
</ul>
</div>
</body>
</html>
5. v-on:click 点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-for ================= 点击事件 v-on:click="" =============
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box', //放的是选择器
data:{ //第二步展示数据
arr:['apple','bannna','orange','pera'],
json:{a:'apple',b:'hshshh',c:'wocooow'}
},
methods:{ //事件方法methods
show:function (){
alert('holle，welcom');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="aa in arr">
{{aa}} {{$index}} {{$key}}
</li>
</ul>
<input type="button" value="按钮" v-on:click="show()"> <!--//v-on:click="show()"事件点击-->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue事件</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-for ================= 点击事件 v-on:click="" =============
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box', //放的是选择器
data:{ //第二步展示数据
arr:['apple','bannna','orange','pera'],
json:{a:'apple',b:'hshshh',c:'wocooow'}
},
methods:{ //事件方法methods
add:function (){
this.arr.push('orenger','welcome','to'); //这个this就表示 vm
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="add()"> <!--//v-on:click="show()"事件点击-->
<br />
<ul>
<li v-for="ss in arr">
{{ss}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue事件</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-for ================= 点击事件 v-on:click="" =============
window.onload=function (){
var vm=new Vue({ //第一步vue 一个实例
el:'#box', //放的是选择器
data:{ //第二步展示数据
arr:['apple','bannna','orange','pera'],
json:{a:'apple',b:'hshshh',c:'wocooow'}
},
methods:{ //事件方法methods
add:function (){
this.arr.push('orenger','welcome','to'); //这个this就表示 vm
}
}
});
};
</script>
</head>
<body> <!-- v-on:click/mouseout/mouseover/dblclick/mousedown.....-->
<div id="box"> <!-- 事件有mouserover mouseout mousedown-->
<input type="button" value="按钮" v-on:click="add()"> <!--//v-on:click="show()"事件点击-->
<br />
<ul>
<li v-for="ss in arr">
{{ss}}
</li>
</ul>
</div>
</body>
</html>
6. v-show 显示隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue事件</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//v-for ================= 点击事件 v-on:click="" =============
window.onload=function(){
new Vue({
el:'#box',
data:{ //数据
a:true
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="a=false"> <!--显示隐藏: v-show=“true/false”-->
<div style="100px; height:100px; background: red" v-show="a"> <!--v-show显示隐藏-- >
</div>
</div>
</body>
</html>
v-show：根据表达式的真假值来显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="pick">我是海燕</p>
<p v-show="temp">呼啦啦呼啦啦</p>
<p v-show="ok">你喜欢我吗?</p>
</div>
<script>
var vm = new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
// pick:true //显示
pick:false, //移除，用注释给替换了
// temp :true , //显示
temp :false, //隐藏
ok:true
}
});
window.setInterval(function() {
vm.ok =! vm.ok;
},6000) //1000代表1秒
</script>
</body>
</html>
7. $event 事件深入理解事件对象(事件冒泡)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
// =====================事件深入理解事件对象===$event=================
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (ev){
alert(ev.clientX);
}
}
});
};
</script>
</head>
<body>
<div id="box"> <!-- //$event事件对象-->
<input type="button" value="点击" @click="add($event)"/> <!--// @click 是 v-on:click的简写哈哈哈
--> </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
// =====================事件深入理解事件对象===$event=== 传参数==============
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (ev,b){
alert(ev.clientX);
alert(b);
}
}
});
};
</script>
</head>
<body>
<div id="box"> <!-- //$event事件对象-->
<input type="button" value="点击" @click="add($event,1111)"/> <!--// @click 是 v-on:click的简写哈哈哈
--> </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//事件冒泡
// =====================事件深入理解事件对象===$event=== 传参数==============
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (){
alert(1111111111111);
},
add2:function(){
alert(2222222222222222);
}
}
});
};
</script>
</head>
<body>
<!--事件冒泡哈哈哈哈--> <!--先弹出11111111 在弹出22222222-->
<div id="box">
<div @click="add2()">
<input type="button" value="点击" @click="add()"/>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//事件冒泡 阻止事件冒泡-----方法一
// =====================事件深入理解事件对象===$event=== 传参数==============
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (ev){
alert(1111111111111);
ev.cancelBubble=true; //阻止事件冒泡 就是不让2222222弹出 直接弹出11111111 方法一
},
add2:function(){
alert(2222222222222222);
}
}
});
};
</script>
</head>
<body>
<!--事件冒泡哈哈哈哈--> <!--先弹出11111111 在弹出22222222-->
<div id="box">
<div @click="add2()">
<input type="button" value="点击" @click="add($event)"/> <!-- 事件对象$event-->
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//事件冒泡 阻止事件冒泡-----方法二推荐使用
// =====================事件深入理解事件对象===$event=== 传参数==============
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (){
alert(1111111111111);
//ev.cancelBubble=true; //阻止事件冒泡 就是不让2222222弹出 直接弹出11111111 方法二
},
add2:function(){
alert(2222222222222222);
}
}
});
};
</script>
</head>
<body>
<!--事件冒泡哈哈哈哈--> <!--先弹出11111111 在弹出22222222-->
<div id="box">
<div @click="add2()">
<input type="button" value="点击" @click.stop="add()"/> <!--在这里用stop也可以阻止事件冒泡 不传事件对象$event -->
</div>
</div>
</body>
</html>
8. preventDefault() 阻止事件默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//===========默认行为==============原生的方法一=====
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (ev){
alert(1111111111111);
ev.preventDefault();//阻止事件默认行为 原生的
}
}
});
};
</script>
</head>
<body>
<!--事件默认行为哈哈哈哈-->
<div id="box">
<input type="button" value="点击" @contextmenu="add($event)"/> <!--//$event事件对象-->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基本雏形</title>
<script type="text/javascript" src="vue.js" ></script>
<script type="text/javascript">
//===========默认行为=============vue提供的方法=推荐=====
window.onload=function (){
var vm=new Vue({
el:'#box',
data:{
msg:'welcom to'
},
methods:{
add:function (){
alert(1111111111111);
//ev.preventDefault();//阻止事件默认行为
}
}
});
};
</script>
</head>
<body>
<!--事件默认行为哈哈哈哈--> <!-- vue提供的方法 -->
<div id="box">
<input type="button" value="点击" @contextmenu.prevent="add()"/> <!--prevent阻止默认行为-->
</div>
</body>
</html>
9. v-bind：绑定元素的属性并执行相应的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
<style>
.bk_1{
100px;
height: 100px;
background-color: silver;
}
.bk2_2{
100px;
height: 100px;
background-color: darkorange;
}
.bk_3{
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" v-bind:title="msg">腾讯</a> <!--绑定标题-->
<a href="http://www.baidu.com" title="啦啦啦">点我</a> <!--绑定标题-->
<div v-bind:class="bk"></div>
<div v-bind:class="bk2"></div>
<div :class="{bk_1:temp,bk_3:temp}">加油,吧</div> <!-- #temp一定是一个布尔值，为true是就使用bk_2,为false就不为他-->
<div :class="[bk2,bk3]"></div> <!--如果是多个类就用[bk1,bk2,],就显示两个类的样式-->
</div>
<script>
var vm = new Vue({
el:"#app",//表示在当前这个元素开始使用VUe
data:{
msg:"我想去腾讯上班",
bk:"bk_1",
bk2:"bk2_2",
bk3:"bk_3",
// temp: false,
temp: true
}
})
</script>
</body>
</html>
10. v-text：在元素当中插入值 插入html：v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{ 80+2 }}</p>
<p>{{ 20>30 }}</p>
<h1 v-text="msg"></h1>
<h1 v-html="hd"></h1>
<h1 v-html="str"></h1>
</div>
<script>
new Vue({
el:"#app", //表示当前这个元素开始使用vue
data:{
msg:"你好啊",
hd:"<input type='button' value='啦啦'>",
str:"你妹的"
}
})
</script>
</body>
</html>
11. 绑定claas属性 style添加属性--> 推荐使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//class属性
//属性比如说id style class src 等
// v-bind vue中获属性
new Vue({
el:'#box',
data:{
aa:'red' //这是绑定claas属性
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="[aa]">文字...</strong> <!-- -、//调用了 data中的数据-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//class属性
//属性比如说id style class src 等
// v-bind vue中获属性
new Vue({
el:'#box',
data:{
cc:'red',
aa:'blue' //这是绑定claas属性
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="[cc,aa]">文字...</strong> <<!-- -、//调用了 data中的数据-->-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//class属性
//属性比如说id style class src 等
// v-bind vue中获属性
new Vue({
el:'#box',
data:{
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="{red:true,blue:true}">文字...</strong> <!-- //使用布尔值来添加clas属性-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//class属性
//属性比如说id style class src 等
// v-bind vue中获属性
// 使用 JSON
new Vue({
el:'#box',
data:{
json:{
red:true,
blue:true
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :class="json">文字...</strong> <!--使用json来调用--><!-- -、//调用了 data中的数据-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
// <!--用style添加属性--> 推荐使用
new Vue({
el:'#box',
data:{
a:{
color:'red',
backgroundColor:'gray'
}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="a">文字...</strong> <!--直接添加方法-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
// ========= style属性 =========
el:'#box',
data:{
c:{color:'red'},
b:{backgroundColor:'blue'}
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<strong :style="[c,b]">文字...</strong> <!--用style添加属性-->
</div>
</body>
</html>
12. 模板 {{msg}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'abc'
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{*msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
// 模板:
// {{msg}} 数据更新模板也更新
// {{*msg}} 数据只绑定一次
//
// {{{msg}}} HTML转意输出
new Vue({
el:'#box',
data:{
msg:'abc'
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg">
<br>
{{msg}}<!--更新模板也更新-->
<br>
{{*msg}} <!-- 数据只能绑定一次但是不更新-->
<br>
{{{msg}}} <!----HTML转意输出 就是指html的关键符号转义输出-->
</div>
</body>
</html>
13. 获取属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//属性比如说id style class src 等
// v-bind vue中获属性
// v-bind vue中获属性的简写 :
new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<!--<img src="{{url}}" alt="">-->
<img :src="url" alt=""> <!--//这是获取属性的简写-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//属性比如说id style class src 等
// v-bind vue中获属性
// v-bind vue中获属性的简写 :
new Vue({
el:'#box',
data:{
url:'https://www.baidu.com/img/bd_logo1.png',
w:'700px',
t:'这是一张美丽的图片'
},
methods:{
}
});
};
</script>
</head>
<body>
<div id="box">
<!--<img src="{{url}}" alt="">-->
<img :src="url" alt="" :width="w" :title="t"> <!--//这是获取属性的简写-->
</div>
</body>
</html>
14. vue数据交互的三种形式 post get jsonp 三种形式 (vue-resource.js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
//vue数据交互的三种形式 post get jsonp 三种形式
/*vue 交互
使用 $http 就是 $http 的ajax对象
必须引用vue-resource.js框架 做交互*/
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.data);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
//get 获取文本数据
//vue数据交互的三种形式 post get jsonp 三种形式
/*vue 交互
使用 $http 就是 $http 的ajax对象
必须引用vue-resource.js框架 做交互*/
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.get('aa.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
//get发送数据 是给服务器发送
//vue数据交互的三种形式 post get jsonp 三种形式
/*vue 交互
使用 $http 就是 $http 的ajax对象
必须引用vue-resource.js框架 做交互*/
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.get('get.php',{
a:1, //数据
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
//post发送数据 是给服务器发送
//vue数据交互的三种形式 post get jsonp 三种形式
/*vue 交互
使用 $http 就是 $http 的ajax对象
必须引用vue-resource.js框架 做交互*/
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true //post数据要模拟一个json数据
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
//jsonp发送数据 是给服务器发送
//vue数据交互的三种形式 post get jsonp 三种形式
/*vue 交互
使用 $http 就是 $http 的ajax对象
必须引用vue-resource.js框架 做交互*/
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:'h'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
//jsonp发送数据 是给服务器发送
//vue数据交互的三种形式 post get jsonp 三种形式
/*vue 交互
使用 $http 就是 $http 的ajax对象
必须引用vue-resource.js框架 做交互*/
new Vue({
el:'body',
data:{
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:'a'
},{
jsonp:'cb'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
15. 过滤器(vue自带过滤 还有自定一过滤)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
//、、、、、、、、、、、、、过滤器 ············
window.onload=function(){
new Vue({
el:'#box',
data:{
}
});
};
</script>
</head>
<body>
<div id="box">
{{'welcome'|uppercase}} <!-- //uppercase 转换成大写哈哈哈-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//、、、、、、、、、、、、、过滤器 ············
new Vue({
el:'#box',
data:{
}
});
};
</script>
</head>
<body>
<div id="box">
{{'welcome'|uppercase}}<!-- //uppercase 转换成大写哈哈哈-->
<br>
{{'WELCOME'|lowercase}} <!-- //lowercase 转换成小写哈哈哈-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//、、、、、、、、、、、、、过滤器 ············
new Vue({
el:'#box',
data:{
}
});
};
</script>
</head>
<body>
<div id="box">
{{'WELCOME'|lowercase|capitalize}} <!--//lowercase 转换成小写哈哈哈 capitalize首字母大写-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//、、、、、、、、、、、、、过滤器 ············
new Vue({
el:'#box',
data:{
}
});
};
</script>
</head>
<body>
<div id="box">
{{12|currency}} <!--// currency钱的过滤器-->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.red{
color: red;
}
.blue{
background: blue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload=function(){
//、、、、、、、、、、、、、过滤器 ············
new Vue({
el:'#box',
data:{
}
});
};
</script>
</head>
<body>
<div id="box">
{{12|currency '￥'}} <!--中国钱的标志格式-->
</div>
</body>
</html>
16. vue下拉列表（百度）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',''
data:{
myData:[],
t1:''
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray{
background: #ccc;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(ev){
if(ev.keyCode==38 || ev.keyCode==40)return;
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
},
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now];
},
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now];
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray{
background: #ccc;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
},
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
},
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get()" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
.gray{
background: #ccc;
}
</style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(ev){
if(ev.keyCode==38 || ev.keyCode==40)return;
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1);
this.t1='';
}
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){
});
},
changeDown:function(){
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.t1=this.myData[this.now];
},
changeUp:function(){
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.t1=this.myData[this.now];
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="t1" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
<ul>
<li v-for="value in myData" :class="{gray:$index==now}">
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
</html>
