Vue基本指令语法

已于 2022-04-07 09:11:32 修改
阅读量1.1k 收藏
点赞数
文章标签： vue vue.js
于 2022-04-05 16:19:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57508774/article/details/123970963
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>

    <!-- 引入vue.js -->
    <script src="js/vue.js" type="text/javascript"></script>

</head>
<body>
    
    <div id="app">

        <!-- 插值 -->
        <div v-cloak>{{ msg }}</div>


        <!-- 数据绑定指令 将数据填充到标签中-->
        <!-- v-text填充纯文本 -->
        <div v-text="msg"></div>

        <!-- v-html填充html 片段   1、存在安全问题  2、本网站内的数据可以使用，第三方的数据不可用-->
        <div v-html="msg1"></div><br/>


        <!-- v-pre 填充原始信息     显示原始信息 ，跳过编译过程（分析编译过程）-->
        <div v-pre>{{ msg1 }}</div> 


        <!-- 数据响应式  -->
        <div>{{ msg }}</div>
        <!-- v-once只编译一次     显示内容不再具有响应式功能-->
        <div v-once>{{ msg }}</div><br/>

        <div>{{ msg1 }}</div>
        <!-- v-model双向数据绑定指令数   这里的变化会导致上面的内容跟着变化     mvvm设计思想-->
        <input type="text" v-model="msg1" /><br/><br/>

        <!-- 事件绑定 -->
        <div>{{ num }}</div>
        <!-- v-on指令用法 -->
        <button v-on:click="num++">点我1</button>
        <!-- v-on简写形式 -->
        <button @click="num++">点我2</button>
        <button @click="handle">点我3</button>
        <!-- 时间函数的调用方式     事件函数参数传递    最后一个参数永远都是$event-->
        <button @click="handle('123','456',$event)">点我4</button><br/>

        <div v-on:click="handle1">
            <!-- <button v-on:click="handle2">点我5</button> -->

            <!-- 阻止冒泡 只执行当前本身，与之关联的不会执行 阻止向上走-->
            <button v-on:click.stop="handle2">点我5</button>
        </div>

        <!-- 阻止当前的默认行为 -->
        <a href="http://www.baidu.com" v-on:click.prevent="handle3">百度</a>

        <div>
            <!-- 按键修饰符 -->
            <input type="text" v-model="username" v-on:keyup.enter="handle4" />

            <!-- 事件修饰符 -->
            <input type="text" v-model="pass" v-on:keyup.delete="handle5"/>
            
            <!-- 自定义按键修饰符 -->
            <input type="text" v-model="pass" v-on:keyup.f1="handle6"/>
        </div>

        <div>
            <!-- v-bing指令用法 -->
            <a v-bind:href="test">百度</a>
            <!-- v-bing指令用法 的缩写形式-->
            <a :href="test">百度</a>
        </div>


        <!-- v-bing 和 v-on:input 来实现v-model这个双向数据绑定 -->
        <div>
            <input type="text" v-bind::value="info" v-on:input="handle7"/>{{ info }}
        </div>

    </div>


    <script type="text/javascript">

        Vue.config.keyCodes.f1 = 65

        // 实例化vue对象
        var vm=new Vue({
            // el  代表element  对应上方id=“app”
            el:'#app',
            // data 代表的是对象
            data:{
                // key  value值
                msg:'HelloWorld!',
                msg1:"<h2>hello vue</h2>",
                num:0,

                username:"hello",
                pass:"hello",
                test:'http://www.baidu.com',
                info:""
            },

            // 对应的函数方法   vue 专门的一套方式  用来写函数的
            methods: {
                // 对应上边的handle函数     （）括号里边是对应的参数
                handle:function(p,p1,event){
                    console.log(this==vm);

                    console.log(p);
                    console.log(p,p1);
                    // 代表本身的一个对象
                    console.log(event.target.innerHTML);

                    //this 当前这个对象
                    this.num++;
                },
                handle1:function(){
                    this.num++;
                },
                handle2:function(){

                },
                handle4:function(){
                    console.log(this.username)
                },
                handle5:function(){
                    this.pass=""
                },
                handle6:function(event){
                    //看输入的值
                    console.log(event.target.value)
                    //看对应的编码值
                    console.log(event.keyCode)
                },
                handle7:function(event){
                    this.info=event.target.value;
                }
            }
        })
    </script>


</body>
</html>

