Vue.js的声明:

< script src = “https://unpkg.com/vue” ></ script >

el:值可以是CSS选择符、HTML元素、或者是返回HTML元素的函数。

var app = new Vue（{
el：'#app'，
资料：{
消息：'你好Vue！
}
})-------------------------------------输出你好Vue
 el:绑定选择器
v-bind：动态绑定   css src style 
v-for:获取列表项中的内容
v-if;只渲染他身后表达式为true的元素  显示或隐藏
v-show:只渲染他身后表达式为false的元素 显示或隐藏  
v-on;指令用于监听DOM事件 形式如：v-on:click  

methods:专门放置我们的事件的方法

v-model:表单输入和应用程序之间双向绑定的指令变得轻而易举
Vue.extend()方法创建一个组件
Vue.component()：方法注册组件
{{}}:将数值解释为纯文本                 胡须不能在html中使用    类似于输出 
v-once:执行不更新数据更改的一次内插，但请记住，这也将影响同一节点上的任何绑定
v-html:输出真正的html
胡须不能在HTML属性中使用，而是使用v-bind指令    它也适用于布尔属性 - 如果条件评估为伪造值，则属性将被删除
Vue.js实际上支持所有数据绑定中JavaScript表达式的全部功能
computed:计算属性
<div id="example">

  a={{ a }}, b={{ b }}

</div>

var vm = new Vue({

  el: '#example',

  data: {

    a: 1

  },

  computed: {

    // 一个计算属性的 getter

    b: function () {

      // `this` 指向 vm 实例

      return this.a + 1

    }

  }

})

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基础 笔记的更多相关文章

  1. 一份不错的vue.js基础笔记！！！！

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  2. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  3. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  4. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  6. Vue.js 学习笔记 一

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  7. Vue.js学习笔记(介绍)

    Vue语法也可以进行APP开发,需要借助weex Vue.js是一套构建用户界面的框架,只关注视图层,便于与第三方库或既有项目整合. 在Vue中的核心概念:让用户不能操作Dom元素(减少不必要的dom ...

  8. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. Vue.js 学习笔记之四：Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

随机推荐

  1. react native组件的创建

    react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...

  2. Linux java项目冲突不能正常运行

    部署项目,在windows环境部署到Tomcat能够正常运行,部署到Linux环境下只能访问一些html资源,不能正常运行. 解决步骤: 1.清除webapps目录下所有文件夹,将war包上传至web ...

  3. git中的重要指令

    git命令 任何操作都需要以 git 命令为开头 本地操作: git init 初始化一个本地仓库 新建为 master主分支 git status 查看当前分支状态 git add <文件名& ...

  4. YQCB冲刺周第二天

    YQCB冲刺周第二天 1.实现用户记账的功能 2.实现用户头像的设置 3.实现个人设置的功能 遇到的问题: 记账的分类,数据库存取图片,页面跳转+超链接的使用 团队讨论的照片:             ...

  5. c# 消息机制

    1.windows系统是一个消息驱动的系统,windows本身有自己的消息队列. 系统传递消息给应用程序. 应用程序的消息机制:应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎. 2.c# ...

  6. KNN算法之图像处理一

    KNN: 1.数据挖掘分类技术中最简单的方法之一. 2.也称为邻近算法,K最近邻分类算法 3.每个样本都可以用它最接近的k个邻居来代表 4.一般,距离使用欧式距离或曼哈顿距离(通常,k≤20) pyt ...

  7. adb使用过程常见的几种错误总结

    问题1:Failure [INSTALL_FAILED_ALREADY_EXISTS] 问题原因:该程序已存在. 解决方法:增加-r参数,即可成功覆盖安装 问题2:Failure [INSTALL_F ...

  8. 【bzoj1502】[NOI2005]月下柠檬树 自适应Simpson积分

    题目描述 李哲非常非常喜欢柠檬树,特别是在静静的夜晚,当天空中有一弯明月温柔地照亮地面上的景物时,他必会悠闲地坐在他亲手植下的那棵柠檬树旁,独自思索着人生的哲理.李哲是一个喜爱思考的孩子,当他看到在月 ...

  9. （转）Nginx图片服务器

    本文转至博客http://wenxin2009.iteye.com/blog/2117079 Nginx搭建图片服务器 Nginx下载地址:http://nginx.org/en/download.h ...

  10. C++四种类型转化

    2018-08-02 (星期四)C++类型转换:static_cast提供编译时期静态类型检测:    static_cast <type-id> (expression)    1)完成 ...