<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue基础</title>
<style type="text/css">
/*script引入放入顶部不会有这种情况*/
/*解决script引入放在下面 每次刷新时 变量和输出闪现的问题 anjularjs里面可以解决 这里这种解决不了 最好还放上面 */
[v-clock]:{
display: none;
}
.red{color: orangered;}
.green{color: green;}
</style>
</head>
<body>
<!--这一点是我们的view-->
<!--用class id 标签 都可以-->
<div id="myApp">
<span v-clock>{{str}}</span>
<!--可以解析标签-->
<div v-html="htmls">{{htmls}}</div>
<!--解析文字-->
<div v-text="htmls">{{htmls}}</div>
<div>{{fun()}}</div>
<div>{{bol?"男":"女"}}</div>
<!--v-model-->
<input type="text" v-model="htmls"/>
<!--v-if-->
<div v-if="yes">我是yes</div>
<!--DOM不加载-->
<div v-if="no">我是no</div>
<div v-if="age>25">{{age}}</div>
<!--规定v-else上面必须有v-if-->
<div v-else>111111</div>
<div v-if="age>20">大于20的年龄是:{{age}}</div>
<div v-else-if="age>15">大于15的年龄是:{{age}}</div>
<div v-else>年龄太小</div>
<div v-show="yes">我是v-show</div>
<!--DOM加载但是不显示-->
<div v-show="no">不显示v-show</div>
<!--v-for-->
<ul>
<li v-for="a in numArr">{{a}}</li>
</ul>
<ul>
<li v-for="(a,b,c) in numArr">内容为:{{a}}下标为:{{b}}</li>
</ul>
<ul>
<li v-for="(a,b,c) in objArr">内容为:{{a}}下标为:{{b}}{{c}}</li>
</ul>
<li v-for="(a,b,c) in obj">键:{{b}}值:{{a}}索引为:{{c}}</li>
</ul>
<!--v-bind-->
<!--v-bind的缩写是:冒号-->
<img v-bind:src="urls" alt="陈都灵图片" :data-id="bol?'男':'女'" :data-fun="fun()"/>
<!--动态改变class名-->
<div class="red" :class="{green:yes}">属性控制指令</div>
<!--v-on-- 的缩写为@>
<!--需要传参的时候加(参数),不需要参数的时候不加()-->
<button v-on:click="show">提交</button>
<!--$event当前点击的对象-->
<button @click="tan($event)">传参</button>
<!--键盘事件-->
<input type="text" @keydown="keycode($event)" />
<!--升级版-->
<input type="text"@keydown.32="kong" />
点击up键:<input type="text" @keyup.up="kong" />
点击enter键:<input type="text" @keyup.enter="kong" />
<!--v-pre - 原样输出{{}里的内容 不解析-->
<div v-pre>{{str}}</div>
<!--v-once 只渲染一次 不会再被更改-->
<div v-once>{{once}}</div>
<div>{{once}}</div>
<input type="text" v-model="once" />
</div>
</body>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//这一点是我们的view-model
new Vue({
//和id关联起来
el:"#myApp",
//初始化阶段 通常放属性
data:{
str:"hello vue,最后一个框架了",
htmls:"<h1>一级标题</h1>",
bol:false,
yes:true,
no:false,
age:20,
numArr:[2,4,6,3,6],
objArr:[{name:"binbin",age:18},{name:"航航",age:20}],
obj:{name:"binbin",age:18},
urls:"https://wx3.sinaimg.cn/mw690/0066ichXly1fsumwwffn4j30v813y4qp.jpg",
once:"只输出一次"
},
//DOM加载完执行 通常mehtod里面放函数
methods:{
//定义方法
fun:function(){
return "vue.js"
},
show:function(){
alert(1);
},
tan:function(a){
console.log(a);
},
keycode:function(e){
console.log(e);
},
kong:function(){
console.log("点键了");
}
}
});
</script>
</html>
扫一扫
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
