Vue之小入门

<div id="app">{{ greeting }}</div>

<script>

    let oDiv = document.getElementById('app');

    oDiv.innerText = 'Hello World';

</script>

代码执行结果：

　　使用Vue实现上个实例的功能：

<script src='./static/vue.min.js'></script>　　
<div id="app">{{ greeting }}</div>

<script>

    new Vue({

        el: '#app',

        data: {

            greeting: 'Hello Vue',

        }

    })

</script>

　　代码打印结果：

　　v-text

<script src="./static/vue.min.js"></script>

<body>

<div id="app" v-text="greeting"></div>

<script>

    // 数据模板引擎

    // v-开头的指令是帮助我们渲染数据用的

    new Vue({

        el: '#app',

        data: {

            greeting: 'Hello Vue',

        }

    })

</script>

</body>

　　代码打印结果：

　　v-html

<script src="./static/vue.min.js"></script>

<body>

<div id="app" v-html="greeting"></div>

<script>

    new Vue({

        el: '#app',

        data: {

            greeting: '<h1>Hello Vue</h1>'

        }

    })

</script>

</body>

　　代码打印结果：

　　v-for

<script src="./static/vue.min.js"></script>

<body>

    <div id="app">

        <ul>

            <li v-for="aihao in xxoo">{{aihao}}</li>

        </ul>

        <ul>

            <li v-for="student in students">

                姓名：{{student.name}},

                年龄：{{student.age}},

                爱好：{{student.hobby}}

            </li>

        </ul>

    </div>

    <script>

        new Vue({

            el: '#app',

            data: {

                xxoo: ['吃', '喝', '嫖', '赌'],

                students: [

                    {

                        name: '龙达',

                        age: 18,

                        hobby: 'girl',

                    },

                    {

                        name: '小默',

                        age: 19,

                        hobby: 'younggirl',

                    },

                    {

                        name: '小小默',

                        age: 20,

                        hobby: 'she',

                    }

                ]

            }

        })

    </script>

</body>

　　打印结果：

　　v-if / v-else-if / v - else

<script src="./static/vue.min.js"></script>

<body>

    <div id="app">

        <div v-if="role == 'LongDa'">

            <h1>男宾一位！！！</h1>

        </div>

        <div v-else-if="role == 'XiaoXiaoMo'">

            <h1>男宾两位！！！</h1>

        </div>

        <div v-else>

            <h1>滚！！！</h1>

        </div>

    </div>

    <script>

        let vm = new Vue({

            el: '#app',

            data: {

                role: 'LongDa',

            }

        })

    </script>

</body>

　　打印结果：

　　v-show

<script src="./static/vue.min.js"></script>

<body>

    <div id="app">

        <div v-show="isShow">Hello Vue</div>

    </div>

    <script>

        let vm = new Vue({

            el: '#app',

            data: {

                isShow: false,

            }

        })

    </script>

</body>

　　具体实现原理是将div标签的display属性值设置为none。

　　v-bind

<script src="./static/vue.min.js"></script>

    <style>

        .active {

            width: 500px;

            height: 500px;

            background-color: lawngreen;

        }

    </style>

<body>

    <div id="app">

        <a v-bind:href="jingdong">去京东</a>

        <div :class="[isActive]"></div>

    </div>

    <script>

        let vm = new Vue({

            el: '#app',

            data: {

                jingdong: 'https://www.jd.com',

                isActive: 'active',

            }

        })

    </script>

</body>

　　打印结果：　　

　　v-bind可以省略，直接写：class=['xxoo']

0省略，

Vue之小入门的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...

  2. Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  3. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  4. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  5. 04慕课网《vue.js2.5入门》——Vue-cli开发todolist

    主要文件目录: 文件代码: 根实例,初始化vue: <!--index.html,网站入口页面,和main.jsp组成一套.vue文件,包含--> <!DOCTYPE html> ...

  6. 跟我一起做一个vue的小项目（二）

    这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...

  7. Matplotlib的小入门

    Matplotlib专门用于开发2D图表(包括3D图表),在日常数据处理中经常需要运用到它,它的用法非常多样,这里记录一些基础用法,算是一个小入门,后面如果有更复杂的画图要求,再进一步学习. 如果有需 ...

  8. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

  9. Vue的理解：Vue.js新手入门指南----转

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...

随机推荐

  1. Linux 自动化部署Rsyslog服务

    Linux 自动化部署Rsyslog服务 源码如下: #/bin/bash #该脚本用于自动化部署Ryslog服务配置 #作者:雨中落叶 #博客:https://www.cnblogs.com/yuz ...

  2. Unity 琐碎(2): Shader 颜色调试

    Shader的调试有点蛋疼,最近在测试Image Effect中深度还原时,不知道输出的结论是否正确,后面就采取了这种策略.在物体上世界坐标位转换区间到[0,1],然后作为颜色进行输出.然后Image ...

  3. js中split()方法得到的数组长度

    js 中split(",")方法通过 ”,“ 分割字符串, 如果字符串中没有 “,” , 返回的是字符串本身 var str = “abc”://分隔符个数为0 var newSt ...

  4. CentOS 7下安装Python3.6

    CentOS 7下安装Python3.6.4   CentOS 7下安装Python3.5 •安装python3.6可能使用的依赖 yum install openssl-devel bzip2-de ...

  5. Linux的常见问题解答和管理技巧

    Linux的常见问题解答和管理技巧 一. 如何建立多用户 提醒大家一句,别一直使用root用户,因为root用户在系统中有着至高无上的权力,一不小心就可能破坏系统.比如我们想删除/temp目录下的文件 ...

  6. java 常用

    1.使用第三方PageHelper分页对象 Page<MallCashcouponUser> page = PageHelper.startPage(mallCashcouponUser. ...

  7. day26 Python isinstance和issubclass

    isinstance(obj,cls)检查是否obj是否是类 cls 的对象 issubclass(sub, super)检查sub类是否是 super 类的派生类 class Foo(object) ...

  8. Oracle数据块深入分析总结

    http: 最近在研究块的内部结构,把文档简单整理了一下,和大家分享一下.该篇文章借助dump和BBED对数据 库内部结构进行了分析,最后附加了一个用BBED解决ORA-1200错误的小例子.在总结的 ...

  9. Vim 去除因为 Unix 和 Windows 换行符不同带来的 ^M 问题

    由于各操作系统对换行符的处理不同, Unix: \n Windows : \r\n Mac : \r 所以有时 Vim 打开的文件会有如下情况: 解决方法为:在 Vim 中执行命令 :%s/\r//g ...

  10. 【LOJ 2144】「SHOI2017」摧毁「树状图」

    LOJ 2144 84pts 首先\(op2\)很简单.直接并查集一搞就好了(话说我现在什么东西都要写个并查集有点...) 然后\(op0\)我不会,就直接\(O(n^2)\)枚举一下\(P\)这个人 ...