Vue课堂笔记

VUE的第一天
什么是vue？？
前端框架的3大马车之一
1.angular 谷歌公司的 m（数据层）v（视图）c（控制器） 双向数据绑定
2.react Facebook 视图层的框架view 虚拟dom
3.vue 尤玉玺 双向数据+虚拟dom
（前两个是大型公司 最后是一个人来维护的）
按照诞生顺序来的
vue是一套用于构建用户界面的渐进式框架 逐层应用开发
入门难度最di？？？
为什么要学习vue？？？
<1>高效性
1.运行效率高 采用虚拟dom 减少真实dom的操作使项目的运行效率大大提高
2.开发效率高 采用组件化开发 将开发者的精力从dom操作解放出来，转移到数据操作上
<2>
dom操作是制约效率的关键，减少dom
修改内存中的数据（变量）消耗资源源源小于dom操作
虚拟dom 就是一个内存中的一个对象 该对象有一个特点和dom有相同结构

<div class='test' id='div1'>
  <p>你好</p>
  <span>呵呵</span>
</div> 

虚拟dom

obj={
tag:'div',
className:'test'
id:'div1'
children:{
tag:'p'
text:'你好'
}，

{
tag:'span',
text:'哈哈'
}
}

爱上vue？？？
什么叫做热爱 无时无刻的思念
写页面使用vue 抛弃原来二阶段的写法（直接操作dom）
vue的实例化
------下载步骤------
1.下载引入
2.找一个dom元素 这个dom元素要被vue控制
3.在js中实例化vue
一个页面上可以实例化多个vue实例 每一个实例绑定自己的元素 数据不通用
和实例绑定 就会用vue的语法进行处理

<div id="xixi">
{{name}}
</div>

	<!-- 没有实例绑定 和原始的页面没有区别 -->
<div id="haha">
{{name}}
</div>

创建一个vue的实例

let vm = new Vue({
el:"#xixi",
//将vue的实例和dom中的某一个元素进行绑定  
//绑定的元素以及子节点都会被实例进行处理
data:{  
//在data里的数据直接可以通过插值法{{表达式变量}} 进行渲染
name:'你好世界 你好vue'
}
})

数据绑定

<div id="app">
{{text}
<hr>
{{boolean}}
<hr>
{{obj}}
<hr >
{{null}}
<hr >
{{undef}}
</div>

虚拟dom’
将data里的数据在视图中使用(data)用户可以看见的 这个过程叫数据绑定,方向data->view
正常的数据类型都可以绑定并显示 特殊的null undefined 只能绑定 不能显示
{{}}插值法内部放的是变量和表达式

let vm = new Vue({
el:'#app',
data:{
text:'这里是文本',
boolean:false,
obj:{us:123,ps:456},
num:112,
null:null,
undef:undefined
}
})

指令 directive
条件渲染
v-if是一个指令 条件渲染 控制元素的渲染不渲染
<目标元素 v-if=“变量或者表达式”></目标元素>
指令后面是变量或者表达式
v-show 可以控制元素的显示隐藏display none 不管显示还是隐藏元素都是存在
v-if 控制元素的渲染 v-if为假 该元素不会创建

事件绑定
v-on+事件名=‘事件处理函数’ 事件名和原生js一样
onclick v-on：click
onblur v-on:blur
事件处理函数一定要写在实例 methods内部
默认参数（啥参数都不传参数）是事件对象
如果有其他参数 事件对象需要通过 $event 手动传递
简写方式
v-onclick ==@click
属性绑定
v-bind

src width height class id ....都叫属性 属性后面跟的是固定字符串 属性绑定让属性后面跟变量或者表达式 数据的响应式 数据变 页面自动变 不需要开发者操作dom 将开发者的精力从dom操作解放 转移到数据操作上