回顾Vue2---①

一晃眼三个月没写过博客了（感觉是开学比暑假在家还更懒了…）
开学到现在主要学了一下Vue2（b站黑马看了两百多集）简单写一下知识总结吧

一、
开篇
开头上来就教你配置webpack（前端工程化具体解决内容）
早就忘光了 后来发现其实可以先不用深究 直接用命令部署就可以了
然后就是vue的两个特性：数据驱动视图 and 双向数据绑定 （MVVM）

二、
Vue的基本使用
一开始没有直接教用Vue.js 写 而是先通过html css js原生来写
1.导入Vue库文件
2.创建Vue实例对象：

const vm = new Vue({
//要绑定的那个组件名
el:'#app'

//要渲染的数据
data:{
}

})

指令
1.内容渲染指令：
v-text 会覆盖原有内容

{{ }} 实际使用最多 普通占位符 不会覆盖内容

v-html 可以渲染带有标签的html语句

2.属性绑定指令
v-bind 可以为元素的属性绑定值 简写为 " : "

<input :type="a">

data:{
a:'text'
}

3.事件绑定指令
v-on 用来监听事件
常用的有 v-on:click v-on:keyup v-on:input
简写形式：@click
绑定的方法在Vue里的methods里面声明

<button v-on:click = "add">+</button>

data:{
a:0,
}
methods:{
add(){
    this.a += 1
}

事件还可以接收事件参数event（类比原生js的event事件对象）

4.双向绑定指令
v-model
一般用在input元素中 和data里的数据绑定 就可以实时改变数据内容

<input type = "text" v-model = "number" >

data:{
number:0,
}

5.条件渲染指令
v-if
v-show
实现原理不同：
v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

v-else 可以配合 v-if一起使用


6.列表渲染指令
v-for一般用于一些列表数据、数组中（比如说每件商品内容包括价格、数量等数据，就可以通过v-for依次渲染到视图上）

<ul>
    <li v-for = "item in list" :key="item.id">姓名是:{{item.name}}</li>
</ul>

data:{
   list:[
   {id:1,name:sc},
   {id:2,name:kd},
   ]
}

视图上就会生成两个li标签
姓名是：sc
姓名是：kd
item表示循环列表里的每一项
key相当于每项的一个标识 具有唯一性 只能是字符串或者数字类型 一般用列表中每项的唯一id作为key

然后就是还有过滤器 但是Vue3.x已经不用了 所以就暂时不回顾咯