发表于： 2019-09-27 23:01:58
1 847
今天完成了什么：
掌握VUE的绑定数、绑定对象、循环数组渲染数据、绑定属性 、绑定Html 、绑定class 、绑定style 、双向数据绑定 、Vue中的ref获取dom节点， 定义方法 、执行方法 、获取数据 、改变数据 、执行方法传值 、以及事件对象和生命周期函数和挂载组件；
遇到了什么问题：
生命周期函数：
<script>
/*
生命周期函数/生命周期钩子：
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数
*/
export default{
data(){
return{
msg:'msg'
}
},
methods:{
setMsg(){
this.msg="我是改变后的数据"
}
},
beforeCreate(){
console.log('实例刚刚被创建1');
},
created(){
console.log('实例已经创建完成2');
},
beforeMount(){
console.log('模板编译之前3');
},
mounted(){ /*请求数据，操作dom , 放在这个里面 mounted*/
console.log('模板编译完成4');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){ /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
}
</script>
另外在
加入scoped 可以使css只作用于当前组件；
挂载组件方法：
首先我们创建个vue也就是新建txt文档一样后缀改为。vue就行了。
然后回到app。vue里面引入组件import Todolist from。。
然后在export default里面挂载组件：
components：{}是必须写的，然后自定义“v-demo”：demo。v-demo是自定义的的名称，demo是组件名称，然后在上面template里面加入个div包括输入<v-todolist>,一定要有div包裹；
贴上今天demo的代码：
<template>
<div id="demo">
<div>我是demo组件</div>
<h1>我真的是{{ msg }}</h1>
<h2>{{obj.name}}</h2>
<br />
<hr />
<ul>
<!-- 循环一个数组 -->
<li v-for="item in list">{{item}}</li>
</ul>
<br />
<hr />
<ui>
<!-- 循环一个数组并且有多个对象； -->
<li v-for="item in list1">{{item.title}}</li>
</ui>
<br />
<hr />
<ui>
<!-- 循环一个数组并且有多个对象,对象里面又有数组； -->
<li v-for="item in list2">
{{item.cate}}
<ol v-for="news in item.list3">{{news.title}}</ol>
</li>
</ui>
<br />
<hr />
<!-- 绑定属性 -->
<div v-bind:title="title">鼠标描上去看一下</div>
<br />
<hr />
<br />
<hr />
<!-- 绑定动态属性 -->
<img
src="https://1.bp.blogspot.com/-GJgK5B_1FzU/XY0EX61BCCI/AAAAAAAAS7g/qrDWOz8dItkpQH4wa_Z8mFgE-zXcqcPDACNcBGAsYHQ/s640/googles-21st-birthday-6038069261107200.2-l.png" />
<img v-bind:src="url" />
<img :src="url" />
<br />
<hr />
<!-- 绑定html -->
<div>{{h}}</div>
<div v-html="h"></div>
<!-- 绑定数据的另外一种方法除了花括号{{}} 用v-text-->
<div v-text="msg"></div>
<br />
<hr />
<!-- v-bind:class的使用 -->
<div v-bind:class="{'red':flag}">通过动态class绑定属性</div>
<div v-bind:class="{'red':!flag,'blue':flag}">通过动态class绑定属性</div>
<br />
<hr />
<ul>
<!-- 实现改变某个列表选项的样式 这是默认-->
<li v-for="item in listdata">{{item}}</li>
</ul>
<br />
<hr />
<ul>
<!-- 实现改变某个列表选项的样式 循环数据第一个数据高亮 -->
<li v-for="(item,key) in listdata" v-bind:class="{'red':key==0,'blue':key===2}">{{key}}------{{item}}</li>
</ul>
<br />
<hr />
<!-- v-bind:style的使用绑定style -->
<div class="box">
<p>动态改变盒子的宽度</p>
</div>
<br />
<div class="box" v-bind:style="{'width':boxwidth+'rem'}">
<p>动态改变盒子的宽度</p>
</div>
<!-- 双向数据必须在表单里面引用，所以需要加入表单模块 -->
<br />
<hr />
<div>{{ rwr}}</div>
<input type="text" v-model="rwr" />
<!-- 定义一个方法 -->
<button v-on:click="getMsf()">获取表单里面的数据{{rwr}}</button>
<button v-on:click="setMsf()">设置表单里面的数据set{{rwr}}</button>
<br />
<hr />
<br />
<hr />
<!-- ref获取dom节点 -->
<input type="text" ref="userinfo" />
<button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
<br />
<hr />
<!-- 实现用ref改变box的颜色 -->
<div ref="box">我是盒子我要改变颜色</div>
<button v-on:click="getrefs()">点我之后改变盒子颜色</button>
<br />
<hr />
<br />
<br />
<br />
<!-- 通过@click获取data里面的msg数据 -->
<button @click="getMsg()">获取data里面的msg</button>
<!-- <button @click="setMsg()">改变data里面的msg</button> -->
<hr />
<br />
<br />
<br />
<!-- 请求数据 -->
<button @click="requesData()">请求数据</button>
<ul>
<li v-for="(item,key) in requesd">
{{key}}----{{item}}
</li>
</ul>
<button @click="requestData()">请求数据</button>
<ul>
<li v-for="(item,key) in listaa">
{{key}}--- {{item}}
</li>
</ul>
<hr />
<br />
<br />
<br />
<!-- 执行方法传值-->
<button @click="deletaData('111')"> 执行方法传值111</button>
<button @click="deletaData('222')"> 执行方法传值222</button>
<hr />
<br />
<br />
<br />
<!-- 事件对象 -->
<button data-dir='隔壁' @click="eventFn($event)">事件对象</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "隔壁老王",
obj: {
name: "张三"
},
list: ["宝马", "奥迪", "奔驰"],
list1: [{
title: "奥迪"
},
{
title: "奔驰"
},
{
title: "宝马"
}
],
list2: [{
cate: "国内新闻",
list3: [{
title: "珠江新闻"
},
{
title: "广东新闻"
}
]
},
{
cate: "国际新闻",
list3: [{
title: "纽约新闻"
},
{
title: "新加坡新闻"
}
]
}
],
title: "点我显示我是一个title",
url: "https://1.bp.blogspot.com/-GJgK5B_1FzU/XY0EX61BCCI/AAAAAAAAS7g/qrDWOz8dItkpQH4wa_Z8mFgE-zXcqcPDACNcBGAsYHQ/s640/googles-21st-birthday-6038069261107200.2-l.png",
h: "<h2>我是h2标题</h2>",
flag: true,
listdata: ["VUE", "angular", "Recat"],
boxwidth: "20",
rwr: "这是绑定好的值",
requesd: [],
listaa:[],
};
},
// 放方法的地方
methods: {
getMsf() {
// alert('vue方法执行')
// 获取方法里面的数据；
alert(this.rwr);
console.log(this.rwr);
},
setMsf() {
this.rwr = "我是在方法里设置数据"
alert(this.rwr);
},
getInputValue() {
// 获取red定义的demo节点
console.log(this.$refs.userinfo);
alert(this.$refs.userinfo.value);
},
getrefs() {
// 获取box节点，通过refs改变盒子颜色；
this.$refs.box.style.background = 'red'
},
getMsg() {
alert(this.msg)
},
requesData(){
for(var i=0;i<10;i++){
this.requesd.push('我是第'+i+'条数据');
}
},
requestData(){
for(var i=0;i<10;i++){
this.listaa.push('我是第'+i+'条数据');
}
},
deletaData(val){
alert(val)
},
// 事件对象可以获取srcElement当前dom节点。例如改变这个背景色
eventFn($event){
console.log($event);
// 事件对象可以获取srcElement当前dom节点。例如改变这个背景色
$event.srcElement.style.background='red';
// 事件对象还可以获取上面的自定义属性然后做传值；例如在上面html按钮加入data-aid='123'
console.log($event.srcElement.dataset.dir)
alert($event.srcElement.dataset.dir)
// $event.secEement
}
}
}
</script>
<style lang="scss" scoped>
.red {
color: red;
}
.blue {
color: blue;
}
.box {
width: 10rem;
height: 5rem;
margin: 0 auto;
background-color: pink;
p {
line-height: 5rem;
text-align: center;
}
}
</style>
收获了什么：
如上；
明天计划：
复盘；
返回列表
评论