vue (一) ---- vue介绍,数据双向绑定,指令学习

一.vue介绍

1. 渐进式js框架

    1. 渐进式

           全家桶 :  vue :  小项目

               vue-touter :  页面越来越多

                        vuex :   管理复杂的数据

    2.框架

1. 库: Lib 库就是一系列函数的集合,想完成什么就调用库中的某个方法    如:jquery   说明 : 开发人员说的算,开发人员起主导作用
2. 框架 : Framework  框架是一套完整的解决方案,框架中制定了一套规则,把代码放到合适的地方然后框架会在合适的时机主动调用开发人员的代码  如:vue   说明 : 框架起主导作用,框架说的算
3. 最大的区别  :   控制反转(谁起主导作用)       体量 : 框架>库

2. MVC 

M: Model =>数据层

V: View => 视图层

C : Controller => 逻辑控制层  ==> 相当于视图层和数据层之间的桥梁

3. MVVM:数据驱动图,数据是核心

M : Model => 数据层

V : View => 视图层

VM : viewmodel 视图模型    vm = vue实例

V <==(vm=vue实例)==>

二. 数据双向绑定演示

v-model : 数据双向绑定的语法糖

面试 : vue是单向的还是双向的 ? ?    单向的   

vue的双向绑定是通过  数据劫持  来实现的    Object.defineProperty()    有兼容问题

三. {{ }} 小胡子语法

1.作用 : 

   可以直接读取data里面的数据,显示在模板上

   data里的数据更新,模板上的数据也会跟着更新

2.注意点: 

•     {{ }} 只能放表达式   

1. 运算 :    {{ name+5 }}
2. 方法 :    {{ [1,2,3],join('-') }}
3. 三元 :    {{ true ? '真':'假' }}

• 不能放语句

1. if语句
2. for语句
3. while语句

四.指令学习

概念:directives

 都是一些特殊标记,特殊的属性

  作用 : 给html标签添加额外的功能

  特点 : 都是 v- 开头的

  底层 : 都是一些DOM操作

1.v-model (数据双向绑定)

作用 : v-model = 'name' 把input的value值和data里的name绑定在一起  一方改变另一方也会改变

场景 : 一般用在表单元素上(表单元素也是输入,改变value的值,)

注意点 : 用在不同的表单元素上,绑定的值也不一样    文本框 : 内容    多选框: 选中状态(ture/false)

2.v-text/v-html 

v-text  : innerText  不能识别标签

v-html : innerHTML   识别标签  

  v-text/v-html和{{}}  效果一样的   位置不一样    前者在头标签中, {{}}在双标签之间的内容部分

3.v-bind (属性动态绑定)  单向

完整格式 :<div v-bind:title="msg"></div>

缩写 : <div :title="msg"></div>

场景 :任意元素

注意点 :   title='msg'   -->  把msg字符串赋值给title

               :title='msg'   --> 把msg对应的值,赋值给title

操作样式 : 

1. 静态添加类 :<p class="red"></p>
2. 动态添加类 : <p :class='{red:true}'></p>
3. 行内样式 : <p :style='{color : red}'></p>

4. v-on(绑定/注册事件)

完整格式:v-on:click = 'fn'

缩写 :@click = 'fn'

事件函数  写在methods里面

• 事件中的this:  this === vm 

                      data里的数据   this.name

                      methods里的事件函数   this.fn

                      总结 : 标签 :  {{msg}}   事件中 : this.msg

•  传参   @click = 'fn(123)'   fn(num){ }
•  事件对象 : 不传参 : @click='fn'   fn(e,num){ }
•                     传参 : @click='fn($event,123)'   fn(e,num){}

5. v-for  遍历数据(数组)根据数组元素的个数创建对应个数的(指定所在的)标签

1. 遍历数组  v-for = '(item,index) in list'   item对应的元素    index索引
2. 遍历对象  v-for = '(item,key) in obj '     item属性值           inde 索引 
3. 遍历数字  v-for = 'i in 100 '