vue快捷键与基础指令详解

2024-10-26 00:15:08

v-bind可以简写成：

<img src="{{url}}">→<img :src="url" :width="50px">
v-on:click可以写成@click
<button @click="up()"></button>

v-if实例可以通过对对象操作条件来实现想要展示的效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-if="seen">现在你看到我了</p>
      <template v-if="ok">
        <h1>天气炎热</h1>
      </template>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          seen:false,
          ok: true
        }
      })
    </script>
  </body>
</html>

v-for实例：v-for是可以做循环数组使用的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ol>
        <li v-for="x in lists">{{x.title}}</li>
      </ol>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          lists: [
            { id: 1, title: "臧三" },
            { id: 2, title: '李四' },
            { id: 3, title: "王五" },
          ]
        }
      })
    </script>
  </body>
</html>

v-show实例：v-show可以操作true/false来实现效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="button" value="点击" v-on:click="a=false" />
      <div style="width: 100px;height: 100px;background: red;" v-show="a">
      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          a: true
        }
      })
    </script>
  </body>
</html>

:class实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js" ></script>
    <style>
      .red{
        color:red
      }
      .blue{
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p :class="{red:a,blue:b}">我是123</p>
    </div>
    <script>
      new Vue({
        el:"#app",
        data:{
            a:true,
            b:true
        }
      })
    </script>
  </body>
</html>

第二种方法

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js" ></script>
    <style>
      .red{
        color:red
      }
      .blue{
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p :class="json">我是123</p>
    </div>
    <script>
      new Vue({
        el:"#app",
        data:{
          json:{
            red:true,
            blue:true
          }
        }
      })
    </script>
  </body>
</html>

以上所述是小编给大家介绍的vue快捷键与基础指令详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

详解Vue使用命令行搭建单页面应用

使用命令行搭建单页面应用我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目一. 下载工具 node, git 的下载大家可以去官网自行下载就可以了. 下面说一说安装 npm,npm 是在以上两个都安装的情况下才可以的. 国内直接 git npm 非常慢,所以我们到 taobao 的 npm 镜像下面去下载安装镜像地址>> 打开安装好的 git bash 1 . 在 Git Bash 输入镜像的地址: 下载成功后,输入 cnpm -v
Vue概念及常见命令介绍(1)

Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件. Vue和MVVM模式 MVVM模式即Model-View-ViewModel. Vue是以数据为驱动的,Vue自身将DOM和数据进行绑定,一旦创建绑定,DOM和数据将保持同步,每当数据发生变化,DOM会跟着变化. ViewModel是V
vue快捷键与基础指令详解

v-bind可以简写成 : <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button> v-if实例可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <he
Vue.js directive自定义指令详解

自定义一个demo指令 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definition是指定义对象.其中,定义对象可以提供一些钩子函数. <div id="app">  <input type="text" v-focus/> </div> <script> // 注册一个全局自定义指令
Vue 2.0入门基础知识之内部指令详解

1.Vue.js介绍当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-
vue内置指令详解

指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title 等等主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url" rel="external nofollow" rel="external n
八个Vue中常用的v指令详解

目录 Vue中常用的8种v指令 1 v-text 指令 2 v-html 指令 3 v-on 指令案例:计数器 4 v-show 指令 5 v-if 指令 6 v-bind 指令 7 v-for 指令 8 v-on 补充总结 Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text=“变量/表达式” 文本的设置字符串变量+数字可以直接写是拼接字符串如果出现要使用外部不相同的引号 v-html=“变量” 文本或者页面的设置
Vue组件选项props实例详解

前面的话组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项使用Prop传递数据
vue-router 路由基础的详解

vue-router 路由基础的详解今天我总结了一下vue-route基础,vue官方推荐的路由. 一.起步 HTML <div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link&g
iOS逆向工程之Hopper中的ARM指令详解

虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是可以的.虽然当时感觉学这门课以后似乎不怎么用的上,可曾想这不就用上了吗,不过之前学的都差不多忘了,还得捡起来呢.ARM指令集是精简指令集,从名字我们就能看出指令的个数比那些负责指令集要少一些.当然本篇所涉及的ARM指令集是冰山一角,不过也算是基础,可以阅读Hopper中的汇编了,实践出真知,看多了自
bing Map 在vue项目中的使用详解

写在最前面拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k
Vue 中mixin 的用法详解

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

vue快捷键与基础指令详解

相关推荐

随机推荐