Vue引入

概念：

1、el：实例

new Vue({

    el: '#app'

})

// 实例与页面挂载点一一对应

// 一个页面中可以出现多个实例对应多个挂载点

// 实例只操作挂载点内部内容

2、data：数据

<div id='app'>

    {{ msg }}

</div>

<script>

    var app = new Vue({

    	el: '#app',

    	data: {

    		msg: '数据',

    	}

    })

    console.log(app.$data.msg);

    console.log(app.msg);

</script>

<!-- data为插件表达式中的变量提供数据 -->

<!-- data中的数据可以通过Vue实例直接或间接访问-->

3、methods：方法

<style>

    .box { background-color: orange }

</style>

<div id='app'>

    <p class="box" v-on:click="pClick">测试</p>

	<p class="box" v-on:mouseover="pOver">测试</p>

</div>

<script>

    var app = new Vue({

    	el: '#app',

    	methods: {

            pClick () {

                // 点击测试

            },

            pOver () {

                // 悬浮测试

            }

    	}

    })

</script>

<!-- 了解v-on:为事件绑定的指令 -->

<!-- methods为事件提供实现体-->

详细代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>vue引入</title>

</head>

<body>

    <div id="app">

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

        <h2>{{ info }}</h2>

        <h2>{{ message }}</h2>

    </div>

</body>

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

<script>

    // console.log(Vue);

	// 为每个h1 h2 p表片这么写实例太麻烦了 ，一个h2实例只能对上面一个h2标签有效，所以这么设计非常不合理，实例与页面挂载点一一对应。

    // new Vue({

    //    el: 'h1'

    // });

    // new Vue({

    //     el: 'h2'

    // })

    // 1、创建vue实例与页面标签进行绑定，该实例就可以控制该标签机内部所有标签。

    // ps：其实就是用一个大div设置id夹住很多标签  然后这个实例就可以操作下面的这些标签

    new Vue({

        // 2、挂载点：与页面标签绑定的关键，具有唯一性

        el: '#app',

        // 3、vue中要使用的数据

        data: {

            msg: 'h1标签',

            info: '',

            message: ''

        },

        // 4、methods控制所有事件

        methods: {

            action: function () {

                this.msg = 'h1被点击了';

                this.info = 'h1被点击了';

                this.message = 'h1被点击了';

            }

        }

    })

</script>

</html>

Vue引入的更多相关文章

  1. vue 引入通用 css

    1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...

  2. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  3. vue学习记录：vue引入，validator验证，数据信息，vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  4. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  5. 解决Vue引入百度地图JSSDK：BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  6. vue引入js文件时报This dependency was not found:错误

    vue引入js文件时报This dependency was not found:错误 使用了很多方法,原来是这么小的问题,特此记录 解决办法 添加 ./

  7. 16、vue引入echarts，划中国地图

    vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...

  8. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  9. vue引入zTree入门

    参考1:https://blog.csdn.net/tg928600774/article/details/80911589 参考2:https://blog.csdn.net/ylhsuper/ar ...

随机推荐

  1. 明解C语言 入门篇 第二章答案

    练习2-1 #include <stdio.h> int main() { int x; int y; int percent; puts("请输入两个整数"); pr ...

  2. Java12 Collectors.teeing 你需要了解一下

    前言 在 Java 12 里面有个非常好用但在官方 JEP 没有公布的功能,因为它只是 Collector 中的一个小改动,它的作用是 merge 两个 collector 的结果,这句话显得很抽象, ...

  3. CSPS_106

    这场 死的太惨了! 我也不把我的错误像倒垃圾一样放在blog里了qwq 通过这场考试 我深深地认识到了情绪对人类的影响qwq 只要这种东西,不要出现在我的csp中就好了 T1 区间DP.. T2 枚举 ...

  4. 洛谷 pP2146 [NOI2015]软件包管理器

    题目的传送门 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...

  5. 『题解』洛谷P4016 负载平衡问题

    title: categories: tags: - mathjax: true --- Problem Portal Portal1:Luogu Portal2: LibreOJ Descripti ...

  6. 安利一个绘制指引线的JS库leader-line

    前言 之前看到一篇推荐Magi这个搜索引擎的新闻,对于这个搜索引擎是否好用咱们不予置评,但是我在这个搜索引擎上面发现了一个好玩的前端功能. 如上图,将鼠标浮动到学习来源上时,会展示一堆指引线. 本博客 ...

  7. JS面试题-<变量和类型>-JavaScript浅拷贝与深拷贝

    前言 最开始了解到深浅拷贝是因为准备面试,但那个时候因为在学校做的项目比较少需求也比较简单,所以没有在项目中遇到这类问题,所以对这个问题就属于知道这个知识点,看过相关内容,却没有自己的总结,也没有深入 ...

  8. 005.Kubernetes二进制部署kubectl

    一 部署 kubectl 1.1 安装kubectl [root@k8smaster01 ~]# cd /opt/k8s/work [root@k8smaster01 work]# wget http ...

  9. （转）白话数字签名(2)——软件&设备

    然而它太慢了 非对称加密算法有一个重大缺点——加密速度慢,或者说得更拽一些,编码率比较低.例如在上一篇里我给Clark传的那个1GB的小电影,进行非对称加密足足用了66小时.那个借条小一些吧,也用了将 ...

  10. 一分钟带你了解下Spring Security！

    一.什么是Spring Security? Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架,它是用于保护基于Spring的应用程序的实际标准. Spring Secu ...