|
1 helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
message:'hi first Vue',
}
})
</script>
</body>
</html>
2vue之 v-if v-else v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>vue之 v-if v-else v-show</title>
</head>
<body>
<h1>vue之 v-if v-else v-show</h1>
<hr>
<div id="app">
<div v-if="islogin">登录成功</div>
<div v-else>登录失败</div>
{{message}}
<div v-show="isshow">vshow true时展示</div>
</div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
islogin:true,
isshow:true,
message:'Welcom to Vue',
}
})
</script>
</body>
</html>
3 vue之v-for
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id='app'>
<!--v-for循环普通数组-->
<ul><li v-for="(item,i) in list">序号{{i}}值是{{item}}</li></ul>
{{computed.sortItem}}
<br/>
<!--v-for循环对象数组-->
<ul><li v-for="(usera,i) in listObj"> Num{{usera.id}}姓名是{{usera.name}}</li></ul>
<br/>
<!--注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
<!-- <p v-for="(va,ke) in user">--键是--{{ke}} --值是--{{va}}</p> -->
<p v-for="(a,b) in user" >键是{{a}}值是{{b}} </p>
<br/>
<!-- in 后面我们放过数组、对象数组、对象，还可以放数字-->
<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
<p v-for="count in 8">这是第{{count}}次循环</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[100,88,23,4,52,6],
computed:{
sortItem:function(){
return this.list.sort();
}
},
listObj:[
{id:1, name:'zs1'},
{id:2, name:'zs2'},
{id:3, name:'zs3'},
{id:4, name:'zs4'},
{id:5, name:'zs5'},
{id:6, name:'zs6'},
],
user:{
id:1,
name:'托尼.贾',
gender:'男'
}
}
});
function sortnub(a,b){
return a-b;
}
</script>
</body>
4 vue之v-text v-html? 和绑定onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>v-text and v-html and onclick事件</title>
</head>
<body>
<h1>v-text and v-html</h1>
<hr>
<div id="app">
{{message}}
<span v-html="message"></span>
<br/><br/><br/>
得分{{count}}
<button v-on:click="jiafen" >加分</button>
<button @click="jianfen" >减分</button>
<input type="text" v-model="secondcount" v-on:keyup.enter="yejia" />
</div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
count:1,
secondcount:2,
message:'hi first Vue<a href="http://www.baidu.com">baidu</a>',
},
methods:{
jiafen:function(){
return this.count++;
},
jianfen:function(){
return this.count--;
},
yejia:function(){
this.count=this.count+this.secondcount;
}
}
})
</script>
</body>
</html>
5 vue之v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>v-model</title>
</head>
<body>
<h1>v-model </h1>
<hr>
<div id="app">
{{message}}<br/>
<input type="text" v-model="message">
<input type="text" v-model.lazy="message">
<input type="text" v-model.number="message">
<input type="text" v-model.trim="message">
<p>文本域绑定
<textarea rows="" cols="" v-model="message"></textarea>
</p>
<p>
多选框绑定
<input type="checkbox" v-model="ist">
<label for="aaa">{{ist}}</label>
</p>
<p>多选绑定值
<input type="checkbox" value="pang" v-model="name">
<input type="checkbox" value="dapang" v-model="name">
<input type="checkbox" value="xiaopang" v-model="name">
{{name}}
</p>
<p>单选按钮绑定
<input type="radio" v-model="sex" value="man">
<input type="radio" v-model="sex" value="woman">
{{sex}}
</p>
</div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
sex:'man',
message:'hi first Vue',
ist:false,
name:[]
}
})
</script>
</body>
</html>
6 vue之v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"
src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>v-bind</title>
</head>
<body>
<h1>v-bind</h1>
<hr>
<div id="app">
{{message}}
<p>
<img alt="" v-bind:src="tusrc"> <a :href="myhref">baidu</a>
</p>
<span :style="classaaa">hahahahah</span><br>
<span :class="classname">hahahahah</span><br>
<span :class="{classa:istrue}">hahahahah</span> <br>
<span :class="shuzu">hahahahah</span> <br>
<span :class="istrue?classA:classB">hahahahah</span>
<input type="checkbox" v-model="istrue">
</div>
<style>
.classa {
color: red;
}
.classb {
font-size:30px;
}
</style>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
classA:'classa',classB:'classb',
shuzu:['classa','classb'],
classname:'classa',
istrue:true,
classaaa:'font-size:50px;color:blue;',
myhref:'http://www.baidu.com',
tusrc:'https://i0.hdslb.com/bfs/face/c81969907b5c286b50d02400e7d54b13595f09bb.jpg@180w_180h_1c.webp',
message:'hi first Vue',
}
})
</script>
</body>
</html>
?7 vue之其他指令v-pre v-cloak v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>other指令v-pre v-cloak v-once </title>
</head>
<body>
<h1>other指令v-pre v-cloak v-once</h1>
<hr>
<div id="app" v-cloak>
<p v-once> {{message}}<br></p>{{message}}
<input type="text" v-model="message">
<span v-pre>{{message}}</span>
</div>
<script type="text/javascript">
var vu=new Vue({
el:'#app',
data:{
message:'hi first Vue',
}
})
</script>
</body>
</html>
|