22-05-17 西安 Vue框架

框架和框架的3个特定

框架：就是半成品的项目，特定场景、特定问题、特定解决方案

• java中框架的本质是jar包加配置文件。jar包里放的是class文件
• js中框架的本质就是一个js 文件，用的时候要引入当前页面

思想的转变：编程式思想-声明式思想 【告诉框架要做什么，具体框架来做】

---

待安排

面向对象（oop）封装的是：一段连续的代码
aop 横向抽取，事务相关代码可以抽取出来

编程式事务到spring声明式事务，加一个注解。

---

Vue框架

相当轻量框架，轻量的意思：对原技术不造成影响。我们用的是Vue2

Vue环境准备：

1. Vue框架的js文件获取

   官网提供的下载地址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2. 创建空vue.js文件,将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

Vue入门案例：

Vue的使用步骤
1.引入vue.js
2. 在页面中设置挂载容器

3. 编写js代码
     3.1 创建vue对象，并设置属性 el,data...
4.在挂载容器范围(id是app的div里)，使用vue提供的方式读取vue数据

注意的问题：
1.body标签不能做为挂载容器
        为什么不把body设置为挂在容器?  官网不建议我们用。
2.绑定挂载容器时建议使用id属性设置
        也可以用class,但是只会匹配第一个class

    
    




    

    
{{message}}

效果就是：在输入框里输入什么，下面的文本内容就跟着变

---

Vue声明式渲染与响应式效果

1、声明式渲染：vue叫做浏览器端的页面渲染技术,页面渲染之后才能展示真实的数据。
渲染：程序计算动态数据得到具体数据的过程，如{{}}中就是要被渲染的数据

2、查看声明式渲染的响应式效果

重要技巧：在浏览器控制台可以查看和修改变量的值

---

1.vue绑定文本 v-text

语法：v-text="要绑定的数据模型"

 v-text其实就是将数据模型的值绑定在标签体内

v-text 第一种情况：

从左到右解析，会把第一个

的模型数据 message解析出来，但是第二个

是直接报错的，啥也解析不出来，用俊宏那一口锦州话说：啥也不是！

---

v-text 第二种情况：

也不是说就不能用v-text了，也能。但是用{{}}显然更好

    
vue,{{message}}

    

 

v-text 第三种情况：

v-text 和v-html分别绑定文本和绑定html内容【包括文本和标签】，相当于innerText和innerHTML的区别。

---

2.绑定属性：v-bind

语法：v-bind:html属性=“模型数据” ，简写模式可以去掉v-bind

绑定class属性的时候，

通过模型数据更新value属性

3.value双向绑定：v-model

语法：v-model:value="值" 可以简写成 v-model="值"

双向绑定：只能操作表单的value属性。

双向绑定：页面上数据被修改后，Vue对象中的模型数据也跟着被修改。故表单项的value基本都是用双向绑定，经常用来收集用户输入的数据。

v-model的.trim修饰符

v-model.trim 去掉用户输入内容的前后空格去掉，再赋值给模型数据

---

3.v-if v-else v-show 条件渲染 

这些标签能做什么：访问的是同一个页面，动态展示不同的效果

• v-if      模型数据要是true，标签会存在于页面中
• v-else  模型数据要是为false，标签会存在于页面中

v-if 和v-else通过模型数据判断页面标签存在不存在的问题

v-show通过模型数据决定标签显示不显示的问题，实际上是多了一个样式display：none

页面中的隐藏的标签：
1、设置了样式display：none,隐藏的标签不占位置
2、设置了样式visibility:hidden，隐藏的标签占位置
3、head标签，使用了第一种隐藏方式。display：none
4、隐藏域 ：用在增删改查的修改功能，id只对表有意义，对用户无意义

---

4. v-for 列表渲染：【遍历一个数组】

v-for 将数组类型的模型数据进行遍历 
v-for 需要写在循环展示的标签中

    


        
{{name}}

        


        
{{index}}-->{{name}}
    

 使用v-for把夜幕小队信息展示在表格里

    

        
夜幕小队
    
    

        
编号
        
姓名
        
年龄
        
性别
    
    

     
{{stu.id}}
     
{{stu.name}}
     
{{stu.age}}
     
{{stu.gender}}
    

使用v-for遍历对象    v-for 中的  :key的作用？？

    

        

            {{key}}---{{value}}
        
    

---

 5.事件驱动

语法: v-on:事件类型=”函数"  //函数可以不写（），如果有参数，必须写（）

简写：@click=”函数“    //   如 @mousemove=”函数“

事件驱动：反转字符串功能

js中的字符串本身是没有反转方法的，只有数组有反转的方法。

会用到数据的俩个方法，split和join

vue种会大量使用this,this表示当前的vue对象，别问我为什么this.str可以直接访问，中间不是隔了一个data吗？因为就是这个样子，控制台打出来看看。

    
{{str}}

    

---

事件驱动：使用vue之后，怎么取消默认行为

标签的默认行为是超链接

    取消a标签的默认行为

点击后效果如下，因为我们没有这个hello.html这个页面就报了404 

使用手段阻止的默认跳转行为  event.preventDefault();

js原生的表单验证功能，上一篇文章，使用 return false阻止了默认行为。
vue中用 event.preventDefault()   阻止默认行为

    取消a标签的默认行为

---

6.事件流模型，阻止事件传播 

当俩个嵌套的标签同时触发事件，这些标签的触发顺序叫做事件流模型。

冒泡型：从内向外，现在的浏览器都是冒泡型事件流
捕获型：从外向内

event.stopPropagation() )  //阻止事件传播（冒泡），该方法要放在字标签所触发的方法内

现在我们还没阻止事件流呢？效果就是

1. 点击绿色的部分，会弹出“DIV”
2. 点击按钮，会先弹出“BUTTON”，再弹出“DIV”。此为“冒泡”。这不是我们想要的效果，我们想点击按钮后只弹出“BUTTON”

---

7.侦听属性watch 内容改变事件

侦听的双向绑定的模型数据，因为只有双向绑定的模型数据才能受用户的影响导致模型数据发生改变。

2021/9/27 北京 watch、@keyup.enter_￡小羽毛的博客-CSDN博客

    
尊姓：{{firstName}}
    
大名：{{lastName}}
    尊姓：

    大名：

    
全名：{{fullName}}

---

8.vue的生命周期

钩子函数：也叫回调函数，不需要手动调用，当它满足一定条件自己执行。

vue生命周期钩子函数

1. beforeCreate() //创建vue对象之前
2. created（）//创建vue对象之后,可以用来初始化数据
3. beforeMount（）//挂载之前，不能渲染页面 {{city}}
4. mounted（）//挂载【渲染】之后，可以用来初始化数据，西安

总结：先创建vue对象再挂载

    
{{hero}}