Vue 基础

Vue初始

Vue特点

1. Vue是一个MVVM框架

   • M 模型 model 数据
   • V 视图 view
   • VM C -> P -> VM 视图模型 -> 处理逻辑

2. 单向数据流

   • 数据由父级传递给子级

3. Vue是一个js渐进式框架

   • 渐进式： 越学越难
   • 想学的容易：加强基础

4. Vue是使用了虚拟DOM技术

5. Vue拥有便利性的指令

   • 指令： 操作dom的一种方式

6. Vue拥有组件系统

   • 组件： 组件是一个html、css、js的一个聚合体

Vue.js

1. 匿名函数
   • 大部分封装库都是这个函数
   • 自动执行
   • 解决了命名冲突
   • 独立作用域
   • 函数内变量使用结束之后会被GC【 垃圾回收机制 】消除
   • 符合函数式编程思维
2. vue使用有两种
   • vue可以模块化使用，可以使用npm安装，因为它使用了amd的define来定义模块
   • vue可以以标签化引入

Vue数据响应

1.称呼： 深入响应式原理 、 双向数据绑定原理

2.数据响应指的是： 当数据改变时，视图也会随之改变 ,当用户输入信息时，数据也改变了

3.Vue数据响应原理：

---- Vue是通过数据劫持来对数据进行响应式拦截的，通过使用es5的Object.defineProperty中的getter和setter来进行数据劫持的，这个数据劫持的对象是 Vue中的data选项， 如果在Data选项外定义数据，那么是不响应的。

Vue指令

指令的目的是做什么： 操作DOM

1.v-html： 转义输出，也就是可以解析 xml 数据
2.v-text： 非转义输出，也就是无法解析 xml 类型数据
3.v-bind

• 将数据和属性进行单向数据绑定： 将vue中数据赋值给属性值

<img v-bind:src="src" alt="">
<img :src="src" alt="">

• 类名绑定
  对象形式用法

  <p :class = "{ bg: true,size: true }"></p>
  <p :class = "{ bg: true,size: false }"></p>
  <p :class = "{ [classA]: true,[classB]: true }"></p>
  

  数组形式用法

  <p :class = "[ 'size','bg' ]"></p>
  <p :class = "[ classA,classB ]"></p>
  <p :class = "[ classA,classB,5>3?'a':'b']">  </p>
  
  

• 样式绑定
  对象形式用法

  <p :style = "{width: '100px',height: '100px',background: 'yellow></p>
  <p :style = "styleObj"></p>
  

  数组形式用法

  <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
  

- 条件渲染 1.v-if 2.v-else-if 3.v-else 4.v-show 条件展示

 <h3> 条件渲染 - 单路分支 </h3>
<p v-if = "flag"> A </p>

<h3> 条件渲染 - 双路分支 </h3>
<p v-if = "flag"> A </p>
<p v-else > B </p>

<h3> 条件渲染 - 多路分支 </h3>
<p v-if = "type === '美食'"> 美食 </p>
<p v-else-if = " type === '游戏' "> 游戏 </p>
<p v-else> 睡觉 </p>

<h3> 条件展示 </h3>

<p v-show = " showFlag "> 条件展示 </p>

• 列表渲染

• v-for 指令

<h3> 数组 </h3>
<ul>
    <li v-for = "(item,index) in arr" :key = " index ">
         -- index
    </li>
</ul>
<h3> 对象 </h3>
<ul>
    <li v-for = "(item,key,index) of obj" :key = "index">
         --  -- 
    </li>
</ul>
<h3> json </h3>
<ul>
    <li v-for = "item in json" :key = "item.id">
        <span> 商品名称：  </span>
        <span> 商品价格：  </span>
    </li>
</ul>

<h3> 循环嵌套 </h3>

<ul>
    <li v-for = "item in lists" :key = "item.id">
        <h3>  商品类型：  </h3>
        <ul>
            <li v-for = "item in item.type" :key = "item.id">
                <p> 制造商：  </p>
            </li>
            <!-- <li v-for = "ele in item.type" :key = "ele.id">
<p> 制造商：  </p>
</li> -->
        </ul>
    </li>
</ul>

<h3> 循环number / string  </h3>

<p v-for = "item in 10">  </p>
<p v-for = "item in 'abc'">  </p>