22-05-17 西安 javaweb(03) Vue框架

￡小羽毛

已于 2022-10-20 09:42:27 修改

阅读量364

点赞数

分类专栏：笔记文章标签：前端 vue

于 2022-05-17 19:51:51 首次发布

本文链接：https://blog.csdn.net/m0_56799642/article/details/124827346

版权

笔记专栏收录该内容

164 篇文章 5 订阅

订阅专栏

框架和框架的3个特定

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

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

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

Vue框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

官方网站：Vue.js

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

Vue入门案例：

Vue的使用步骤
1.引入vue.js
<script type="text/javascript" src="static/script/vue.js"></script>
2. 在页面中设置挂载容器<div id="app"></div>
3. 创建vue对象，并设置属性 el,data...
4.在挂载容器范围，使用vue提供的方式读取vue数据

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--在挂载容器范围内才能访问vue数据-->
<div id="app">
    <input type="text" v-model="message"/>
<!--    {{message}}插值表达式-->
    <p>{{message}}</p>
</div>
<!--引入vue.js,你和我的src属性会有所不同，根据路径而定-->
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    //这里使用vue接收了，实际上不用的话可以不接受
    var vue = new Vue({
        el: "#app", //绑定挂载容器，""里写选择器
        data: {       
            //设置模型数据
            message: "hello,vue"
        }
    });
</script>
</body>
</html>

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

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

1、声明式渲染：vue叫做浏览器端的页面渲染技术,页面渲染之后才能展示真实的数据。

渲染：程序计算动态数据得到具体数据的过程，如{{}}中就是要被渲染的数据

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

这里的核心思想就是没有繁琐的DOM操作

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

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

1.vue绑定文本 v-text

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

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

准备工作如下：定义一个模型数据message

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app", //绑定挂载容器，""里写选择器
        data: {
            //设置模型数据
            message: "你好"
        }
    });
</script>

v-text 第一种情况：

从左到右解析，会把第一个<p> 的模型数据 message解析出来，但是第二个<p>是直接报错的，啥也解析不出来，用俊宏那一口锦州话说：啥也不是！

<div id="app">
    <p v-text="message,vue"></p>
    <p v-text="vue,message"></p>
</div>

v-text 第二种情况：

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

<div id="app">
    <p>vue,{{message}}</p>
<!--    ''中的是字符串，用+拼接模型数据-->
    <p v-text="'vue,'+message"></p>
</div>

v-text 第三种情况：

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

2.绑定属性：v-bind

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

<div id="app">
       <input type="text" v-bind:value="username">
<!--    简写为：    ：html属性=“模型数据” -->
       <input type="text"  :value="username">
</div>

3.value双向绑定：v-model

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

<div id="app">
       <input type="text" v-model:value="username">
<!--       简写理由： 因为v-model只能操作表单的value属性-->
      <input type="text"  v-model="username">
</div>

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

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

v-model的.trim修饰符

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

4.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只对表有意义，对用户无意义
<input type="hidden">

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

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

<div id="app">
<!--    把数组展示在无序列表的列表项-->
    <ul>
<!--        要循环哪个标签，v-for就写在哪-->
        <li v-for="name in nameArr">{{name}}<li>
        <hr>
<!--        name和index也是vue中的模型数据。name表示数组中的每一个值-->
        <li v-for="name,index in nameArr">{{index}}-->{{name}}</li>
    </ul>
</div>

<script type="text/javascript">

    var vue = new Vue({
        el: "#app", //绑定挂载容器，""里写选择器
        data: {
            //设置模型数据
            nameArr:["张三","李四","王五","赵六","田七"]
        }
    });
</script>

使用v-for把夜幕小队信息展示在表格里,出自《我在精神病院斩神》

