VUE框架容器与实例的关系和插值语法以及指令------VUE框架

已于 2023-11-24 14:33:05 修改
阅读量46 收藏
点赞数 1
分类专栏： 前端 # VUE框架 文章标签： vue.js 前端 javascript vue js 前端框架 node.js
于 2023-11-21 16:35:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134535372
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备容器 -->
    <div class="app">
        <h1>{{msg}}</h1>
    </div>
    <div class="app">
        <h1>{{msg}}</h1>
    </div>
    <div id="app2">
        <h1>{{name}}</h1>
    </div>
    <script>
        new Vue({
            //一个VUE实例可以接管多个容器吗?
            //只接管了一个容器
            //一旦接管到一个容器后,即便后面有相同的容器,Vue也是不管的
            //因为Vue已经接管到容器了
            el : ".app",
            data : {msg : "HelloVue"}
        });
        new Vue({
            //先接管了app2
           el : "#app2",
           data : {
                name : "zhangSan"
           }
        });
        new Vue({
            //接管不了已经被接管的容器
            el : "#app2",
            data : {
                name : "jackson"
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <!-- 准备容器 -->

    <div class="app">

        <h1>{{msg}}</h1>

    </div>

    <div class="app">

        <h1>{{msg}}</h1>

    </div>

    <div id="app2">

        <h1>{{name}}</h1>

    </div>

    <script>

        new Vue({

            //一个VUE实例可以接管多个容器吗?

            //只接管了一个容器

            //一旦接管到一个容器后,即便后面有相同的容器,Vue也是不管的

            //因为Vue已经接管到容器了

            el : ".app",

            data : {msg : "HelloVue"}

        });

        new Vue({

            //先接管了app2

           el : "#app2",

           data : {

                name : "zhangSan"

           }

        });

        new Vue({

            //接管不了已经被接管的容器

            el : "#app2",

            data : {

                name : "jackson"

            }

        });

    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 准备容器 -->
    <!-- {{}}里面可以写什么东西? -->
    <!-- 1.在data里面声明的可以写(变量函数参数) -->
    <!-- 2.常量都可以 -->
    <!-- 3.只要是合法的JS表达式都可以 -->
    <!-- 4.模板方法都被放在沙盒中,只能访问全局变量的一个白名单,如Date和Math -->
    <div id="app">
        <!-- 这里就可以视为使用变量 -->
        <h1>{{msg}}</h1>
        <!-- 调用函数 -->
        <h1>{{sayHello()}}</h1>
        <h1>{{100}}</h1>
        <h1>{{"Hello Vue!!!"}}</h1>
        <h1>{{1 + 1}}</h1>
        <h1>{{"Hello" + "Vue123"}}</h1>
        <h1>{{msg + 1}}</h1>
        <!-- 三目运算符也可以 -->
        <h1>{{gender ? "男" : "女"}}</h1>
        <!-- 拆分反转拼接到一起 -->
        <h1>{{msg.split("").reverse().join("")}}</h1>
        <h1>{{Date.now()}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
    </div>
    <script>
        var i = 100;
        // Vue程序
        new Vue({
            el : "#app",
            data : {
                // 我们将这个msg称之为变量
                // 这行代码就可以视为变量的声明
                msg : "abcdefg",
                // 这个变量也可以是一个函数
                sayHello : function()
                {
                    console.log("Hello Vue!");
                },
                gender : true
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="../js/vue.js"></script>

    <title>Document</title>

</head>

<body>

    <!-- 准备容器 -->

    <!-- {{}}里面可以写什么东西? -->

    <!-- 1.在data里面声明的可以写(变量函数参数) -->

    <!-- 2.常量都可以 -->

    <!-- 3.只要是合法的JS表达式都可以 -->

    <!-- 4.模板方法都被放在沙盒中,只能访问全局变量的一个白名单,如Date和Math -->

    <div id="app">

        <!-- 这里就可以视为使用变量 -->

        <h1>{{msg}}</h1>

        <!-- 调用函数 -->

        <h1>{{sayHello()}}</h1>

        <h1>{{100}}</h1>

        <h1>{{"Hello Vue!!!"}}</h1>

        <h1>{{1 + 1}}</h1>

        <h1>{{"Hello" + "Vue123"}}</h1>

        <h1>{{msg + 1}}</h1>

        <!-- 三目运算符也可以 -->

        <h1>{{gender ? "男" : "女"}}</h1>

        <!-- 拆分反转拼接到一起 -->

        <h1>{{msg.split("").reverse().join("")}}</h1>

        <h1>{{Date.now()}}</h1>

        <h1>{{Math.ceil(3.14)}}</h1>

    </div>

    <script>

        var i = 100;

        // Vue程序

        new Vue({

            el : "#app",

            data : {

                // 我们将这个msg称之为变量

                // 这行代码就可以视为变量的声明

                msg : "abcdefg",

                // 这个变量也可以是一个函数

                sayHello : function()

                {

                    console.log("Hello Vue!");

                },

                gender : true

            }

        });

    </script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备一个容器 -->
    <!-- 什么是指令,有什么作用 -->
    <!-- vue框架所有的指令都是以v-开始的 -->
    <!-- 插值是写在标签体当中的,指令写在html的属性位置 -->
    <!-- Vue框架的指令以属性的形式存在 -->
    <!-- 指令的语法规则 -->
    <!-- <html标签 v-指令名:参数="表达式"></html标签> -->
    <!-- 指令中表达式的语法和插值语法的表达式语法格式一致,但是不能用{{}}括起来 -->
    <!-- 不是所有的指令都需要参数或表达式如v-once -->
    <!-- 有的指令只需要表达式不需要参数,如v-if -->
    <div id="app">
        <h1>{{msg}}</h1>
        <h1 v-if="msg === '123'">{{msg}}</h1>
    </div>
    <script>
        // Vue程序
        new Vue({
            el : "#app",
            data : {
                msg : "Hello Vue"
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <!-- 准备一个容器 -->

    <!-- 什么是指令,有什么作用 -->

    <!-- vue框架所有的指令都是以v-开始的 -->

    <!-- 插值是写在标签体当中的,指令写在html的属性位置 -->

    <!-- Vue框架的指令以属性的形式存在 -->

    <!-- 指令的语法规则 -->

    <!-- <html标签 v-指令名:参数="表达式"></html标签> -->

    <!-- 指令中表达式的语法和插值语法的表达式语法格式一致,但是不能用{{}}括起来 -->

    <!-- 不是所有的指令都需要参数或表达式如v-once -->

    <!-- 有的指令只需要表达式不需要参数,如v-if -->

    <div id="app">

        <h1>{{msg}}</h1>

        <h1 v-if="msg === '123'">{{msg}}</h1>

    </div>

    <script>

        // Vue程序

        new Vue({

            el : "#app",

            data : {

                msg : "Hello Vue"

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js 实现v-model与{{}}指令方法
10-17
首先，`v-model` 是Vue中用于双向数据绑定的指令，常用于表单元素，如input、select等，使得输入框的值和Vue实例的数据之间能实时同步。在内部，`v-model` 实际上是通过监听输入事件并更新数据，以及在数据变化时...
使用Docker将vue前端项目构建成容器镜像并运行
雨云21的博客
07-08 1553
将项目构建成容器镜像，然后再使用Docker运行该容器镜像
vue.js指令v-model实现方法
10-20
Vue.js的`v-model`指令是其核心特性之一，它为开发者提供了数据双向绑定的能力，使得视图与模型之间的交互变得更加简单和直观。在HTML表单元素如`<input>`、`<select>`或`<textarea>`上使用`v-model`，能够实时反映...
vue-sell-app-master.zip
03-15
- **计算属性与侦听器**：Vue实例可以有计算属性和侦听器，用于根据其他数据自动计算值，或者在数据变化时执行相应操作。 3. **路由管理**： - **Vue Router**：为了实现页面间的导航，Vue项目通常会使用Vue ...
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache ...
最新《Vue-框架开发》期末考试试题分享给需要的同学
05-20
1. **Vue基础知识**：这可能包括Vue的安装、基本的模板语法、数据绑定（`v-bind` 和 `v-on`指令）、计算属性和侦听器等。Vue使用`{{ }}`进行文本插值，`v-if`和`v-show`控制元素的显示，以及`v-for`进行循环渲染。 ...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 528
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 651
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 348
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 494
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1088
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
最新发布
epitomizelu的专栏
07-20 559
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1064
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 1074
nodejs、vue、SSH服务、SSH免密登录
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 323
【代码】博客前端项目学习day03——框架页。
【Vue】`v-on` 指令详解：事件绑定与处理的全面指南
lph159的博客
07-19 246
v-on是 Vue.js 用于事件监听的指令，可以绑定原生 DOM 事件或自定义事件。其基本语法如下：
vue、js截取视频任意一帧图片
weixin_43728978的博客
07-17 843
vue、js对video视频中的某一帧截取，截取视频封面
我在vue2重生之vite加强版
许发君博客
07-17 369
需要引入相关插件进行自动引入。
Vue3获取路由参数、包含获取路径参数
weixin_46607967的博客
07-17 203
该demo使用了重定向 把123和456 分别设置为id和name 通过路由传参 传递给重定向后的 url 路由。这里业务逻辑为 跳转到url页面 同时接收到123和456参数。如实际项目不需要 则按需修改 一条路由也可实现。route为路由信息 query为获取的路由参数。如果是通过url传参 可直接在组件内使用。在 url 页面中正常获取路由参数即可。如果参数直接在路径中 可参考。中对 url路由 进行修改。该条路由表信息使用了。
v-html和插值语法同时存在
09-08
当v-html和插值语法同时存在时，Vue会先解析插值语法，将Vue实例中的数据进行替换，然后再将替换后的文本作为原始HTML传递给v-html指令，进行HTML解析。这样就可以在模板中动态地渲染HTML代码，并将数据进行绑定。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值