<!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>vue.js</title>

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

</head>

<body>

    <!-- 挂载点、模板、实例之间的关系

    挂载点 指的是Vue实例里的el属性对应的dom节点 id

    模板 指的是挂载点内部的内容，实例里template属性的内容

    实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中

    加载数据的方法：

    1、插值表示

    2、v-text:将内容进行转义

    3、v-html：不会转义

    事件：

    v-on:click="handleClick" 或者 @click="handleClick"

    面向数据

     -->

    <div id="root">

        <h1 @click="handleClick">{{msg}}</h1>

    </div>

    <script>

            new Vue({

                el:"#root",

                data: {

                    msg:"hello dog!",

                    number: 123

                },

                methods: {

                    handleClick: function() {

                        // alert(123)

                        this.msg = "twodoge"

                    }

                }

            })

        </script>

</body>

</html>

Vue学习之vue实例中的数据、事件和方法的更多相关文章

  1. 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值

    多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  2. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  3. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  5. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  6. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  7. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  8. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  9. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  10. PatentTips - 在物联网中进行数据过滤的方法和装置

    背景技术 [0001] 本发明涉及物联网,特别涉及在物联网进行数据过滤的方法和装置. [0002] 物联网是新一代信息技术的重要组成部分,特指物物相连的网络.具体地,物联网是指通过各种信息传感设备,如 ...

随机推荐

  1. 【Python3爬虫】快就完事了--使用Celery加速你的爬虫

    一.写在前面 在上一篇博客中提到过对于网络爬虫这种包含大量网络请求的任务,是可以用Celery来做到加速爬取的,那么,这一篇博客就要具体说一下怎么用Celery来对我们的爬虫进行一个加速! 二.知识补 ...

  2. 启xin宝app的token算法破解——逆向篇（二）

    启xin宝app的token算法破解--抓包分析篇(一)文章已经对该app进行了抓包分析,现在继续对它进行逆向. 对于一个app而言,我们要逆向app,需要知道什么呢? 逆向工具 Java基础,甚至c ...

  3. 电话面试总结（问的很细）.md

    String 和其他基本类型有什么区别 Tip 基本类型有几种 为什么要给String创建一个常量池而不给其他类创建常量池 常量池的定义是什么 垃圾回收机制是如何运行的 对新生代和老年代不同的处理机制 ...

  4. 设计模式（C#）——05适配器模式

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       自然界有一条规则--适者生存.意思是生物要使用自然界的变化:在程序界中则需要新环境调用现存对象.那么,如何在新环境中 ...

  5. G1 collector 介绍

    背景:由于CMS算法产生空间碎片和其它一系列的问题缺陷,HotSpot提供了另外一种垃圾回收策略,G1(也就是Garbage First)算法,该算法在JDK7u4版本被正式推出,官网对此描述如下: ...

  6. Spring框架入门之Spring4.0新特性——泛型注入

    Spring框架入门之Spring4.0新特性——泛型注入 一.为了更加快捷的开发,为了更少的配置,特别是针对 Web 环境的开发,从 Spring 4.0 之后,Spring 引入了 泛型依赖注入. ...

  7. Oracle - 获取当前周别函数

    CREATE OR REPLACE FUNCTION GET_WEEK (V_RQ in DATE) return varchar2 as str varchar2(); str1 varchar2( ...

  8. 关于Springboot+thymeleaf +MybatisPlus 报错Error resolving template [index], template might not exist的问题解决

    这个问题困扰了我整整一上午,各种方式,什么返回路径 ,静态资源啊 什么的,能想到的都去搞了,可是问题还是解决不了!!!我查看了一下编译文件的[target]文件夹!发现了问题所在!根本就没有编译进去! ...

  9. HDU-4857-逃生-反向拓扑排序+优先队列

    HDU-4857 题意就是做一个符合条件的排序,用到拓扑序列. 我一开始wa了多发,才发现有几个样例过不了,发现1->2->3...的顺序无法保证. 后来就想用并查集强连,还是wa: 后来 ...

  10. 牛客-长沙理工校赛C-取手机

    传送门:https://www.nowcoder.com/acm/contest/96/C 参考:http://www.cnblogs.com/Dillonh/p/8835074.html 题意: d ...