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. 使用Spring Data JPA进行数据分页与排序

    一.导读 如果一次性加载成千上万的列表数据,在网页上显示将十分的耗时,用户体验不好.所以处理较大数据查询结果展现的时候,分页查询是必不可少的.分页查询必然伴随着一定的排序规则,否则分页数据的状态很难控 ...

  2. [考试反思]1006csp-s模拟测试62：隔断

    本来说好的好一场烂一场. 那样的日子结束了,连着烂了两场...幸亏T3傻逼了救我一命不算太惨... T1树上的特殊性质会做但是没有继续想下去就死在错贪心上了还没有过那个点... T2迭代至稳定被我错误 ...

  3. 带你上手一款下载超 10 万次的 IDEA 插件

    作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群. 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效 ...

  4. Linux学习（推荐学习资源）——保持更新

    1. 介绍 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的Unix工具软件.应用程序和网络协议. ...

  5. 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作(续)---Harbor的安装

    前期安装文档:https://www.cnblogs.com/lq-93/p/11828626.html Harbor的作用:     开发提交代码至gitlab容器中,Jenkins拉取代码构建镜像 ...

  6. java-optional-快速使用-教程

    前言: 在公司中开发项目时碰到一个从Java8引入的一个Optional类,以前jdk版本使用的比较低,没有使用过,于是我在网上浏览了一些文档写篇文章学习总结一下,希望没有用过的朋友们都能够快速学习到 ...

  7. Python数据可视化之matplotlib

    常用模块导入 import numpy as np import matplotlib import matplotlib.mlab as mlab import matplotlib.pyplot ...

  8. python 抓取youtube教程

    前言: 相信大家很多人都看过youtube网站上的视频,网站上有很多的优质视频,清晰度也非常的高,看到喜欢的想要下载到本地,虽然也有很多方法,但是肯定没有python 来的快, 废话不多说,上代码: ...

  9. ES6入门十二：Module（模块化）

    webpack4打包配置babel7转码ES6 Module语法与API的使用 import() Module加载实现原理 Commonjs规范的模块与ES6模块的差异 ES6模块与Nodejs模块相 ...

  10. 【搞定 Java 并发面试】面试最常问的 Java 并发基础常见面试题总结！

    本文为 SnailClimb 的原创,目前已经收录自我开源的 JavaGuide 中(61.5 k Star![Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核心知识.欢迎 Sta ...