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. Windows Server 2016-清理残留域控信息

    本章紧接上文,当生产环境中域控出现问题无法修复以后,一方面我们需要考虑抢夺FSMO角色,另一方面我们需要考虑的问题是清理当前域控的残留信息,以防止残留数据信息导致用户验证或者解析异常等问题.本章讲到如 ...

  2. [福大软工] Z班 第5次成绩排行榜

    作业链接 http://www.cnblogs.com/easteast/p/7613070.html 作业要求 团队项目--选题报告 1)发布博客: 一个团队发布一篇随笔,内容为团队的选题报告,选题 ...

  3. Nginx的configure各项中文说明

    –prefix=<path> – Nginx安装路径.如果没有指定,默认为 /usr/local/nginx. –sbin-path=<path> – Nginx可执行文件安装 ...

  4. Vue生命周期（转）

    https://segmentfault.com/a/1190000011381906

  5. 使用Intellij IDEA将web项目导出为war包

    前言:IDEA导出war包的方式与MyEclipse有一点不同,使笔者在使用的时候有点困惑,在网上查阅相关资料的时候,发现其描述十分不清晰,于是就有了这篇随笔的诞生.话不多说,直接进入正题. 注:ID ...

  6. 1.01-url-open_code

    import urllib.request def load_data(): url = "http://www.baidu.com/" #get的请求 #http请求 #resp ...

  7. UVA 11645 - Bits(数论+计数问题)

    题目链接:11645 - Bits 题意:给定一个数字n.要求0-n的二进制形式下,连续11的个数. 思路:和 UVA 11038 这题相似,枚举中间,然后处理两边的情况. 只是本题最大的答案会超过l ...

  8. UVA10570-Meeting with Aliens（枚举）

    Problem UVA1616-Caravan Robbers Accept: 531  Submit: 2490Time Limit: 3000 mSec Problem Description I ...

  9. git pull request 流程

    git pull request 用于在 fork 官方 repo 到个人 github, 在本地修改后,向官方 repo 请求合并.在官方团队审查过代码后,就可以将自己所做的改动合并到官方 repo ...

  10. [找工作] 2019秋招｜从春招到秋招，Java岗经验总结（收获AT）

    转自(有更多) https://blog.csdn.net/zj15527620802/article/month/2018/10 前言 找工作是一件辛酸而又难忘的历程.经历过焦虑.等待.希望,我们最 ...