<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title></title>

    <style type="text/css">

        .box{

            background-color: red

/*            height: 200px

            width: 200px*/

        }

        .box2{

            background-color: green;

        }

    </style>>

</head>

<body>

	<div id="app">

        <hr>

        <h2>实例化对象测试</h2>

		<h3>{{title}}</h3>

        <h3>{{1+1}}</h3>

        <h3>{{3>2?"真的":"假的"}}</h3>

        <h3>hahaahahah</h3>

        <!-- <h3>{{123}}</h3> -->

        <!-- 这个可以正常显示，因为数字也是一个对象 -->

        <!-- <h3>{{a}}</h3> -->

        <!-- 这个会报错，会找a这个变量，找不到就会报错 -->

        <hr>

        <h2>指令系统测试</h2>

        <h3 v-if = "show">显示隐藏测试</h3>

        <input v-on:click = "clickhandler" type="button" value="按钮">

        <h3 v-show = "isshow">v-show的测试</h3>

        <h3 v-show = "isshow" v-bind:title="title">v-title的测试</h3>

        <!-- 绑定一个title属性，鼠标悬浮上会显示title的值，可以绑定任何属性 -->

        <!-- v-bind写起来有点繁琐，可以直接用冒号代替 ： -->

        <!-- v-on写起来有点繁琐，可以直接用@符号代替v-on，其他和之前是一样的 -->

        <div class="box" v-bind:class='{box2:isGreen}'>绑定class属性测试</div>

        <input type="button" v-on:click="changeColour" value="切换按钮">

        <button v-on:click="num+=1">加{{num}}</button>

        <img v-bind:src="img" v-bind:alt="time">

        <div v-if = "Math.random() > 0.5">

            数字大于1

        </div>

        <div v-else>

            数字小于1

        </div>

        <div v-if = "type === '打雷'">

            打雷

        </div>

        <div v-else-if = "type === '下雨'">

            下雨

        </div>

        <div v-else>

            雷阵雨

        </div>

	</div>

    <script src="vue.js" type="text/javascript"></script>

    <script>

        // 1.创建vue实例化对象,一个vue实例只能绑定一块地，绑定的这块地就可以使用实例化中的data数据，采用{{}}的方式使用data中的数据

        var app = new Vue({

            el:"#app",

            // el的属性是这个vue的对象绑定的标签的id

            data:{

            // 所有的数据都放在数据属性中,必须是data,第一个属性是el，第二个属性是data

               title:'土豆' ,

               show:true,

               type:"下雨",

               isshow:true,

               title:"title测试",

               img:'./timg.jpg',

               time:`页面加载于${new Date().toLocaleString()}`,

               isGreen:true,

               num:1

            },

            methods:{

                clickhandler(){

                    // 这里这个this就是当前实例化的对象

                    this.$data.show = !this.show;

                },

                changeColour(){

                    alert(123);

                    this.isGreen = !this.isGreen;

                }

            }

        })

        console.log(app);

        // 打印app这个对象

        console.log(app.$el);

        // 打印app这个对象的el属性

        console.log(app.$data.title)

        console.log(app.title)

        // 上面这两种方式效果一样，我们打印app这个对象，可以看到这个对象直接就有一个title属性

        // 2、vue的指令系统

    </script>

</body>

</html>

　　

vue入门一的更多相关文章

  1. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. vue入门学习（基础篇）

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  6. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  7. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  8. parcel+vue入门

    一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...

  9. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  10. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

随机推荐

  1. 洋葱第4场C和D题解……

    只是记录一下: 我们机房讨论的结果……(当然有一个au爷一开始就秒掉了……首先先n^2或随机枚举出一对点根据抽屉原理可得枚举(n/2)^2+1次后至少有一对点全是对的然后对于两个对的点,首先考虑缩放比 ...

  2. visual studio2017----编码和行尾

    在 Visual Studio 中,以下字符将解释为换行符: CR LF:回车符 + 换行符,Unicode 字符 000D + 000A LF:换行符,Unicode 字符 000A NEL:下一行 ...

  3. glog学习（一）：glog的编译及demo

    windows平台: 1.下载glog代码.下载地址:https://github.com/google/glog 2.使用cmake工具,获得对应的工程文件sln. 3.打开sln文件,生成对应的l ...

  4. hasura graphql-engine 集成zombodb

    zombodb 是一个很不错的pg 扩展,可以方便的把es 与pg 集成起来,使用方便 ,目前尽管有一些docker 镜像 但是版本都比较老,所以基于centos7 做了一个新的docker 镜像,同 ...

  5. Redis 总结精讲 看一篇成高手系统-4

    本文围绕以下几点进行阐述 1.为什么使用redis2.使用redis有什么缺点3.单线程的redis为什么这么快4.redis的数据类型,以及每种数据类型的使用场景5.redis的过期策略以及内存淘汰 ...

  6. signapk

    signapk工具可以实现对安卓ROM和安卓应用进行签名.在安卓DIY与安卓ROM制作中作用是非常大的.可以使用其对经过自己DIY修改美化后的应用进行签名或对制作好的安卓ROM卡刷包进行签名.让我们做 ...

  7. rtsp简介

    https://wenku.baidu.com/view/b10415dabd64783e08122b9c.html 1      概要 RTSP(Real Time Streaming Protoc ...

  8. Net-Snmp工具（学习SNMP的工具，开源项目）简单使用

    https://blog.csdn.net/mrzhangzifu/article/details/77882371 Net-Snmp工具的安装与配置  操作系统:Ubuntu16.4  软件版本:n ...

  9. MFC文件处理

    计算机室如何管理自身所存放着的大量的信息的呢?windows的磁盘管理程序为我们提供了一套严密而又高效的信息组织形式--硬盘上的信息是以文件的形式被管理的. 面向存储的文件技术 什么是文件?计算机中, ...

  10. Deployment Descriptor Web.xml

    Deployment Descriptor部署描述符: - 部署描述符是要部署到Web容器或EJB容器的Web应用程序或EJB应用程序的配置文件. - 部署描述符应包含EJB应用程序中所有企业bean ...