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

Vue框架的学习(Vue的基础指令操作一)第二课

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

本图介绍了即将要将的Vue常常操作的指令

没有固定的顺序 这些指令是操作框架的技术的基础中的基础 下面将官网放到下面地址中去

内置特殊元素 | Vue.js  

引入Vue框架的的js文件的信息

方式一

1.  <!-- !Vue的引入方式   CDN的引入方式一 的引用 -->
2. <script src="https://unpkg.com/vue@next"></script>

方式二  前往这个地址 https://unpkg.com/vue@next

将内容Ctrl+A Ctrl+C Ctrl+v 在自己的软件中建立起Js文件

 <script src="../js/vue.js"></script>
 <!-- !Vue的引入方式   CDN的引入方式-->
 <script src="https://unpkg.com/vue@next"></script>

在之前的博客中又已经在Vue2中了解的Vue的大致内容 这里直接切入主题的内容 对V-* 指令进行学习

Vue.js 介绍 — Vue.js 中文文档

模板语法的使用 简称指令 下面操作可能让你疑惑?

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 09:31:48
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 20:26:10
 * @FilePath: \com.Html\Com.Vue\VueDay01\html\index.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>
<body>
    <h1>欢迎来到Vue</h1>
    <div id="app">
    </div>
    <!-- !Vue的引入方式   CDN的引入方式一 的引用 -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- !方式二的引入方式 vue.js文件 -->
    <script>
        const app=Vue.createApp({
            template:`<h1>Hello World</h1>`
        })
        app.mount("#app")
    </script>
</body>
</html>

初入Vue的语法

 <h1>欢迎来到Vue</h1>
 <div id="app">
 </div>
 <!-- !Vue的引入方式   CDN的引入方式一 的引用 -->
 <script src="https://unpkg.com/vue@next"></script>
 <!-- !方式二的引入方式 vue.js文件 -->
 <script>
     //ES6的新特性 const是个常量
     const app=Vue.createApp({
         template:`<h1>Hello World</h1>`
     })
//你要将内容挂载到哪里去 到哪里去显示你要显示的div
     app.mount("#app")
 </script>

const常量的解释

 <!-- 常量 -->
 <script>
     const SCHOOL = "我要上高速"
     // 1 一定要有初始值
     // 2 一般常量用大写
     // 3 常量的值不能修改
     // 4 const 也是块级作用域
     // 5 对于数组和对象的元素修改 不算对常量的修改 不会报错
     const TEAM = ['UZR', 'MXLG', 'MING', 'LETME'];
     // TEAM.push('Meiko')
     console.log(TEAM)
 </script>

在之前利用的是Vue2的写法 而现在采用的是Vue3全新的写法

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-06 12:13:09
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-06 20:51:37
 * @FilePath: \com.Html\Com.Vue\了解Vue\html\index.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>声明式渲染</title>
</head>
<!-- CSS -->
<style>
    div {
        width: 100%;
        background-color: rgb(248, 254, 254);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 30px;
        text-align: center;
    }
    #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>
<body>
    <H1>我是Vue的学习</H1>
    <div id="app">
        {{message}}
    </div>
    <div class="fist">
        我是元素信息&nbsp;&nbsp;&nbsp;&nbsp;{{a}}&nbsp;&nbsp;&nbsp;&nbsp;在中间输入内容
    </div>
    <!--导入Vue.Js文件-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./js/vue.js"></script>
<!--    <script src="../js/Vue1.js"></script>-->
    <script>
        //控制视图层
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Word'
            }
        })
    </script>
    <script>
        var message = new Vue({
            el: '.fist',
            data: {
                a: "我是啊元素"
            }
        })
    </script>
</body>
</html>

V-html

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 21:16:34
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 22:29:51
 * @FilePath: \com.Html\Com.Vue\模板语法\html\v-html指令.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>
<body>
    <div id="app" v-html="123467">
        <p>更新元素的 innerHTML。
            期望的绑定值类型：string
            详细信息
            v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。</p>
        <h1>{{message}}</h1>
        <h1>{{text}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        message: "数据内容一",
                        text: "数据内容二"
                    }
                },
                methods: {
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

V-text

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 21:14:09
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 21:15:31
 * @FilePath: \com.Html\Com.Vue\模板语法\html\v-text指令.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>
<body>
    <div id="app">
        <h1 v-text="msg"></h1>
        <h1>{{text}}</h1>
        <p>更新元素的文本内容。
            期望的绑定值类型：string
            详细信息
            v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。
        </p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        msg: "数据内容一",
                        text: "数据内容二"
                    }
                },
                methods: {
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

V-once

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 09:56:24
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 21:30:30
 * @FilePath: \com.Html\Com.Vue\VueDay01\html\index4.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>
<div id="app" >
    <h1 v-once>{{con}}</h1>
    <button @click="add">+1</button>
    <button @click="del">-1</button>
</div>
<body>
    <!-- <script src="../js/vue.js"></script> -->
    <!-- !Vue的引入方式   CDN的引入方式-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    con: 0
                }
            },
            methods: {
                add() {
                    this.con++
                },
                del() {
                    this.con--
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>

V-pre

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 11:15:13
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-09 21:35:04
 * @FilePath: \com.Html\Com.Vue\模板语法\html\index3.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>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>{{message}}</h1>
    <!-- <h1 v-text="message">{{message}}</h1><br><ul><li v-for='item in like'>{{item}}</li></ul> -->
    <!-- <h1 v-html="message">{{message}}</h1><br> -->
    <h1>v-pre用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签：跳过不需要编译的节点，加快编译的速度；
        </h1>
    <h1 v-pre>{{message}}</h1>
    <span>{{message}}</span>
    <ul>
        <li v-for='item in like'>{{item}}</li>
    </ul>
    <script src="../js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "<p>Hello Vue</p>",
                    like: ["A", "B", "C", "D", "E"]
                }
            }
        })
        app.mount("body")
    </script>
