<!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. 点分治题单(来自XZY)

    点分治题单(来自XZY) 静态点分治 [x] 洛谷 P3806 [模板]点分治1 [x] 洛谷 P4178 Tree [x] 洛谷 P2634 [国家集训队]聪聪可可 [x] 洛谷 P4149 [IO ...

  2. 1233: [Usaco2009Open]干草堆tower

    传送门 感觉正着做不太好搞,考虑倒过来搞 容易想到贪心,每一层都贪心地选最小的宽度,然后发现 $WA$ 了... 因为一开始多选一点有时可以让下一层宽度更小 然后有一个神奇的结论,最高的方案一定有一种 ...

  3. 【Spring Boot项目】Win7+JDK8+Tomcat8环境下的War包部署

    一.pom.xml及启动类修改 pom.xml Step1:指定打包类型 <!-- 打包类型 jar 或 war --> <packaging>war</packagin ...

  4. Vue / keep-alive使用

    keep-alive keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在v页面渲染完毕后不会被渲染成一个DOM元素 <keep-aliv ...

  5. MySQL的数据类型：文本、数字、日期/时间

    在MySQL中,有三种主要的类型:文本.数字和日期/时间类型. 文本类型(text):数据类型                                 描述 CHAR(size) 保存固定长度 ...

  6. 解析天启rk3288源码 /kernel/drivers/char/virtd

    virtd为编译后产生的中间文件,可使用ELF格式逆向 1.ELF文件内容解析readelf: 可解析ELF文件的所有内容;strings: 查看ELF文件中的字符串;file   : 查看ELF文件 ...

  7. kali Linux 入门(一)

    一.描述 1.基于Debian Linux 发行版 2013年3月13日 2.包含约600个安全工具 3.定制 安全稳定的内核 4.前身是BackTrack(2013年停止维护) 5.官方机构:Off ...

  8. centos(6-7)安装openldap

    前言 参考资料: http://yhz61010.iteye.com/blog/2352672 https://www.cnblogs.com/lemon-le/p/6266921.html 实验环境 ...

  9. spring cloud学习笔记五 网关服务zuul

    网关服务是指,客户端发送的请求不用直接访问特定的微服务接口,而且是经过网关服务的接口进行交互,网关服务再去到特定的微服务中进行调用.   网关服务的路由功能和Nginx的反向代理一样,所有的服务都先会 ...

  10. 清理maven缓存

    原文:https://blog.csdn.net/viplisong/article/details/82963989maven下载失败后会缓存文件,可能导致下次下载失败.通过以下两步清理 1.cd ...