主要讲讲两大热门框架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） 缺点需要有网络
<!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>
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渲染的时候回 会略过 此指令