Vue框架的学习(Vue的基础指令操作一)第二课-阿里云开发者社区

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

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

引入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>