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. Microsoft .NET Framework 3.5 离线安装方法 （仅适用于Win8以上的系统）

    所需工具:本系统对应原版镜像或Win8以上操作系统原版ISO镜像 操作: 1.利用Windows资源管理器挂载 ISO 镜像,或其他虚拟光驱工具挂载镜像,记住挂载的盘符 2.打开Windows命令提示 ...

  2. 适合使用并行的一种bfs

    这种写法的bfs和前面的最大区别在于它对队列的处理,之前的简单bfs是每次从队列中取出当前的访问节点后,之后就将它的邻接节点加入到队列中,这样明显不利于并行化, 为此,这里使用了两个队列,第一个队列上 ...

  3. CSS2属性选择器和css3选择器的用法和区别

    兄弟们,这是我第一次写博客,希望对进来的人有用,写的不好别喷哈,谢谢. css2属性选择器: 1.[attribute] 例子:   [title] 解释:   选择含有  title  属性的所有元 ...

  4. Cobalt Strike 服务器搭建及使用

    Cobalt Strike使用中的一些坑(一) http://www.cnblogs.com/miaodaren/articles/7829793.html cobaltstrike3.8服务器搭建及 ...

  5. node express 上传文件

    npm install --save multer var fs = require('fs'); var multer = require('multer'); var upload = multe ...

  6. vue同一页面中拥有两个表单时，验证问题

    问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 我们可以通过为两个表单添加ref属性 之后在通过调用resetFields()方法 ...

  7. （转）Spring Boot 2 (五)：Docker Compose + Spring Boot + Nginx + Mysql 实践

    http://www.ityouknow.com/springboot/2018/03/28/dockercompose-springboot-mysql-nginx.html 我知道大家这段时间看了 ...

  8. node.js—File System（文件系统模块）

    文件系统模块概述 该模块是核心模块,提供了操作文件的一些API,需要使用require导入后使用,通过 require('fs') 使用该模块 文件 I/O 是由简单封装的标准 POSIX 函数提供的 ...

  9. Rancher学习笔记----在UI界面添加主机页面无法正常显示

    今天在学习rancher添加主机的时候,遇到了一个小问题,但是困扰老娘一上午 问题描述:在点击添加主机的时候,页面有跳转,但是页面显示为空,没有任何可选项.如下正常界面: 解决办法是:请换个浏览器

  10. servlet是线程安全的么

    servlet生命周期 三个重要方法 1  init() 进行资源的加载 2 service() 处理请求,根据请求方式,调用doGet或者doPost 3 destroy() 进行资源的释放 ser ...