寒假里本来打算好好学前端技术,却又被各种事情占用了大概一半时间,再加上有时自己消极的思想与薄弱的自制力,导致一个寒假碌碌无为,内心很是惭愧。现在已经开学,新的学期必须要努力了,时间不等人,只争朝夕,进一寸有一寸的欢喜,加油!
vue基础知识点如下:
1.绑定属性 v-bind:xx=”属性名”
2.绑定事件 v-on:事件名=”方法名” 或者@事件名=”方法名”
{{ 属性名 }} , {{ }}里面的方法名后面必须加上(),而在事件里可以不加(),当传参时加()
3.点击事件click 双击事件dblclick 鼠标移动事件mousemove 键盘事件keyup
4.vue事件修饰符
阻止事件发生 v-on:事件名.stop=” ”即可
若事件发生仅仅一次 可用.once
若阻止默认程序 可用.prevent
5.<label> 标签为 input 元素定义标记。 label 元素不会向用户呈现任何特殊效果。
console.log() 方法用于在控制台输出信息。 测试时控制台需要可见 (浏览器按下 F12 打开控制台)。
6.双向数据绑定 v-model=”属性名”
7.耗时,大量搜索的时候用计算属性computed(是属性,{{ }}里面直接写函数名,不加括号)来优化。其他的用methods(函数名加括号),一个方法触发,其余方法均会触发。
8.动态绑定css样式
v-bind:clsss=”{ class名 :属性名}” v-bind:clsss=”计算属性中的函数名” v-on:click=”属性名=!属性名” 属性名的值为 true或false
9.v-if=”属性名” 值为真则显示,若为假则在源代码中不存在
v-else-if=”属性名” 这样两者只可以显示一个 而v-show=”属性名” 不管真假均存在
10.v-for数组与对象:
也可以放在<div> (代码中出现div)或<template> (代码中不会出现template)中
已经拿到单个对象,再获取它的关键词以及它的值 :
11.组件 component是方法,greeting是自己起的名称 <template>里面的内容放在一个根标签里面
CLI(命令行工具) 组件嵌套 在app.vue中
12.CSS作用域 scoped使得样式仅在本组件中局部使用
13.export default里面的name用 <>括起来
14.属性传值Props
父组件中:有了users这个数组数据 绑定一下 前面的users是自己起的
子组件中:
15.事件传值 子传父 this.$emit ( 事件名 , 事件内容(参数))
This.title是本组件中的title 后面的title是子组件传过来的
下面是一点代码
<!--整体是一个组件-->
<template><!--相当于html,视图部分-->
<!-- {{}}模板语法, 只可以是单行语句,只是文本,里面是变量 可写对象,字符串,三位运算符,函数名-->
<!-- 不可以放在html属性里 -->
<div class="hello">
{{ hello }}
<p>{{ flag }}</p> <!-- 可以放在html标签里 -->
<p v-html="hello"></p> <!--v-html可以辨别HTML元素 -->
<p v-text="hello"></p> <!-- v-text和{{}}类似,只是用来渲染文本内容,原文输出 -->
<span v-bind:class="ha">哈哈哈</span> <!-- 简写 : 引号里面的是对象值,对象的值可以改变-->
</div>
<div>
<!-- 除了div 类似p同级标签是不可以嵌套的-->
<p v-if="show"> <!-- if-else判断语句 用的对象值为true或false -->
<span>if true 我可以被看见</span>
<span>我可以被看见!</span>
<a href="#">点我</a>
</p>
<p v-else="show">else false我可以被看见</p>
</div>
<!--频繁切换的时候:v-show不管为真假都会加载,即在检察元素时可以看见此内容,
条件很少改变,删除还要再添加回来:v-if为假时既不显示也不加载 -->
<div v-show="showme">可以看见v-show</div>
<div class="list">
<ul> <!-- v-for列表渲染,值名 in 数组名 中间的内容是 {{值名}}-{{下标名}}
注意:内容中间的-仅仅是连接而已 值名是自己起的
都要加key对应每一个元素 方便以后去找,否则可能会引起警告-->
<li v-for="(value,index) in names " v-bind:key="index" > {{value}}-{{index}}</li>
</ul>
<ul>
<li v-for="(user,index) in users " v-bind:key="index" >
<span>{{user.id}}</span> <!--如果数组里一个元素有多个元素,则用点.来表示具体哪项内容-->
<span>{{user.name}}-{{index}}</span>
<span>{{user.age}}</span>
</li>
</ul>
</div>
<div>
<button @click="num+=1">点我自加</button>
<p>{{num}}</p>
<!-- v-on:时间监听,简写是 @ 可以是函数或者运算 函数不用加括号,直接写函数名 -->
<button v-on:click="handlerClick()">点我触发事件</button>
</div>
<div>
<p>{{ fangfa }}</p>
</div>
</template>
<!--交互部分-->
<script>
export default {
name: 'HelloWorld',
data () {
return {
num:1,
message:"hello",
hello:"<p>我是hello</p>",
flag:"我是flag",
ha:"ha1",
show:true,
showme:true,
names:["first","second","three"], /* 数组对象 注意:里面如果是字符串,一定要加上双引号!!!
对象之间用逗号隔开*/
users:[
{
id:111,
name:"one",
age:19,
},
{
id:222,
name:"two",
age:20,
},
{
id:333,
name:"three",
age:21,
}
]
}
},
methods:{ /*必须在英文状态下输入,里面的js隔开是分号,data里同级的是逗号*/
handlerClick(){
console.log(this);//this指向当前组件.
/*console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,
console.log()也可以接受换行符\n以及制表符\t。
console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。*/
//this来索引当前data中的数据
this.show=!this.show;
}
},
<!--计算属性,有缓存,发生改变时才会重新求值,而在方法methods中每次都需要重新计算-->
computed:{
fangfa(){
return this.message.split("").reverse().join("");
}
}
}
</script>