AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

了解Vue框架的大致学习方向(第一课)（二）

2023-07-16 53
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 了解Vue框架的大致学习方向(第一课)（二）

第五个Demo  双向绑定事件 

<div id="index5">
     请输入文本的信息:<input type="text" v-model="message" value="Hello Vue">{{message}}
 </div>
 var vm = new Vue({
     el: "#index5",
     data: {
         message: ""
     }
 })
<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-06 13:35:51
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-06 20:43:46
 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index5.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEbi
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <style>
        div {
            width: 100%;
            background-color: rgb(248, 254, 254);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 30px;
        }
        #app {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            color: red;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 20px;
        }
        .fist {
            background-color: bisque;
            color: red;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <!--  外连接-->
<style src="./index.css"></style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 表单的两个方向的绑定 -->
    <div id="index5">
        请输入文本的信息:<input type="text" v-model="message" value="Hello Vue">{{message}}
    </div>
    <div id="index51">
        多行文本的信息:<textarea v-model="pan"></textarea>&nbsp;&nbsp;&nbsp;&nbsp;{{pan}}
    </div>
    <!-- 单选框 -->
    <div id="index52">
        <input type="checkbox" id="checkbox" v-model="checked">
        &nbsp;&nbsp;
        <label for="checkbox">{{checked}}</label>
    </div>
    <!-- 下拉单 -->
    下拉单:
    <select name="" id="">
        <option value="" disabled>______________请选择信息_________________</option>
        <option value="">ABCAA</option>
        <option value="">ABCAB</option>
        <option value="">ABCAC</option>
        <option value="">ABCAD</option>
        <option value="">ABCAE</option>
        <option value="">ABCAF</option>
        <option value="">ABCAG</option>
        <option value="">ABCAH</option>
        <option value="">ABCAI</option>
        <span>value{{pan}}</span>
    </select>
    <script>
        var vm = new Vue({
            el: "#index5",
            data: {
                message: ""
            }
        })
        var vm1 = new Vue({
            el: "#index51",
            data: {
                pan: ""
            }
        })
    </script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#index52",
            data: {
                checked: false
            }
        });
    </script>
    <!-- 多选框 -->
    <div id="index53">
        多复选框：
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="jack">JavaScript</label>
        <input type="checkbox" id="join" value="Join" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="join">Java</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="mike">MySql</label>
        <input type="checkbox" id="mikes" value="mikes" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="mike">Spring SpringMvc MyBatis</label>
        <input type="checkbox" id="mike2" value="Mike2" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="mike">SprngBoot</label>
        <input type="checkbox" id="mike3" value="Mike3" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="mike">HTML CSS JavaScript</label>
        <input type="checkbox" id="mike4" value="Mike4" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="mike">JSP</label>
        <input type="checkbox" id="mike5" value="Mike5" v-model="checkedNames">
        &nbsp;&nbsp;
        <label for="mike">Servlect</label>
        <span>选中的值：{{checkedNames}}</span>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#index53",
            data: {
                checkedNames: []
            }
        });
    </script>
    <script>
        var vm = new Vue({
            el: "#index53",
            data: {
                pan: "A"
            }
        })
    </script>
</body>
</html>

第六个Demo

组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-06 14:56:25
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-06 20:43:50
 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index6.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 100%;
        background-color: rgb(248, 254, 254);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30px;
    }
    #app {
        background-color: lightblue;
        height: 40px;
        line-height: 40px;
        color: red;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 20px;
    }
    .fist {
        background-color: bisque;
        color: red;
        height: 40px;
        line-height: 40px;
    }
</style>
<body>
    <h3>​ 组件是可复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：</h3>
    <!--view层 模板-->
    <div id="app">
        <my v-for="item in items" v-bind:s="item"></my>
    </div>
</body>
<!--  外连接-->
<style src="./index.css"></style>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("my", {
        props: ['s'],
        template: '<li>{{s}}</li>'
    })
    var vm = new Vue({
        el: "#app",
        data: {
            items: ['Java', 'Python', 'Php', "Mysql", "我是数据信息"]
        }
    })
</script>
</body>
</html>

 

标题

第七个Demo  axios  跟Ajax和JSON数据差不多 这个功能是和后端数据打交道的

{
  "name": "weg",
  "age": "18",
  "sex": "男",
  "url":"https://www.baidu.com",
  "address": {
    "street": "文苑路",
    "city": "南京",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com"
    },
    {
      "name": "baidu",
      "url": "https://www.baidu.com"
    },
    {
      "name": "cqh video",
      "url": "https://www.4399.com"
    }
  ]
}
<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-06 15:44:33
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-06 20:43:55
 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index7.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--view层 模板-->
    <div id="vue">
        <div>{{info.name}}</div>
        <a v-bind:href="info.url">点我进入</a>
    </div>
</body>
<style>
    div {
        width: 100%;
        background-color: rgb(248, 254, 254);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30px;
    }
    #app {
        background-color: lightblue;
        height: 40px;
        line-height: 40px;
        color: red;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 20px;
    }
    .fist {
        background-color: bisque;
        color: red;
        height: 40px;
        line-height: 40px;
    }
