什么是VUE？
1.什么是vue?
三大框架：react angule vue
官网：Vue.js
作者：尤雨溪
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
vue全家桶：vue+vue Cli+ vue Router + vuex +axios
版本：vue2（老项目） vue3（新项目）
2.特点
-
单页面应用
-
轻量级的框架
-
双向数据绑定
-
指令
-
组件化
-
客户端路由
-
状态管理
缺点：
-
单页面应用
-
SEO不友好
-
兼容性（IE9以上）
3.基础使用
1.环境
生产环境：
开发结束，项目上线 压缩 速度快
开发环境：
正常开发中 未压缩 用于学习和开发
2.使用
Document
{{str}} {{num}}
{{str}}
{{num+1}}
{{flag?className:str}}
注意点：
el挂载节点 将这个vue实例和作用节点范围关联起来
data数据对象 节点范围内使用到的数据
-
data中的数据可以在模板中通过插值表达式中显示{{}}
-
data中添加内容，就相当于为vue实例添加属性
-
data中的数据发生变化，页面会自动改变
总结：
vue生效，就必须创建一个vue实例，而且需要设置配置对象。
app容器中的代码依然符合html规范，不过是增加一些vue语法。
app容器里的代码被称为vue模板。
vue实例和容器是一一对应的。
真实开发中只有一个vue实例，并且会配合组件一块使用。
{{}}中可以书写js表达式，并且可以自动读取到data里对应的值。
扩展：
// 第一种写法
let vm = new Vue({
el: "#app",
// data: {
// num: 11111,
// }
data() {
return {
num: 111111,
}
}
})
// 第二种写法
// let vm = new Vue({
// data() {
// return {
// num: 111111,
// }
// }
// });
// vm.$mount('#app');data和el的两种写法：
1.el的两种写法：
（1）new Vue的时候配置el属性
（2）先创建实例，在后面通过$mount()方法绑定
2.data的两种写法：
（1）对象形式
（2）函数形式
注意：
由vue管理的函数，不能写箭头函数，一旦写了箭头函数，this指向就改变。
4.常用的指令
1.指令的概念
指令是vue给标签增加的新属性，以v-开头。
语法：
<标签 v-指令名=“变量/表达式”>
2.常用的指令
1.v-text
类似于innerText.
作用：向其所在的节点中渲染文本内容。
会覆盖节点中原有的内容。
{{str}}
2.v-html
解析HTML字符串，类似于innerHTML.
作用：向其所在的节点中渲染html结构内容。
会覆盖节点中原有的内容。
{{str}}
{{html}}
3.v-bind
作用：让vue可以识别HTML原有的属性支持，渲染变量或表达式，单向的数据绑定，数据是data流向页面。
语法：
<标签 v-bind:HTML原有的属性=“变量/表达式”>
简写
<标签 :HTML原有的属性=“变量/表达式”>
{{str}}
{{str}}
![]()
跳转4.v-if
作用：条件渲染 （条件不满足，节点不存在）
语法：
<标签 v-if="变量/表达式">
<标签 v-else-if="变量/表达式">
<标签 v-else="变量/表达式">
注意：必须紧邻着写。
上午
下午
晚上
{{html}}
5.v-show
作用：条件渲染 （条件不满足，节点隐藏） display
语法：
<标签 v-show="变量/表达式">
{{html}}
v-if和v-show的区别：
v-show无论条件成立不成立，节点都存在。
v-if条件成立,节点存在，条件不成立，节点不存在。
需要反复展示的内容使用v-show,渲染次数少的用v-if。
6.v-for
作用：渲染列表数据
语法：
<标签 v-for="值 in 数组">
<标签 v-for="(值，索引) in 数组">
<标签 v-for="(值，键) in 对象">
- 图书：{{item.bookName}}，作者：{{item.author}}
注意：双层嵌套，标识符不能重复。
v-if和v-for一般不在一起使用。当他们处于同一个节点时，v-for的优先级比v-if要高（vue2）。
添加key属性（key的值要保证是唯一）；
7.v-once
作用：只能绑定一次。数据变化，页面不会更新。
使用：
1.v-once所在节点在初次动态渲染后，就视为静态内容。
2.以后数据的改变就不会引起v-once所在的结构的更新，用于性能优化。
语法：
<标签 v-once>{{}}
8.v-on
简写为：@
1.不传参
语法：
<标签 v-on:事件=“事件函数名”>
{{str}}
{{str}}
2.传参
语法：
<标签 v-on:事件=“事件函数名(实参)”>
{{str}}
3.事件对象
语法：
<标签 v-on:事件=“事件函数名(实参,$event)”>
- {{item}}
选项卡案例：
4.事件简写
如果是一些简单的事件处理可以简写。
{{num=num<1?1:num}}