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. Educational Codeforces Round 71 (Rated for Div. 2)E. XOR Guessing

    一道容斥题 如果直接做就是找到所有出现过递减的不同排列,当时硬钢到自闭,然后在凯妹毁人不倦的教导下想到可以容斥做,就是:所有的排列设为a,只考虑第一个非递减设为b,第二个非递减设为c+两个都非递减的情 ...

  2. 程序员接私活经验总结，来自csdn论坛语录

    以下为网上摘录,以做笔记: 可是到网上看看,似乎接私活也有很多不容易,技术问题本身是个因素,还有很多有技术的人接私活时被骗,或者是合作到最后以失败告终,所以想请有经验的大侠们出来指点一下,接私活是怎么 ...

  3. CSPS模拟 98

    T1 待改 T2 这道题的爆炸充分说明我最近已经颓到一定境界了 考虑到总步数不可能超过n 直接枚举总步数,那么任意时刻对末态的影响就是确定的 T3 两遍最短路,一遍从-1的限制考虑求出允许的最早时间, ...

  4. NOIP模拟 22

    剧情回放:xuefeng:考场上你们只打暴力不打正解,我不满意! skyh:考场怒切T2以表明自己拥护xuefeng的决心 BoboTeacher:这场考试就没想让你们上100 神犇skyh:(笑而不 ...

  5. VM安装CentOS系统

    本篇文章主要介绍了VMware安装Centos7超详细过程(图文) 1.软硬件准备 软件:推荐使用VMwear,我用的是VMwear 12 镜像:CentOS7 ,如果没有镜像可以在官网下载 :htt ...

  6. 聚类——密度聚类DBSCAN

    Clustering 聚类 密度聚类——DBSCAN 前面我们已经介绍了两种聚类算法:k-means和谱聚类.今天,我们来介绍一种基于密度的聚类算法——DBSCAN,它是最经典的密度聚类算法,是很多算 ...

  7. Resource Path Location Type Target runtime Apache Tomcat v6.0 is not defined(项目报错)已解决

    我换了开发工具后,导入的项目不是这里报错就是那里不错.不过,我喜欢.在tomcat里面部署项目后,定位到报错行时,总是提示我这句话:Description Resource Path Location ...

  8. jenkins里的定时构建

    1. 定时构建语法:* * * * * (五颗星,多个时间点,中间用逗号隔开)第一个*表示分钟,取值0~59第二个*表示小时,取值0~23第三个*表示一个月的第几天,取值1~31第四个*表示第几月,取 ...

  9. 点击a标签的时候出现虚影

    在a标签中添加 outline:none;就可以去除了

  10. SpringBoot基本配置详解

    SpringBoot项目有一些基本的配置,比如启动图案(banner),比如默认配置文件application.properties,以及相关的默认配置项. 示例项目代码在:https://githu ...