<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div id="app">

   <p>{{message}}</p>

   <div v-text="name"></div>

   <div v-html="name"></div>

   <div v-text="num1+num2"></div>

    <div>{{num1+num2}}</div>

    <div>{{temp?name:name2}}</div>

    <div v-if="nb">

        大人们往往会因为小孩子们崇拜拾荒者、邮差以及起重机司机而感到担忧，但现在看来，比起我们成年人所崇拜的那些好莱坞大粪坑里的蛆，孩子们的理想似乎要崇高的多。

    </div>

    <div v-else="nb">

        半夜凉飕飕：道路无差别杀人事件，奇怪的死法

    </div>

    <div v-show="kaclus">

        猫会降低婴幼儿哮喘病的概率

    </div>

</div>

</body>

<script>

  var vm =new Vue({

        el:"#app",

        data:{

            message:"hello Vue",

            name:"morgana",

            num1:1000,

            num2:10,

            temp:false,

            name2:"katherine",

            nb:false,

            kaclus:false

        }

    })

//    setTimeout(function () {

//        vm.name="hahaha"

//    },5000)

</script>

</html>

　　

初识Vue练习的更多相关文章

  1. 初识vue小结

    初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...

  2. 第1章-初识Vue.js

    一.初识Vue 1.1.本次我们学习的内容 常用指令:vue中最基础的内容 交互: 网络请求 组件: 是vue.js 这个框架 最核心,最精华的内容,因为vue呐,它在所有的框架中是把组件化做到了极致 ...

  3. Vue.js——1.初识Vue

    初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面 只关注视图层V,也就是页面的, 2. 为什么要 ...

  4. 通过Laravel 初识Vue.js

    最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...

  5. vue.js随笔记---初识Vue.js

    1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他 ...

  6. 初识Vue.js

    一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧 ...

  7. 六、VueJs 填坑日记之初识*.Vue文件

    上一篇博文中,我们将接口的地址通过webpack代理到了本地,解决了跨域的问题.在之前的文章中,我们一直对项目进行配置,并没有真正的切入正题,可能很多人还不明白我们要做什么?那么今天,我们就要开写代码 ...

  8. 初识Vue——计算属性和观察者

    一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...

  9. 初识Vue——模板语法

    一.插值 1.文本 数据绑定最常见的形式是使用双大括号({{  }}--"Mustache"语法)的文本插值 <div class="mustache"& ...

  10. 初识vue——起步

    一.目录结构: 我们经常使用的是以下几个目录: 1.assets:静态资产文件:在vue组件中,所有组件中,所有模板和CSS都会被vue-html-loader和css-loader解析,并查找资源u ...

随机推荐

  1. Oracle给不同组数据添加顺序

    SELECT DENSE_RANK() OVER(ORDER BY TABLESPACE_NAME),T.* FROM USER_TABLES T;

  2. Spring data jpa 使用技巧记录

    软件152 尹以操 最近在用Springboot 以及Spring data jpa  ,使用jpa可以让我更方便的操作数据库,特开此帖记录使用jpa的一些小技巧. 一.使用spring data j ...

  3. volist/foreach下，点击循环中的一个进行操作

    第一种方法,是给点击元素绑定事件,用ajax将值传到控制器中,其中传的值,用jquery选择器选择值. 1.在html中 <foreach name="save" item= ...

  4. 我的java mvc

    mint mvc 并不是我原创的.她的基础是廖雪峰老师的webwind mvc. webwind是廖老师模仿spring的一个 rest 风格的 mvc 框架,功能简单,但是mvc的核心功能基本具备了 ...

  5. ActiveMQ 的客户端选项

    本章重点 怎么使用独占式消费者 消息分组的威力 理解流和二进制大对象 容错传输 计划消息分发 简介 上一章我们介绍了 ActiveMQ 的代理特性,本章我们将学习 ActiveMQ 客户端的一些高级特 ...

  6. MySQL 索引的知识整理

    前言:       很多面试者,在面试的时候,都会回答,”索引就相当于一本书的字典,有了他能够很快的找到数据”, 这种答案好像在读书的时候老师告诉这么说的吧.今天来全面的描述一下数据库索引的原理及优化 ...

  7. nginx安装目录

    1.rpm -ql nginx看看通过yum安装到哪里了 2./etc/logrotate.d/nginx    配置 nginx日志轮转 用于logrotate服务的日志切割 3./etc/ngin ...

  8. phpstorm修改html模板

  9. grunt-2x2x

    a grunt plugin to resize and rename @2x.png(jpg,gif,) image to .png(jpg,gif) 场景:移动前端开发中,设计给的psd都是双倍图 ...

  10. dyci——IOS动态代码注入

    有时候用xib,更改了布局需要重新运行才可以看到效果,对于比较复杂的应用尤其浪费时间,下面介绍一个工具dyci-不需要重Run应用,也能看到效果 yci的网址:https://github.com/D ...