一、构架图:![](https://i-blog.csdnimg.cn/direct/63adf475a67a4fefa33c39d4ddb6bd4f.png)
-
二、Vue是一个用于构建用户界面的渐进式框架,目前企业中流行的版本有两个
- Vue2——稳定1.最新长期稳定版 2.生态系统,文档系统完备3.过往案例项目支撑
- Vue3——趋势1 性能提升 =>1.2~2倍2 内核体积更小 =>10kb3 TS支持度更高4 组合式API,封装复用逻辑
-
三、关键点:
- 1. el :element的缩写, 表示的是当前vue要管理的页面元素是哪些, app必须挂载到双标签上, 而且是body和html除外
- 2. data :data表示数据,就是当前页面要用到的所有变量的声明区域, 支持JS中所有的数据类型,常用键值对 数组 对象
-
四、使用过程:
模板:const app = new Vue({ el:"#app", data: { //key:value格式的属性 }, methods:{ //页面需要调用的方法 }, created() { //当页面加载时,自动调用 } })
-
-
1.引入vue.js文件
-
2.定义一个vue对象
-
3.编写html页面,将页面和vue中的数据模型绑定
-
-
五、特殊方法:
-
页面赋值:v-html用于将指定变量的值渲染到页面上,如果变量值中有html语法,会进行解析
v-html:<span v-html="key"></span> -
双向绑定:v-model是双向绑定,用户在页面输入的内容 和 vue对象 中的变量 相互影响,目前v-model的可使用元素有:input、select、textarea
v-model: <input type="text" v-model="key" /> -
属性绑定::属性="key"对于HTML标签属性,如果想要动态传值,不能使用 {{ }} ,而应该使用专门的属性绑定语法
<img :src="key"> , <a :href="key">点击一下</a>- 标准语法:v-bind:属性名="Vue中的变量"
- 简写语法: :属性名="Vue中的变量"
-
列表遍历:v-for="(临时变量,索引) in 数组"。注意:遍历哪个标签,就要将这个指令当成属性写在谁哪个标签上
<tr v-for=(item,index) in key><td>{{item.xxxx}}</td><td>{{item.xxxx}}</td><td>{{item.xxxx}}</td></tr> -
条件判断:v-if / v-show 根据条件控制页面标签展示/不展示
<span v-if="score >= 60">及格</span> <span v-show="score < 60">不及格</span>- 语法:
- v-if 条件性的创建或者移除某些元素,判定为true时创建,判定为false移除(直接删除——用于登录后显示的昵称——更安全)
- v-show 条件性的显示或者隐藏某些元素,判定为true时显示,判定为false隐藏(隐藏不显示——用于频繁隐藏出现的标签)
- 注意:
- 1) v-if 一般用于要么显示,要么隐藏的场景;v-show用于频繁切换显示和隐藏的场景
- 2) v-if还可以配合v-else 以及v-else-if实现多分支条件判断,此时要注意三个标签中间不能有其它内容
- 语法:
-
事件绑定: @ 事件(click,blur,fouce,change) = "方法名" 事件绑定用于给页面元素添加事件,js支持的事件vue都支持
<button @ click="add()">按钮</button>- 标准语法 v-on:事件名="函数名"
- 简化语法 @事件名="函数名"
-