<!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. 微信小程序(三)--小程序UI开发

    一.UI介绍 所谓的UI(user Interface)开发指的就是小程序应用界面的开发,在小程序开发框架中会为我们提供一系列的基础组件,例如HTML开发中为我们所提供的一些最基础的标签.需要注意的是 ...

  2. ApplicationContextAware 快速获取bean

    在Web应用中,Spring容器通常采用声明式方式配置产生:开发者只要在web.xml中配置一个Listener,该Listener将会负责初始化Spring容器,MVC框架可以直接调用Spring容 ...

  3. MySQL-第四篇索引

    1.创建索引的作用 创建索引的唯一作用就是加速对表的查询.索引通过使用快速路径访问方法来快速定位数据,从而减少了磁盘的I/O. 2.索引和表一样也是数据库中的一种对象,但它必须从属于某张表,不能独立存 ...

  4. GNU MAKE 笔记

    最近在调试OJ, 忙了4天多, 最后的问题是judge模块不能正常工作. judge 模块就是两个C++源文件, 它的工作是 从数据库获取用户提交的源码 测评 将测评结果写到数据库 测评部分是与数据库 ...

  5. 8、numpy——数组的迭代

    1.单数组的迭代 NumPy 迭代器对象 numpy.nditer 提供了一种灵活访问一个或者多个数组元素的方式. 迭代器最基本的任务的可以完成对数组元素的访问. 1.1 默认迭代顺序 import ...

  6. xml&dom_sax&dom4j的常见操作

    <? xml version =”1.0” encoding=”GB2312”?> <!-- 学生信息—><?xml-stylesheet type=”text/css” ...

  7. typescript 深层次对象内层（N）转外层(N),支持多层级递归转换，多应用于多语言数据结构转换

    如下数据结构转换 var a = { b: { en: 1, zh: 2, }, c: { en: 3, zh: 4, }, } //===> var b = { en: { b: 1, c: ...

  8. 安装weblogic中间件_test

    小编对他还不是很了解,等了解的时候小编吧这句话删除(注意) 如果过程中有问题的话请联系 QQ:291562721 weblogic是ORACLE商家,他是一门中间件服务: 因为一些安全的原因,扫描发现 ...

  9. KVC、KVO 理解

    参考经典链接: https://www.jianshu.com/p/f8198ca5e682 https://www.jianshu.com/p/be80318115a7 一. KVC 1.KVC介绍 ...

  10. What are draw calls(绘制命令) and what are batches(批)

    Resolution It is important to know what are draw calls and what are batches. A draw call is a call t ...