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. C++多线程同步技巧（二）--- 事件

    简介 Windows在线程控制方面提供了多种信号处理机制,其中一种便是使用 CreateEvent() 函数创建事件,然后使用信号控制线程运行.其中将事件变为有信号可使用 SetEvent() 函数, ...

  2. Linux端口映射，80端口映射到8080端口

    iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080 其中eth0为外网网卡名称 ipt ...

  3. PATH_SEPARATOR

    PATH_SEPARATOR是一个常量,在Linux系统中是一个" : "号,Windows上是一个";"号.所以编写程序时最好用常量 PATH_SEPARAT ...

  4. linux ubuntu 关于vim得一些基本命令

    1.vim显示行号 :set number 2. 快捷键 J 向下 K 往上 H 向左 L 向右 ctrl+shift+T 打开新窗口 ctrl+Page Down 所有vim窗口向下切换 ctrl+ ...

  5. Linux下编译安装Apache报APR not found错误的解决办法

    我在编译安装完Nginx.MySQL和PHP(见之前一篇博客:LNMP环境搭建详细教程)之后,进行apache的编译安装: cd /usr/local/src wget http:.tar.gz ta ...

  6. vue 之 .sync 修饰符

    在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...

  7. 6.context对象

  8. python 线程队列、线程池、全局解释器锁GIL

    一.线程队列 队列特性:取一个值少一个,只能取一次,没有值的时候会阻塞,队列满了,也会阻塞 queue队列 :使用import queue,用法与进程Queue一样 queue is especial ...

  9. nodejs websocket

    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <script ty ...

  10. （转）Spring Boot 2 (六)：使用 Docker 部署 Spring Boot 开源软件云收藏

    http://www.ityouknow.com/springboot/2018/04/02/docker-favorites.html 云收藏项目已经开源2年多了,作为当初刚开始学习 Spring ...