Lovely-Zhang-1026
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解Vue中的基本语法和常用指令
10-16
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
Vue指令介绍及使用
AI_huihui的博客
11-06 2140
一、什么是指令 在 vue 中提供了些对页面和数据更方便的输出方式，实质上就是特殊的 html 标签属性，指令中封装了一些DOM行为, 结合属性作为一个行为, 行为有对应的值,根据不同的值，框架会进行相关DOM操作的绑定, 特点: v- 开头。 二、插值表达式 在dom标签中直接插入内容，又叫声明式渲染/文本插值。 语法：{{ 表达式 }} 注意：dom中插值表达式赋值, vue的变量必须在data里声明 三、vue中常用 v-...
vue的常用指令及用法总结
weixin_42504805的博客
06-08 8891
vue知识
Vue指令大全-用法
JackieDYH的博客
06-01 430
1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。 <span v-text="msg"></span> 这两者等价： <span>{{msg}}</span> 2. v-html 双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。 <div v-html="rawHtml"></div&g
Vue常用指令+用法举例 详解
最新发布
m0_69287579的博客
08-18 2511
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
常用的vue指令语法用法
TianXuab的博客
06-30 361
v-if指令用于根据表达式的值条件性地渲染元素，而v-show指令仅在表达式值为true时显示元素。以上是常用的Vue指令语法用法，它们可以帮助您轻松地创建动态的Web应用程序。v-for指令用于迭代一个数组或对象中的项目，并为每个项目执行一次模板。v-model指令用于在表单元素和组件上创建双向数据绑定。v-cloak指令用于在Vue实例未加载时隐藏绑定的元素。v-text指令用于将HTML转义过的文本渲染到元素中。v-html指令用于渲染元素中的HTML。v-on指令用于在DOM事件上触发方法。
vue.js语法及常用指令
10-19
vue.js相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面通过本文给大家分享vue.js语法及常用指令，希望对大家有所帮助
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
vue自定义指令实现方法详解
01-21
本文实例讲述了vue自定义指令实现方法。分享给大家供大家参考，具体如下： vue中的指令就是v-on v-bind v-show等等，那么自定义指令是什么呢？ 自己定义的指令就是自定义指令。 语法： Vue.directive(id, definition...
Vue常用指令及用法（入门篇）
小宇，要努力敲代码
10-19 1709
vue的内置指令有：v-bind指令、v-on指令、v-model指令、v-for指令、v-text指令、v-html指令、v-pre指令、v-cloak指令、v-if指令、v-else-if指令、v-else指令、v-show指令、v-once指令、v-slot指令。v-bind可以接受一个参数，用于响应式更新HTML的属性的属性值，v-bind：可以缩写为： v-on可以用来绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。用来绑定Vue中met
vue常见指令及其用法
m0_51134729的博客
03-21 2530
v-show\v-if\v-else-if\v-else <template> <div>在 Vue 中提供两种指令：一种是内置指令，另一种是自定义指令。所有的指令都是以 v- 开头的。</div> <div>v-show 指令是用于显示或隐藏元素，它是以 style 样式的方式来实现的。</div> <div>v-if 指令也是用于根据条件表达式来带有条件的渲染。如果条件为假，那么页面中将不会渲染当前的元素。&
vue常用指令和用法
m0_62956385的博客
07-07 660
Vue常用的指令和用法
Vue中的常用指令及用法总结
Siobhan_Mxin的博客
09-05 891
Vue常用指令及用法（v-cloak、v-text、v-html、v-bind属性、v-on事件、v-model双向数据绑定5、v-model双向数据绑定、vue中的样式（class样式:class属性值直接传递一个数组；class属性值传递data属性的绑定数据；style样式）、v-for和key、v-if和v-show）
vue的基本指令
m0_46322755的博客
05-11 500
Vue指令之-插值表达式 v-cloak v-text v-html v-bind v-on v-model v-for v-if v-show
Vue之指令用法
唐昊
06-15 335
简介 注册全局指令 // Vue2.0用法 // 注册一个全局指令 // el: 指令所在的标签对象 // binding: 包含指令相关数据的容器对象 Vue.directive('upper-text', function (el, binding) { console.log(el, binding) el.textContent = binding.value.toUpperCase() }) 注册局部指令 directives : { 'my
vue指令学习——vue基本用法
qq_46153157的博客
05-08 1388
vue的基本使用，放心食用哈哈哈哈我会继续努力更新的
Vue常用指令的介绍及应用
weixin_64840384的博客
02-21 2238
1.Vue指令的本质是 ： Vue为HTML标签新增的一些属性 (1) 每一个HTML标签都有自己的原生默认属性 HTML标签的每一个属性都有自己独特的功能 例如 img标签的src属性，a标签的href属性 (2) Vue认为,HTML标签原生的属性还不够用，所以Vue为HTML标签新增了很多的属性，每一个属性(指令)都可以实现一个强大的功能 2.在Vue中每一个指令都是以v-开头 （用于区分HTML标签原生属性） ...
Vue基本指令（超详细介绍）
龙源IT 的博客
12-14 4163
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 例如我们在入门案例中的v-on，代表绑定事件。
vue的几种常见指令 及使用方法
爬楼梯的前端小白的博客
07-14 1107
vue的几种常见指令，vue的点击事件@click，v-for循环事件
vue指令语法
05-25
Vue的指令是一种特殊的HTML属性，它们带有v-前缀。指令的作用是，在模板中将表达式绑定到指定的DOM元素上，从而使DOM元素显示出相应的动态效果。以下是Vue常用的指令语法： 1. v-bind: 动态绑定HTML属性 ```html <img v-bind:src="imgSrc"> ``` 2. v-if: 根据条件渲染元素 ```html <div v-if="isShow">hello world</div> ``` 3. v-for: 遍历数组或对象，渲染多个元素 ```html <ul> <li v-for="item in itemList">{{ item }}</li> </ul> ``` 4. v-on: 绑定事件监听器 ```html <button v-on:click="handleClick">Click me</button> ``` 5. v-model: 双向数据绑定，将表单元素的值与Vue实例的数据进行绑定 ```html <input v-model="message"> ``` 6. v-text: 更新DOM元素的文本内容 ```html <p v-text="message"></p> ``` 7. v-html: 更新DOM元素的HTML内容 ```html <p v-html="htmlContent"></p> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值