<!--在挂载容器范围内才能访问vue数据-->
<div id="app">
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th colspan="4">夜幕小队</th>
    </tr>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr v-for="stu in studentArr">
     <td>{{stu.id}}</td>
     <td>{{stu.name}}</td>
     <td>{{stu.age}}</td>
     <td>{{stu.gender}}</td>
    </tr>
</table>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app", //绑定挂载容器，""里写选择器
        data: {
            //设置模型数据
            studentArr:[
                {id:1001,name:"林七夜",age:24,gender:"男"},
                {id:1002,name:"百里胖胖",age:20,gender:"男"},
                {id:1003,name:"安卿鱼",age:21,gender:"男"},
                {id:1004,name:"沈青竹",age:23,gender:"男"},
                {id:1005,name:"珈蓝",age:18,gender:"女"},
                {id:1006,name:"江洱",age:18,gender:"女"}
            ]
        }
    });
</script>

使用v-for也可以遍历对象

v-for 中的 :key的作用？？

<div id="app">
    <ul>
        <li v-for="key,value in car" :key="key">
            {{key}}---{{value}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    var vue = new Vue({
            el: "#app",
            data: {
                car: {
                    name: '奥迪A8',
                    price: '70万',
                    color: '黑色'
                }
            }
        });
</script>

6.事件驱动 v-on:事件类型="函数"

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

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

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

第一个点：js中的字符串本身是没有反转方法的，只有数组才有反转的方法。

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

2021/10/19 北京-------js操作数组的7个方法，定时器,Object.assign()_￡小羽毛的博客-CSDN博客

第二个点：vue中会大量使用this,this表示当前的vue对象

别问我为什么this.str可以直接访问，中间不是隔了一个data吗？

因为就是这个样子，可以控制台打出来看看。

<div id="app">
    <p>{{str}}</p>
<!--    不传参数的时候（）可以写也可以不写，推荐还是写上-->
    <input type="button" value="反转" @click="reverse()">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
          str:"abc" //模型数据
        },
        methods:{
            //函数的原本格式 ： 函数名：function() 下面是简写格式
            reverse(){
                //字符串转为一个字符数组，通过空串分割
                var strArr = this.str.split("");
                //字符数组反转后再拼接为一个反转后的字符串
                this.str = strArr.reverse().join("");
            }
        }
    });
</script>

7.vue中事件驱动取消默认行为

<a>标签的默认行为是超链接

<div id="app">
    <a href="hello.html">取消a标签的默认行为</a>
</div>

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

使用手段阻止<a>的默认跳转行为

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

22-05-15 西安 javaweb(02) javaScript_￡小羽毛的博客-CSDN博客

vue中用 event.preventDefault() 阻止默认行为

<div id="app">
    <a href="hello.html" @click="test()">取消a标签的默认行为</a>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data: {
          str:"abc" //模型数据
        },
        methods:{
            test(){
                //阻止默认行为
                event.preventDefault();
            }
        }
    });
</script>

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

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

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

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

<div id="app">
    <div style="width: 300px; height: 300px; background-color: greenyellow;" @click="testDIV()">
        <input type="button" value="点击" @click="testBtn()">
    </div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        methods:{
            testDIV(){
                alert("DIV");
            },
            testBtn(){
                alert("BUTTON");
            }
        }
    });
</script>

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

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

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

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

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

<div id="app">
    <p>尊姓：{{firstName}}</p>
    <p>大名：{{lastName}}</p>
    尊姓：<input type="text" v-model="firstName" /><br/>
    大名：<input type="text" v-model="lastName" /><br/>
    <p>全名：{{fullName}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data:{
            firstName:"",
            lastName:"",
            fullName:""
        },
        watch:{
            //监听双向绑定的模型数据firstName
            firstName:function (inputValue) {
                //inputValue是更新后的结果
                this.fullName = inputValue + this.lastName;
            },
            //监听双向绑定的模型数据lastName
            lastName:function (inputValue) {
                //inputValue是更新后的结果
                this.fullName = this.firstName + inputValue;
            }
        }
    });
