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-Hyper-V 2016新增功能

    本文解释了Windows Server 2016和Microsoft Hyper-V Server 2016上Hyper-V的新增功能和变更功能. 与Connected Standby兼容(新) 在使 ...

  2. 更换jupyter notebook风格主题、修改默认工作路径（Ubuntu系统和Win系统）

    默认的风格对代码关键词的颜色提醒很不明显,而且白色背景长久使用非常刺眼,所以考虑更换主题. 在更换途中,发现代码输出行,前几个字符被遮挡显示不出来,找了很久才解决,备忘一些要点. 1:替换主题方法 h ...

  3. java操作elasticsearch实现组合桶聚合

    1.terms分组查询 //分组聚合 @Test public void test40() throws UnknownHostException{ //1.指定es集群 cluster.name 是 ...

  4. python3编写网络爬虫19-app爬取

    一.app爬取 前面都是介绍爬取Web网页的内容,随着移动互联网的发展,越来越多的企业并没有提供Web页面端的服务,而是直接开发了App,更多信息都是通过App展示的 App爬取相比Web端更加容易 ...

  5. 从此使用linux系统，但是QQ是必不可少的！！该篇文章方法成功！！！已验证！！！！！

    一开始,我在Ubuntu14.04下安装的QQ版本是WineQQ2013SP6-20140102-Longene, 但后来发现这个版本QQ在linux下问题很多,比如不能用键盘输入密码,QQ表情使用失 ...

  6. Ecelipse上添加Server

    第一步,打开eclipse工具,点击菜单栏中的"Help",选择"Install New Software" 第二步,点击Add按钮 第三步,Name输入:&q ...

  7. Thread.currentThread()和this的区别——《Java多线程编程核心技术》

    前言:在阅读<Java多线程编程核心技术>过程中,对书中程序代码Thread.currentThread()与this的区别有点混淆,这里记录下来,加深印象与理解. 具体代码如下: pub ...

  8. PHP程序员遇到职业问题时，是离职？还是坚持？

    PHP程序员遇到职业问题时,是离职?还是坚持? 初级php程序员最担心在公司里遇到原本其他程序员开发的项目,他们“跑路”以后的工作就由新程序员完成.而新员工也不懂内部的逻辑,酱紫让程序员很难处理后续的 ...

  9. https验证证书的三个级别

    一.无条件信任证书 1. func urlSession(_ session: URLSession, didReceive challenge: URLAuthenticationChallenge ...

  10. centos7下安装docker（17.4docker监控----prometheus）

    Prometheus是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus提供了监控数据搜集,存储,处理,可视化和告警一套完整的解决方案 Prometheus架构如盗图: 官网上的原 ...