<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>

    </title>

</head>

<body>

    <div id ="app">

        <h2>{{title}}</h2>

    <div class="box">{{content}}</div>

    <!-- v-*:指令系统 -->

    <button v-on：click ="bian">变</button>

</div>

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

    <script type="text/javascript">

            //数据驱动视图

            var options ={

                    el: "#app",

                    data:{

                        title :"我是一个h2标题",

                        content:" 嘿嘿嘿"

                    },

                methods:{

                    bian:function(){

                        this.title="该了"

                    }

                }

            };

            var app= new Vue(options);

            console.log(app.title)

    </script>

</body>

</html>

day 97 VUE第一天的更多相关文章

  1. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  2. 总结Vue第一天：简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  3. Vue第一个自定义组件：数字输入框(number-input)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 18课 Vue第一节

    Q1: url-loader必须搭载file-loader?Q2: 图片的打包问题,如果直接写在img标签里用src引用图片,该如何打包?Q3: 如何根据不同的页面html模板打包与之对应的css/j ...

  5. 01 (H5*) Vue第一天

    目录 1:什么是Vue.js 2:MVC和MVVM. 3:为什么要学习前段框架 4:框架和库的区别 5:怎么使用Vue. 6:常见的Vue指令 7:  五大事件修饰符 8:在vue中使用class样式 ...

  6. Vue第一天

    什么是 Vue.js? Vue.js是前端的主流框架之一,与 Angular.js.React.js一起,并称为前端三大主流框架 Vue.js是一套构建用户界面的框架,只关注视图层,它不仅易上手,还便 ...

  7. vue第一篇（搭建vue开发环境）

    1.下载node并安装 下载地址: https://nodejs.org/zh-cn/ 下载后双击文件安装 2.检查是否安装成功 node -v v10.16.0 npm -v 6.9.0 如果能正常 ...

  8. 学习Vue第一节，Vue的模式与写法格式

    引用Vue <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf- ...

  9. VUE第一个项目怎么读懂

    VUE介绍 VUE是前端开发框架. 原始的前端开发需要工程师写html.写css.写javascript(js).js是脚本语言,浏览器可以运行js来执行一些js支持的动作,例如点击反馈,下拉菜单.操 ...

随机推荐

  1. mysql练习题目试水50题，附建库sql代码

    如果你没试过水的话,那一题一题地每一题都敲一遍吧.不管它们对你看来有多么简单.  建库代码 部分题目答案在末尾,可用ctrl f  搜索题号. 作业练习——学生-选课 表结构 学生表: Student ...

  2. 在Eclipse的kepler中执行OSGIproject出错的解决方式

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/canlets/article/details/29620301 今天学习OSGI的过程中依照书上所述 ...

  3. 阿里云服务器安装mongodb

    1.下载mongodb curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.9.tgz 2.解压 tar zxvf mo ...

  4. zabbix3.4.8配置自动发现主机并监控

    一.       自动发现功能简介 Zabbix服务器端通过网络或者主机名等方式进行客户端的扫描发现,从进行加入到监控的主机队列中,适用于批量加入多主机监控的场景. 二.       自动发现功能实施 ...

  5. URAL - 1486 二维字符串HASH

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1486 题意:给定一个n*m的字符矩阵,问你是否存在两个不重合(可以有交集)的正方形矩阵完 ...

  6. 在vCenter上创建新用户 （适用版本6.0）

  7. HTML基础 img标签 做一个图库

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. elasticsearch 进行聚合+去重查询

    转载:https://www.jianshu.com/p/c03c3c8bf583 以客户customer为例 我想查询每日的客户数. 先按照日期分桶,然后在桶内按照 姓名来去重 来计算客户数(实际会 ...

  9. BZOJ4386 [POI2015]Wycieczki 矩阵+倍增

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4386 题解 一眼就可以看出来是邻接矩阵快速幂. 可是这里的边权不为 \(1\).不过可以发现, ...

  10. 前端每日实战：72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 此视频是可 ...