</script>

10.vue的生命周期

Vue的生命周期就是vue实例从创建到销毁的全过程

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

vue生命周期钩子函数

钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。

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

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

<div id="app">
    <p id="hero">{{hero}}</p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data:{
            hero:"吉尔伽美什"
        },
        //Vue的钩子函数，其实就是可以让我们在Vue的生命周期的特定阶段执行一些代码
        beforeCreate(){
            //输出数据模型city的值
            console.log("在beforeCreate钩子函数中获取hero:"+this.hero)
        },
        created(){
            //输出数据模型city的值
            console.log("在created钩子函数中获取hero:"+this.hero)
        },
        beforeMount(){
            //执行在虚拟视图替换真实视图之前,所以此时真实视图里面不会显示数据模型的数据
            console.log("在beforeMount钩子函数中获取真实视图的内容:"+document.getElementById("hero").innerHTML)
        },
        mounted(){
            //执行在虚拟视图替换真实视图之后,所以此时真实视图里面会显示数据模型的数据
            console.log("在mounted钩子函数中获取真实视图的内容:"+document.getElementById("hero").innerHTML)
        }
    });
</script>

补充：怎么销毁一个vue实例 v.$destroy()

beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染

updated执行时，内存中的数据已更新，并且页面已经被渲染

11.Vue组件

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

局部组件

组件命名，可以全小写 || 也可以首字母可以大写但是中间不能有字母大写

定义局部组件

        new Vue({
            el: '#app',
            // 定义局部组件，这里可以定义多个局部组件
            components: {
                //key是组件的名字
                'Navbar': {
                    //组件的内容
                    template: '<ul><li>热搜</li><li>强军征途</li></ul>'
                }
            }})

在挂载容器中使用自定义组件

    <div id="app">
        <Navbar></Navbar>
    </div>

页面效果：

全局组件

创建一个lasa.js文件

// 定义全局组件
Vue.component('lasa', {
    template: '<h2>坐上火车去拉萨，去看那神奇的布达拉</h2>'
})

在别的html页面引入并使用

<div id="app">
   <lasa></lasa>
</div>
<script src="/demo/components/lasa.js"></script>

页面效果：

12.Vue当中的路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容(视图)。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

    <script src="/demo/js/vue.min.js"></script>
    <script src="/demo/js/vue-router.min.js"></script>

编写html代码，使用路由

    <div id="app">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        <router-link to="/student">学生管理</router-link>
        <router-link to="/teacher">讲师管理</router-link>
    
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

编写js代码，定义路由

    <script>
        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        const Welcome = { template: '<div>欢迎</div>' }
        const Student = { template: '<div>student list</div>' }
        const Teacher = { template: '<div>teacher list</div>' }

        // 2. 定义路由 （组件和url的对应关系）
        // 每个路由应该映射一个组件。
        const routes = [
            { path: '/', redirect: '/welcome' }, //设置默认指向的路径
            { path: '/welcome', component: Welcome },
            { path: '/student', component: Student },
            { path: '/teacher', component: Teacher }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes // （缩写）相当于 routes: routes
        })
        //4.挂载路由
        new Vue({
            el: '#app',
            data: {

            },
            router
        })
    </script>

￡小羽毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
22-05-17 西安 javaweb(03) Vue框架

框架框架：就是半成品的项目java中框架的本质是jar包加配置文件。 js中框架的本质就是一个js 文件，用的时候要引入当前页面思想的转变：编程式思想-声明式思想【告诉框架要做什么，具体框架来做】待安排面向对象（oop）封装的是：一段连续的代码aop 横向抽取，事务相关代码可以抽取出来编程式事务到spring声明式事务，加一个注解。Vue框架相当轻量框架，轻量的意思：对原技术不造成影响。我们用的是Vue2Vue环境准备： Vue框架的js文件获取官网提供的
复制链接

扫一扫