Vue 初识

主要讲讲两大热门框架Vue 和react

首先讲vue

01 vue?

1 渐进式javascript框架

渐进式允许你使用其他库和框架，进行慢慢的改变

2 MV*（特别神奇）通过数据来驱动视图

1 angular 最早的 MVC M model 数据 V view 视图 C control （逻辑）特别大（大型项目开发)

国企用 angular (angualr 1xx)

2 vue MVVM

M ---- model ---- 数据模型

V ---- view ---- 视图模型

VM ---- viewmodel --- 控制

3 react 只专注于视图

02 开发版本和生产版本

1 开办版本代码不压缩有注释内存大（开发）

2 生产版本带压缩没注释内存（上线）

03 使用vue

1 下载 npm i vue

2 直接下载

3 cdn 引入远程资源（cdn）缺点需要有网络

04 vue 初识

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <div id="box" class="app">
      <h1>{{str}}</h1>
      <h2>{{n+1}}</h2>
      <h3>{{sum(10)}}</h3>
      <h4>{{n>=5? 'hello wrold': n}}</h4>
      <button v-on:click="add">add</button>
      <!-- <h1>{{abc}}</h1> -->
    </div>
    <script>
      //   const abc = "我是abc";

    var vm =  new Vue({
        el: "#box", // 挂在元素  让挂在元素里面的代码 按照vue语法解析  xuan
        data: {
          str: "hello world123",
          n: 1,
        },
        methods: {
          sum(n) {
            return 10 * n;
          },
          add() {
            this.n += 1;
          },
        },
      });

      // 元素
      // hello world
      // MVVM
      // M  -- MODEL --- 数据模型  ---- data (后台数据存储data)
      // V  -- VIEW  --- 挂载元素  ---- div#app
      // VM
    </script>
  </body>
</html>

05 指令

1 v-text   渲染内容     ===     {{}}
2 v-html   渲染富文本   带有标签的字符串
3 v-for="(item,index) in / of  遍历的数据（可以遍历对象）"    item指的是元素  item  / item.属性
4  多层遍历  （找到遍历的数组）
5 v-if  [添加和删除dom]  不适用频繁的切换    
6 v-show  [display:none/block]  适用于频繁切换
7 v-else 必须要和v-if && 必须是相邻元素
8 v-on:事件绑定   @事件      
9 v-bind:属性   :属性
10 :style="{key：value,key1:value1,key2:三目运算}"
11 :class="三目运算 返回 类名"
   ：class="{类名 ： 表达式}"  表达式true添加   表达式false 不添加
12 v-model  双向数据绑定  （核心之一）
    1 input    v-model  代替 ：value
    2 input type=raido
      <label for="a1">
        <input id="a1" type="radio" v-model="sex" value="男" name="sex" /> 男
      </label>
      <label for="a2">
        <input id="a2" type="radio" v-model="sex" value="女" name="sex" /> 女
      </label>
    3  input type=checkbox   替代的   checked  返回true / false
    4  select   v-model  = "option value"
    
 13 v-cloak 配和 {{}}    style [v-cloak]{display:none}
     ps {{}} 如果加载vue过慢可能会产生  闪烁问题 {{n}}
 14 v-once   只触发一次
 15 v-pre vue渲染的时候回   会略过 此指令