Vue.js基础 笔记
Vue.js的声明:
< script src = “https://unpkg.com/vue” ></ script >
el:值可以是CSS选择符、HTML元素、或者是返回HTML元素的函数。
methods:专门放置我们的事件的方法
<div id="example"> |
var vm = new Vue({ |
a=1 b=2
每个 Vue 实例都会代理其 data 对象里所有的属性
<script>
window.onload=function() {
new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<!-- v-on:click="show()简写为@click="show()" -->
<input type="button" value="按钮" v-on:click="show()">
</div>
</body>
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
|
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
//target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
//DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素//节点,class是属性节点,head是文本节点,tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回//h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用。
这个写法不太懂 没自己写过
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!
|
<script>
window.onload=function() {
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
// clientX鼠标x轴坐标 在按钮的任何位置点出现坐标数值
alert(ev.clientX);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<!-- 个人理解$event就是自调用函数 -->
<input type="button" value="按钮" v-on:click="show($event)">
</div>
</body>
</html>
<script>
window.onload=function() {
new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(1);
//原生的阻止冒泡
ev.cancelBubble=true;
},
show2:function(){
alert(2);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<!-- 这是原生阻止冒泡 -->
<input type="button" value="按钮" v-on:click="show($event)">
<!-- 这是简写 加stop去掉上面的wv和原生的代码
<input type="button" value="按钮" @click.stop="show()"> -->
</div>
</body>
</html>
Vue.js基础 笔记的更多相关文章
- 一份不错的vue.js基础笔记!!!!
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- Vue.js 学习笔记 一
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
- Vue.js学习笔记(介绍)
Vue语法也可以进行APP开发,需要借助weex Vue.js是一套构建用户界面的框架,只关注视图层,便于与第三方库或既有项目整合. 在Vue中的核心概念:让用户不能操作Dom元素(减少不必要的dom ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js 学习笔记之四:Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
随机推荐
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- CentOS 6.7下创建桌面快捷方式
CentOS 6.7下创建桌面快捷方式如下: 1 在桌面右键,选择“创建启动器" 2 在弹出菜单中,填写名称(显示在桌面上的名字),命令(可执行程序的路径) 3 点击弹出菜单左边的图标,选择 ...
- “Hello World!”团队第六周的第五次会议
今天是我们团队“Hello World!”团队第六周召开的第五次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 八.代码 一 ...
- CS小分队第二阶段冲刺站立会议(5月30日)
昨日成果:解决了前天遗留的问题,实现了主界面对于电脑上应用的添加和删除 遇到问题:添加和删除按钮时候,按钮位置图像与北京图片冲突,会出现闪动现象. 删除是通过右键单击出现菜单,其中有删除的选项,但是这 ...
- python __call__ 函数
__call__ Python中有一个有趣的语法,只要定义类型的时候,实现__call__函数,这个类型就成为可调用的. 换句话说,我们可以把这个类型的对象当作函数来使用,相当于 重载了括号运算符. ...
- c# Webservice技术整理
因为平常项目中使用webservice比较少,然后就将本来不太熟悉的webservice给忘记掉了.所以再次整理如下: 百度搜索关键词 :c# webservice 1. 联接地址: http://w ...
- Java中按值传递与按引用传递的区别
值传递:(形式参数类型是基本数据类型):方法调用时,实际参数把它的值传递给对应的形式参数,形式参数只是用实际参数的值初始化自己的存储单元内容,是两个不同的存储单元,所以方法执行中形式参数值的改变不影响 ...
- 【poj2154】Color Polya定理+欧拉函数
题目描述 $T$ 组询问,用 $n$ 种颜色去染 $n$ 个点的环,旋转后相同视为同构.求不同构的环的个数模 $p$ 的结果. $T\le 3500,n\le 10^9,p\le 30000$ . 题 ...
- 题解 P1781 【宇宙总统】
小金羊发现用的方法和python大佬们的方法还是不一样... (大概是我太弱了qAq) emmm... (Mode:Python 3)Code: a=int(input()) #几个数 L=list( ...
- elasticsearch 第一篇(入门篇)
介绍 elasticsearch是一个高效的.可扩展的全文搜索引擎 基本概念 Near Realtime(NRT): es是一个接近实时查询平台,意味从存储一条数据到可以索引到数据时差很小,通常在1s ...