Vue引入
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引入的更多相关文章
- vue 引入通用 css
1.在入口 js 文件 main.js 中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue' import App from './App' // 引入App这个组 ...
- vue引入jQuery、bootstrap
vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...
- vue学习记录：vue引入，validator验证，数据信息，vuex数据共享
最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- 解决Vue引入百度地图JSSDK：BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- vue引入js文件时报This dependency was not found:错误
vue引入js文件时报This dependency was not found:错误 使用了很多方法,原来是这么小的问题,特此记录 解决办法 添加 ./
- 16、vue引入echarts，划中国地图
vue引入echarts npm install echarts --save main.js引入 import echarts from 'echarts' Vue.prototype.$echar ...
- js 实现vue—引入子组件props传参
参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...
- vue引入zTree入门
参考1:https://blog.csdn.net/tg928600774/article/details/80911589 参考2:https://blog.csdn.net/ylhsuper/ar ...
随机推荐
- 一次flume exec source采集日志到kafka因为单条日志数据非常大同步失败的踩坑带来的思考
本次遇到的问题描述,日志采集同步时,当单条日志(日志文件中一行日志)超过2M大小,数据无法采集同步到kafka,分析后,共踩到如下几个坑.1.flume采集时,通过shell+EXEC(tail -F ...
- 【Java必修课】HashMap性能很好？问过我EnumMap没
1 简介 我们知道Map只是一个接口,它有多种实现,Java中最常用的是HashMap了.而本文想讲述的是另一个实现:EnumMap.它是枚举类型的Map,要求它的Key值都必须是枚举型的. 2 创建 ...
- win10+MinGw+ffmpeg 编译
一.安装MinGw+msys 下载 mingw-get-setup.exe 并安装,安装完成会弹出以下界面. 选中红色框几个选项,点击Installation->Apply Changes 进行 ...
- [loj2546][JSOI2018]潜入行动（树形DP）
题目描述 外星人又双叒叕要攻打地球了,外星母舰已经向地球航行!这一次,JYY 已经联系好了黄金舰队,打算联合所有 JSOIer 抵御外星人的进攻. 在黄金舰队就位之前,JYY 打算事先了解外星人的进攻 ...
- how2heap 源码及输出
备个份,慢慢写总结 1 first_fit #include <stdio.h> #include <stdlib.h> #include <string.h> i ...
- NOIP模拟 32
我在31反思中膜拜过了B哥 没想到这次又... 我给老姚家丢脸了...STO 首先T1暴力就写挂了... 贪图从$n^3$*$2^n$优化成$n^2$*$2^n$然后打错了 哗哗的扔分 而且正解都想不 ...
- 从V神到以太坊——以太坊发展简史
以太坊的出现,让人们的认识从比特币飞跃到了区块链本身.使得区块链技术在非金融领域的普遍应用成为可能,同时,也被认为是区块链2.0时代的标志,是区块链技术发展史上重要的里程碑. 以太坊的故事,要从比特币 ...
- js判断是否微信浏览器、IE浏览器
/*判断(微信)浏览器*/ function isWeiXin(){var ua = window.navigator.userAgent.toLowerCase();if(ua.match(/Mic ...
- 「Usaco2008 Jan」人工湖O(∩_∩)O 纯属的模拟+栈
题目描述 夏日那让人喘不过气的酷热将奶牛们的烦躁情绪推到了最高点．最终,约翰决定建一个人工湖供奶牛消暑之用． 为了使湖看起来更加真实,约翰决定将湖的横截面建成N(1≤N≤105)个连续的平台高低错落的 ...
- 8.5 NOIP 模拟测试 13
今天的考试说实话T1很简单没A,我是傻X.T2T3难得一批,但是暴力的分还是拿了! 总结一下就是:骗分过样例,暴力出奇迹!只要瞎搞就行了! 话说现在终于不像之前那么傻了,终于知道打暴力了,因为之前暴力 ...