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

简介: 了解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>

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
3天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
3天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
7天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
14 1
|
8天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
27 3
|
9天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
9天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
8天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
11天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
10天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
29 9