</body>
</html>

V-cloak

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-09 11:22:56
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 08:47:41
 * @FilePath: \com.Html\Com.Vue\模板语法\html\index4.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>
<body>
    <style>
        /* 属性选择器 */
        [v-cloak] {
            color: red;
            display: none;
        }
    .one{
      color: red;
    }
    .two{
      color: green;
    }
    </style>
     <h1>{{message}}</h1><br>
    <h1 v-cloak class="one">{{message}}</h1><br>
   <h1 class="two">{{yu}}</h1><br>
    <h2>这个指令保持在元素上直到关联组件实例结束编译。
        和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕。
    </h2>
    <ul>
        <li v-for='item in like'>{{item}}</li>
    </ul>
    <script src="../js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue",
          yu:'123',
                    like: ["A", "B", "C", "D", "E"]
                }
            }
        })
        app.mount("body")
    </script>
</body>
</html>

综合案例

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-11-10 13:25:58
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-11-10 17:24:26
 * @FilePath: \com.Html\Com.Vue\模板语法\语法的综合案例.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>
    <style>
        * {
            font-size: 20px;
            color: black;
        }
        button {
            width: 200px;
            height: 100px;
            border-radius: 12px;
            background-color: black;
            color: rgb(255, 255, 255);
            font-weight: 900;
        }
        .one {
            display: block;
            color: rgb(255, 0, 0);
        }
        [v-cloak] {
            color: red;
            display: none;
        }
        h1 {
            background-color: black;
            color: red;
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Vue的基本语法</h1>
    <div id="app">
        <h2>语法中的“Mustache”语法</h2>
        <h4> {{massage}}</h4>
        <button type="" @click="add">这个按钮可以无限次的加一</button>
        <h4>{{counter}}</h4>
        <h4 v-once>{{counter}}</h4>
        <!--!通过观察得出结论上的V-once只能执行一次-->
        <h4>{{text}}</h4>&nbsp;<h4 v-text="text"></h4>
        <!-- 得出结论 {{text}}等价于 v-text="text"-->
        <h4 v-html='NotHtml'></h4>
        <h4>{{NotHtml}}</h4>
        <h4 v-pre='NotHtml'>{{NotHtml}}</h4>
        <span v-cloak>{{coloak}}</span>
        <span class="one">{{Notcoloak}}</span>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        function FistFunctionFmethod() {
            // alert("开始学习Vue.js")
            const app = Vue.createApp({
                data: function () {
                    return {
                        // 我的第一个数据为
                        massage: "Mustache双大括号语法",
                        counter: 1,
                        text: "我是V-text指令的内容信息",
                        NotHtml: "<h1  style='color: red;'>我的信息不会以html中的元素查看到</h1>",
                        coloak: "V-coloak属性的内容信息",
                        Notcoloak: "V-coloak属性的内容信息1",
                        // 图片的位置
                    }
                },
                methods: {
                    // 定义函数的模块
                    add: function () {
                        this.counter++
                    }
                }
            })
            app.mount("#app")
        }
        FistFunctionFmethod()
    </script>
</body>
</html>

文章标签：
CDN
JavaScript
关键词：
VUE.js框架
学习VUE.js
vue学习VUE.js
vue指令VUE.js
指令VUE.js
t75yjb52rsccc
目录
相关文章
程序员彭于晏
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
34 1
阿里巴巴叫我来巡山
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
57 17
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
41 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
30 1
雨溪-yuxi
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
38 1
vue学习第四章
程序员成长之路
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
程序员成长之路
48 1
九月天空
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
29 1
G0518
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
32 1
大树营养快线
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
32 2
程序员彭于晏
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
42 0

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    VUE3中watch与watchEffect —— 全网最详细系列
  • 3
    vue中关于element的el-image 图片预览功能增加一个下载按钮
  • 4
    Vue3——使用v-if或v-show来实现过渡的动画效果
  • 5
    中文代码示例之Vuejs入门教程(一)
  • 6
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 7
    vue中如何获取到当前位置的天气
  • 8
    vue3.0 bpmn-js + TS 简易教程
  • 9
    基于springboot+vue的医院预约系统(前后端分离)
  • 10
    Vue表格显示问题：v-show无法影响el-table-column列的解决方案
  • 1
    使用Vue.js构建交互式前端的技术探索
    92
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    170
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    133
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    151
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    193
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    112
  • 7
    vue3中使用动态组件
    108
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    146
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    77
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    125

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks售前咨询