vue快捷键与基础指令详解

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快捷键与基础指令详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-05-29

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使用命令行搭建单页面应用

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

详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

详解vue.js 开发环境搭建最简单攻略

做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼. 具体流程大概如下: 很难理解?没关系,我也没理解,跟着操作就行了,我是window系统. 1.安装node.js 起初是很不理解的,我学 vue.js 还要掌握

详解Vue.js入门环境搭建

vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.np

详解Node.js 命令行程序开发教程

一种编程语言是否易用,很大程度上,取决于开发命令行程序的能力. Node.js 作为目前最热门的开发工具之一,怎样使用它开发命令行程序,是 Web 开发者应该掌握的技能. 下面就是我在它的基础上扩展的教程,应该是目前最好的解决方案了. 一.可执行脚本 我们从最简单的讲起. 首先,使用 JavaScript 语言,写一个可执行脚本 hello . #!/usr/bin/env node console.log('hello world'); 然后,修改 hello 的权限. $ chmod 755

详解Vue路由History mode模式中页面无法渲染的原因及解决

Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.如果因为业务

详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

前言 公司系统在用elementui做后台开发,不免遇到一些需要自己去根据原有的功能上,加一些交互的功能. 今天来介绍下我在用elementUi里的Tag标签与多选框交互的过程,东西听上去很简单,但就是越简单的东西越容易出一些问题.官方tag文档:elementUi-tag标签 效果图: 思路 一.多选框勾选,出现对应的tag: 1.利用watch监听多选框绑定的值A(数组)的变化: 2.根据A的变化,循环拿到勾选多选框的id对应的name,将id以及对应的name组成新的对象数组: 3.将上一

详解vue表单——小白速看

一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 一组代码,看完text.textarea.

详解Vue 单文件组件的三种写法

JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default class Cpn extends Vue{ counter = 0 //data add(){ //methods this.counter += 1 } } TS class写法 @Component export default class Cpn extends Vue{ @Prop(Number) sum : number

详解Vue之事件处理

在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定