寒假里本来打算好好学前端技术，却又被各种事情占用了大概一半时间，再加上有时自己消极的思想与薄弱的自制力，导致一个寒假碌碌无为，内心很是惭愧。现在已经开学，新的学期必须要努力了，时间不等人，只争朝夕，进一寸有一寸的欢喜，加油！
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>
