<!--导入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>
<!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>
<!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>
<!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>
<!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="width: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>
原文：https://www.cnblogs.com/lovershowtime/p/11658080.html