</style>
<!--  外连接-->
<style src="./index.css"></style>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            items: ['Java', 'Python', 'Php']
        },
        //data:vm的属性
        //data():vm方法
        data() {
            return {
                //请求的返回参数,必须和json字符串一样
                info: {
                    name: null,
                    age: null,
                    sex: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        //钩子函数，链式编程，ES6新特性
        mounted() {
            axios.get("index.json").then(res => (this.info = res.data))
        }
    })
</script>
</html>

第八个Demo  

计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法

    <!--view层 模板-->
    <div id="app">
        <div>currentTime1: {{currentTime1()}}</div>
        <div>currentTime2: {{currentTime2}}</div>
    </div>
</body>
<!--  外连接-->
<style src="./index.css"></style>
<!--导入js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "hello,world!"
        },
        methods: {
            currentTime1: function () {
                return Date.now(); // 返回一个时间戳
            }
        },
        computed: {
            //计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法
            currentTime2: function () {
                this.message;
                // 返回一个时间戳
                return Date.now();
            }
        }
    })
</script>

第九个Demo  slot 插槽 这个组件要定义在前面不然出不来数据

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-06 16:19:10
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-06 20:44:09
 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index9.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <style>
        div {
            width: 100%;
            background-color: rgb(248, 254, 254);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 30px;
        }
        #app {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            color: red;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 20px;
        }
        .fist {
            background-color: bisque;
            color: red;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <!--  外连接-->
<style src="./index.css"></style>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" v-bind:name="title"></todo-title>
            <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
        </todo>
    </div>
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        //slot 插槽 这个组件要定义在前面不然出不来数据
        Vue.component("todo", {
            template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
        });
        Vue.component("todo-title", {
            //属性
            props: ['name'],
            template: '<div>{{name}}</div>'
        });
        Vue.component("todo-items", {
            props: ['item'],
            template: '<li>{{item}}</li>'
        });
        let vm = new Vue({
            el: "#app",
            data: {
                //标题
                title: "图书馆系列图书",
                //列表
                todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
            }
        });
    </script>
</body>
</html>

第十个Demo  自定义事件

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-06 16:48:16
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-06 20:44:16
 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index10.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>P12-自定义事件内容分发</title>
</head>
<body>
    <style>
        div {
            width: 100%;
            background-color: rgb(248, 254, 254);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 30px;
        }
        #app {
            background-color: lightblue;
            height: 40px;
            line-height: 40px;
            color: red;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 20px;
        }
        .fist {
            background-color: bisque;
            color: red;
            height: 40px;
            line-height: 40px;
        }
    </style>
    <!--  外连接-->
<style src="./index.css"></style>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title="myTitle"></todo-title>
            <todo-items slot="todo-items" v-for="(it,id) in todoItems" :item="it" v-bind:index="id"
                v-on:myremove="removeItems(id)" :key="id"></todo-items>
        </todo>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        Vue.component(
            "todo",
            {
                template: "<div>\
                            <slot name='todo-title'></slot>\
                            <ul>\
                                <slot name='todo-items'></slot>\
                            </ul>\
                        </div>"
            }
        );
        Vue.component(
            "todo-title",
            {
                props: ["title"],
                template: "<div>{{title}}</div>"
            }
        );
        Vue.component(
            "todo-items",
            {
                props: ["item", "index"],
                template: "<li>{{index}}--{{item}}<button @click='remove'>删除</button></li>",
                methods: {
                    remove: function (index) {
                        // alert("111");
                        this.$emit("myremove", index); //自定义事件分发
                    }
                }
            }
        );
        var vm = new Vue({
            el: "#app",
            data: {
                myTitle: "yubaby的列表",
                todoItems: ["yppah学java", "yppah学linux", "yppah学vue","Mysql","javaScript"]
            },
            methods: {
                removeItems: function (index) {
                    console.log("删除了：" + this.todoItems[index]);
                    this.todoItems.splice(index, 1);//一次删除一个元素
                }
            }
        });
    </script>
</body>
</html>

文章标签：
CDN
JavaScript
前端开发
数据格式
JSON
关键词：
vue学习VUE.js
学习VUE.js
VUE.js框架
vue框架VUE.js
VUE.js框架大致学习方向
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
t75yjb52rsccc
目录
相关文章
我是快乐的嘟嘟
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
64 26
html的七十二变
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
25 8
html的七十二变
|
5天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
18 7
html的七十二变
|
5天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
22 5
游客ady5kpv352g3u
|
5天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
15 3
游客ady5kpv352g3u
|
5天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
13 2
我是快乐的嘟嘟
|
19天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
117 63
html的七十二变
|
6天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
21 5
html的七十二变
|
6天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
18 4
游客zi3qmblbcdexu
|
11天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
33 6

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    自制简单的range（Vue）
  • 4
    vite原理之解析.vue文件
  • 5
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 6
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 7
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 10
    Vue+ElementUI 搭建后台管理系统（实战系列八）
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    213
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1140
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    473
  • 8
    【vue】 vue2 监听滚动条滚动事件
    144
  • 9
    【天地图】vue 天地图 T is not defined
    176
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    616

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云OSS设置跨域访问