您现在的位置是:首页 > 正文

vue-指令

2024-02-01 04:05:27阅读 2

费话不说,想看介绍的上官网https://cn.vuejs.org/v2/ ,中文官网,相信大家都能看得懂

学习vue第一步一定是从指令开始,博主也不例外。

1.v-text  向页面展示文本信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app" v-text='mes'>

    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{ //顾名思义数据的意思
                mes:'hellow world'  //声明一个数据 name 为mes  value为hellow world
            },
         });
    </script>
</body>

</html>
v-text

2.v-html 想页面渲染一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-text='mes'></div>
        <div v-html='mes1'></div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{ //顾名思义数据的意思
                mes:'<h1>hellow world</h1>',
                mes1:'<h1>hellow world</h1>'  //声明一个数据 name 为mes  value为hellow world
            },
         });
    </script>
</body>

</html>
v-html

3.v-show      v-show 修改css的display属性 true是显示,false为隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-show='false'>hellow world</div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            
         });
    </script>
</body>

</html>
v-show

4.v-if 、 v-else-if、v-else 条件判断  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-if="mes = 'lhf'">if</div>
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{
                mes:"fhl"
            }
         });
    </script>
</body>

</html>
v-if

5.v-for 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul v-for='item,index in mes'>
            <li :key='item.id'><span>序号:{{ index }}</span>名字: {{ item.name }} </li>
        </ul>
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{
                mes:[
                    {id:1,name:'zhangsan'},
                    {id:2,name:'lishi'},
                    {id:3,name:'wangwu'}
                ]
            }
         });
    </script>
</body>

</html>
v-for

6.v-on 绑定事件  简写 @click=''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click='handleClick'>点我啊</button>
        <button v-on:click='handleClick'>点我啊</button>
        <!-- 没有参数的时候可以不用写括号 -->
        <a href="" @click.prevent='toBaidu(1)'> 点我啊 </a>
        <!-- 当然 还有一些事件的修饰 比如上边用到的.prevent就是阻止默认行为的 -->
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{
                mes:[
                    {id:1,name:'zhangsan'},
                    {id:2,name:'lishi'},
                    {id:3,name:'wangwu'}
                ]
            },
            methods:{ //顾名思义,上边绑定的方法就是在这里声明的
                handleClick(){
                    alert('你还真点啊!')
                },
                toBaidu(id){
                    alert(id)
                }
            }
         });
    </script>
</body>

</html>
v-on

7.v-bind 绑定到属性 缩写直接使用 :即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text"  :value="mes" :id='id'>
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{
                mes:'我是value',
                id:'id'
            },
         });
    </script>
</body>

</html>
v-bind

8.v-model 双向绑定 我很喜欢的东西

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">

        {{ mes }}

        <input type="text" v-model='mes'>
        
    </div>
    <script>
        var vm=new Vue({
            el:'#app', //el 简单来说就是绑定一个元素,vue里边叫做挂载
            data:{
                mes:'我是value',
            },
         });
    </script>
</body>

</html>
v-model

 

 

常用的指令就这么多了,不要问我一个后端为什么学vue,活在当今社会下不会连工作都找不到,被逼的啊

 

 

 

转载于:https://www.cnblogs.com/Tiandaochouqin1/p/11480166.html

网站文章

  • 页面生成图片插件 html2canvas

    页面生成图片插件 html2canvas

    2024-02-01 04:05:21
  • ASP.NET 关于FORM认证

    第一部分 如何运用 Form 表单认证? ASP.NET 的安全认证,共有“Windows”“Form”“Passport”“None”四种验证模式。“Windows”与“None”没有起到保护的作用,不推荐使用;“Passport”我又没用过,唉……所以我只好讲讲“Form”认证了。我打算分三部分: 第一部分 —— 怎样实现From 认证; 第二部分 —— Form 认证的实战运...

    2024-02-01 04:05:15
  • el-table表中嵌套过多的el-input卡顿问题,优化方案

    el-table表中嵌套过多的el-input卡顿问题,优化方案

    根据切换不同页码,切割el-table中的数据 进行展示对应的分页的数据,不在分页范围内,不做展示,从而解决了输入卡顿的问题,每次加载和修改都是加载某一个的数据,某一页的数据也就对应总的数据中的一部分...

    2024-02-01 04:04:47
  • 前端 -- 基础 VSCode 工具生成骨架标签新增代码 解释详解

    前端 -- 基础 VSCode 工具生成骨架标签新增代码 解释详解

    生成骨架标签新增代码详解

    2024-02-01 04:04:35
  • vue diff算法

    vue diff算法 在vue中的实现原理,patch函数、patchVnode、updateChildren、sameVnode函数的介绍

    2024-02-01 04:04:27
  • AndroidStudio 本地代码上传githup上面

    AndroidStudio 本地代码上传githup上面

     第一步:首先在androidstudio 中 Terminal 中 创建 git init第二步:然后在githup中创建如果在创建的时候点击了 Initalize this repository with aREADME   到时候push代码会抱一个错误 error: failed to push some refs解决方案是:1、在使用git 对源代码进行push到...

    2024-02-01 04:03:56
  • cs计算机科学好学吗,CMU哪个专业最难申请?竟然不是计算机!_托普仕留学

    cs计算机科学好学吗,CMU哪个专业最难申请?竟然不是计算机!_托普仕留学

    CMU全称为卡内基梅隆大学,是美国顶级的私立高等学府,该校多个专业位居全美前列,那么你知道CMU哪个专业最难申请吗?经数据考证,最难申请的竟然不是大名鼎鼎的计算机专业!首先,CMU的本科有7个学院,包...

    2024-02-01 04:03:48
  • 哈希表-有效字母异位词

    哈希题目

    2024-02-01 04:03:42
  • c++多文件结构 & 程序编译后出现的文件

    c++多文件结构 & 程序编译后出现的文件

    通常一个项目至少划分3个文件;决定一个声明放在源文件还是头文件中的一般原则;外部变量与外部函数;程序编译后会出现的文件——目标程序文件(*.obj)、无编译浏览文件(*.ncb)、工程文件(*.dsp)、工作区文件(*.dsw)、编译信息文件(*.plg)。

    2024-02-01 04:03:13
  • 例子说冒泡排序

    1. 比较相邻的元素。如果第一个比第二个大,就交换他们两个。2. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。3. 针对所有的元素重复以上的步骤,除了最后一个。4. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。

    2024-02-01 04:03:06