前端主流框架：vue react angular
Vue 特点 组件化开发、数据驱动（mvvm）
Vue虚拟dom是借鉴react的
渐进式框架：
主张的少：没有那么多的条条框框
两种开发模式：
1.在HTML中书写
2.脚手架开发
Vue的基本指令
v-bind 绑定属性 简写是 ：
v-clock 解决页面初次加载数据模板数据没有渲染问题，说白了就是说看不到双花括号
例
v-html 解析时会解析标签
v-text 不会解析标签
v-model 双向绑定 表单指令
v-if v-if="true" 显示DOM v-if=" false" 隐藏DOM
v-else 与v-if一起使用
v-on 绑定事件 简写为@
v-if与v-show的区别
v-if 的特点：每次都会重新删除或创建元素 v-if 有较高的切换性能消耗
v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式。v-show 有较高的初始渲染消耗
ref与$refs
获取原生dom节点 ref
在标签中写ref=‘ ‘ 获取到的是DOM属性
$refs.‘变量名‘.classname=" " 可以将类名加入到里面
Nodejs中解决跨域问题除了那一串长代码，还可以用一个插件
npm install cors --save
然后在app.js中调用
const cors = require（‘cors’）
app.use(cors())
app.use(express.json())//获取json格式过来的数据
const express = require(‘express‘) const app = new express() const cors = require(‘cors‘) app.use(cors()) app.use(express.json()) // 获取json格式过来的数据
Vue在操作时，操作的是虚拟dom。
虚拟DOM是在HTML页面加载出来之前生成js代码，进行解析，如果在操作DOM时，不是直接修改DOM，是修改生成的js代码，并再进行页面渲染。
Vue操作指令 v-for
不仅可以用来遍历数组，还可以用来遍历对象
遍历数组用法： v-for="(item ,index) in 数组名"，item是值，index是索引
遍历数组对象： v-for="(item ,index) in 对象名"，item是值，index是索引
遍历之后可以将值和索引放在相应的位置。
例如写选项卡的选项：
<div id="app">
<ul>
<li v-for="(item, index) in list" :class="{‘active‘ : current==index }" @click="change(index)">{{ index }} ----- {{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
list: [1, 2, 3],
flag: true,
current: 0,
},
methods: {
change(index){
this.current = index
}
</script>
上述代码显示的结果如下
可以点击更换样式
遍历对象并添加点击事件
<div id="app">
<input type="text" v-model="username" placeholder="请输入名字"> <button @click="add">添加</button>
<ul>
<li v-for="(item,index) in list" :key="item">
<!-- 遍历完对象，利用每个对象的属性相对应的值进行显示 -->
<input type="checkbox"> {{ item.id }}---{{ item.name }}---{{ item.age }}
</li>
</ul>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
username:‘‘,
list: [
{ id:1, name:‘马云‘, age:60},
{ id:2, name:‘黄峥‘, age:40},
{ id:3, name:‘马化腾‘, age:48},
{ id:4, name:‘孙正义‘, age:60}
]
},
methods: {
add() {
this.list.unshift({
id: Math.floor(Math.random()*100),
name: this.username,
age: Math.floor(Math.random()*100),
})
this.username = ‘‘
}
}
})
</script>
上述代码中的key，相当于一个标记，在dom发生变化时，可以根据标记来记录相应的值。
无论怎么添加dom，选中的仍然是之前标记的1--马云--60
v-for循环对象：
<!-- val指属性的值 key指的是键名 i指的是索引--> <div id="app"> <div v-for="(val, key, i) in user"> {{ val }} --- {{ key }} --- {{ i }} </div> </div> <script> new Vue({ el: ‘#app‘, data: { user: { name: ‘张三‘, age: 30 } } }) </script>
循环的一个user对象。括号中的三个形参，第一个代表属性的值，第二个代表键名，第三个代表索引值。
多个vue应用的实例：用来解决在不想修改别人的代码时，多应用一个vue，在此基础上自己修改。
：class动态操作类名
1.数组方式写法
例： .red { color:red; } .fons { font-size: 100px; } <div id="app"> <div class="red fons">红色的</div> </div> <script> new Vue({ el: ‘#app‘ })
结果为：
2.在数组中写三元表达式
3.对象方式使用样式
对象写法语法:就是说class名字已经存在,然后在对象里面只需要对其赋值true或者false即可实现。