Vue基础，数据绑定，事件绑定
<template><div id="app">
<!-- 1.{{msg}}绑定数据-->
<h2>你好vue--{{msg}}</h2>
<br />
这是一个根组件
<br />
<h3>{{obj.name}}</h3>
<br />
<hr />
<!--2.数组循环遍历-->
<ul>
<li v-for="(item,index) in list">
<!-- index获取索引值-->
{{index}}--{{item}}
</li>
</ul>
<!--2.1数组嵌套遍历-->
<ul>
<li v-for="item in list1">
{{item.cate}}
<ol>
<li v-for="cars in item.list">{{cars.title}}</li>
</ol>
</li>
</ul>
<br />
<hr />
<!--3.条件判断-->
<p v-if="no">现在你看到我了</p>
<p v-if="true">现在你看到我了</p>
<p v-if="ok">现在你看到我了</p>
<br />
<hr />
<!--4.数据绑定-->
<div v-bind:title="title">鼠标瞄上可以显示</div>
<img src="//www.baidu.com/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif" alt />
<img :src="src" alt />
<!--4.数据绑定v-bind:可以简写为:-->
<br />
<hr />
<!--5.html绑定-->
<div v-html="h"></div> <!--解析成html输出-->
<br />
<hr />
<!--6.class绑定-->
<div v-bind:class="{\'blue\':ok}">我是一个div :class控制</div>
<!--6.1.class绑定-->
<ul>
<li v-for="(item,index) in list" :class="{\'blue\':index==0}">
<!-- index获取索引值-->
{{index}}--{{item}}
</li>
</ul>
<br />
<hr />
<!--7.style对象绑定--> <!--也可以是内联样式-->
<div v-bind:style="styleObject">我是一个div :style控制</div>
<br />
<hr />
<!--8.双向数据绑定及事件绑定 -->
<h2>{{msg}}</h2>
<input type="text" v-model="msg" /> <!--input和h2里的msg值同时变化-->
<button v-on:click="getMsg()">获取表单里面的数据get</button> <!--v-on:可以简写为@-->
<button @click="setMsg()">设置表单的数据set</button>
<br />
<input type="text" ref="userinfo" />
<br />
<div ref="box">我是一个box</div>
<br />
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
<br /> <br />
<button @click=\'requestData()\'>请求数据</button>
<p>--------------------------------</p>
<ul>
<li v-for="item in list0"> <!--点击请求数据，在li里出现-->
{{item}}
</li>
</ul>
<button @click="deleteData(111)">执行方法传值111</button> <!--可添加事件及按键修饰符：@click.stop ... -->
<button data-aid="自定义的属性" @click="event($event)">事件对象</button>
<br>
<hr>
<!-- 9.todoLis待办事项t添加删除修改状态--> <!--用双向数据绑定-->
<input type="text" v-model="todo" @keydown="doAdd($event)"> <!--事件对象对enter键执行doAdd事件-->
<button @click="doAdd()">+增加</button>
<br>---------------------------------
<h2>进行中</h2>
<ul>
<li v-for="(item,index) in list3" v-if="!item.checked">
<input type="checkbox" v-model="item.checked"> {{item.title}}-- <button @click="doRemove(index)">-删除</button>
</li>
</ul>
<h2>已完成</h2>
<ul>
<li v-for="(item,index) in list3" v-if="item.checked">
<input type="checkbox" v-model="item.checked"> {{item.title}}-- <button @click="doRemove(index)">-删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "app",
data() {
//业务逻辑里面定义的数据,可以是属性，对象,数组。。。
return {
ok: true,
no: false,
msg: "你好vue",
obj: {
name: "Jack"
},
list: ["111", "222", "333"],
list1: [
{
cate: "汽车品牌",
list: [{ title: "大众" }, { title: "奥迪" }]
},
{
cate: "汽车品牌",
list: [{ title: "大众" }, { title: "奥迪" }]
}
],
title: "我是一个title",
src:
"//www.baidu.com/img/xinshouyedong_4f93b2577f07c164ae8efa0412dd6808.gif",
h: "<h2>我是h2</h2>",
styleObject: {
color: "red",
fontSize: "22px"
},
list0:[],
todo:\'\',
list3:[{
title:\'学习vue\',
checked:false,
}],
};
},
methods: {
/*放方法的地方*/
getMsg() {
// alert(\'vue方法执行了\');
//方法里面获取data里面的数据
alert(this.msg);
},
setMsg() {
this.msg = "我是改变后的数据";
},
getInputValue() {
console.log(this.$refs.userinfo);
this.$refs.box.style.background = "red";
//获取ref定义的dom节点
alert(this.$refs.userinfo.value);
},
requestData(){
for(var i=0;i<=4;i++){
this.list0.push(\'我是第\'+i+\'条数据。\');
}
},
deleteData(d){
alert(d);
},
event(e){
// e.srcElement 获取dom节点
e.srcElement.style.background=\'red\';
alert(e.srcElement.dataset.aid); //打印自定义属性的值
},
doAdd(){
//获取文本框输入的值 再把文本框的值push到list3 用对象来判断改变状态
this.list3.push({
title:this.todo,
checked:false
});
//push完之后初始化todo的值
this.todo=\'\';
},
doAdd(e){
if(e.keyCode==13){
this.list3.push({
title:this.todo,
checked:false
});
//push完之后初始化todo的值
this.todo=\'\';
}
},
doRemove(index){
// alert(index)
this.list3.splice(index,1);
},
}
};
</script>
<style lang="css">
.blue {
color: blue;
color: red;
}
*{
list-style: none;
}
</style>
以上是 Vue基础，数据绑定，事件绑定 的全部内容， 来源链接： utcz.com/z/376530.html
