<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="app">

        <!--差值表达式-->

        {{ name1 }}

        <!--v-text 读取文本不能读取html标签-->

        <h1 v-text="name2"></h1>

        <!--v-html 能读取文本和html标签-->

        <div v-html="name3"></div>

        <!--v-model 双向绑定-->

        <input type="text" v-model="name4" />

        <br>

        名字：{{ name4 }}

        <br>

        <!--v-bind 绑定属性-->

        <a v-bind:href="name5">百度一下</a>

        <hr>

        <!--v-if 添加或者移除dom树中-->

        <h1 v-if="name6">你好</h1>

        <!--v-show 修改元素的display的值 进行显示隐藏-->

        <h1 v-show="name7">你好</h1>

        <!--v-for-->

        <ul>

            <li v-for="vo in list">{{ vo.no}},{{vo.name}}</li>

        </ul>

        <!--v-on 绑定事件-->

        <ul>

            <li v-on:click="myclick">单击</li>

            <li @click="myclick">单击的快捷绑定</li>

        </ul>

    </div>

    <script type="text/javascript">

        new Vue({

            // 管理边界

            el:'#app',

            // 数据

            data:{

                name1:'hello',

                name2:'小明',

                name3:'<h1>你好世界</h1>',

                name4:'',

                name5:'http://www.baidu.com',

                name6:true,

                name7:true,

                list:[

                    {no:,name:'aaa'},

                    {no:,name:'bbb'},

                    {no:,name:'ccc'}

                ]

            },

            // 方法

            methods:{

                myclick : function(){

                    console.log("我被点击");

                }

            }

        })

    </script>

</body>

</html>

补充 v-else-if

<div id="box">

    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>

    <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>

    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>

</div>

<script>

    new Vue({

        el: "#box",

        data(){

            return {

                show: true

            }

        }

    })

</script>

补充return问题

在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：

let app= newVue({

    el:"#app",

    data:{

        msg:''

    },

    methods:{

    }

})

在使用组件化的项目中使用的是如下形式：

export default{

    data(){

        return {

            showLogin:true,

            // def_act: '/A_VUE',

            msg: 'hello vue',

            user:'',

            homeContent: false,

        }

    },

    methods:{

    }

}

为何在大型项目中data需要使用return返回数据呢？

不使用return包裹的数据会在项目的全局可见，会造成变量污染

使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

大概9个 {{}} v-text v-html v-model v-bind v-if v-show v-for v-on

指令名 解释
v-text 读取文本内容 不包括html标签
v-html 读取文本内容 包括html标签
v-model 数据双向绑定
v-bind 绑定标签属性
v-if 判断显示隐藏 这个操作dom 安全性好
v-show 判断显示隐藏 操作的是display 不删除元素的dom节点
v-for 循环遍历数据
v-on 绑定自定义方法
{{}} 差值表达式 把data中的数据 显示到页面

VUE常用指令总结！的更多相关文章

  1. vue学习（二）Vue常用指令

    2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...

  2. 【Vue常用指令】

    目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...

  3. 重学VUE——vue 常用指令有哪些？

    一.什么是指令? 在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性.指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上.只有v-for是一个类 ...

  4. Vue.js 第1章 Vue常用指令学习

    今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...

  5. vue常用指令

    1.v-if系列 v-if="数据|判断" 只要条件成立,就显示if中的元素 v-else (注意:必须跟在v-if或者v-if-else的后面,不然失效) 如果if条件不成立显示 ...

  6. vue常用指令总结

    一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况).指令的职责是,当表达式的值改变 ...

  7. Vue常用指令详解分析

    Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...

  8. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  9. Vue常用语法及命令

    1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...

随机推荐

  1. ClientDataSet字段不能进行编辑时的解决方法

    ClientDataSet字段不能进行编辑时的解决方法: procedure ModifyClientDataSet(const YesOrNot: Boolean;  cs : TClientDat ...

  2. React事件传递参数

    <button onClick={(ev) => {this.handleClick(ev,arg1,arg2,...)}} 用箭头函数,注意第一个参数一定要是事件参数.

  3. Tensorflow实战Google深度学习框架-总结-1

    第一章:深度学习简介   1⃣️应用有 1.计算机视觉 2.语音识别 3.自然语言处理 4.人机博弈   2⃣️深度学习,机器学习,AI 的关系

  4. SVN报错：Node remains in conflict显示冲突的解决办法

    如果是提示文件冲突: svn revert --depth=infinity 有冲突的文件名 如果提示目录有冲突: svn revert --depth=infinity 目录名 搞定.

  5. 关于 DjangoUeditor 上传图片图片失败，csrf token missing or incorrect 的解决办法

    Forbidden (CSRF token missing or incorrect.): /ueditor/controller/ [27/Jun/2017 23:49:25] "POST ...

  6. 同一个局域网中用Windows自己的远程桌面远程局域网中的其他PC

    同一个局域网中用Windows自己的远程桌面远程局域网中的其他PC... ===================== 建立Windows远程访问的前提: 1.访问PC和被访问的PC在同一个局域网中 2 ...

  7. Window10+Python3.5安装opencv

    Window10+Python3.5安装opencv 标签: opencvpython 2017-05-14 16:47 2201人阅读 评论(0) 收藏 举报  分类: Python编程(41)  ...

  8. linux下sudo命令

    [userld@redhat2 root]$ sudo ls We trust you have received the usual lecture from the local System Ad ...

  9. CSS3 渐变，rgba与hsla

    radial-gradient:径向渐变 ellipse:椭圆形渐变默认,circle:圆形渐变 定义渐变大小,指定终点位置: farthest-corner:默认,指定径向渐变的半径长度为:从圆心到 ...

  10. tips 前端 bootstrap 嵌套行 嵌套列 溢出 宽度不正确 栅格化系统计算

    bootstrap 当嵌套列时 有时会出现很奇异的row 的width不对问题出现的情况时 <div class="row" > <!--row a--> ...