Vue基础
1.可以使用 methods 来替代 computed,效果上两个都是一样的.
但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。 {{ reversedMessage }}
使用 methods ,在重新渲染的时候,函数总会重新调用执 {{ reversedMessage2() }}
用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性
2.事件修饰符:
.stop阻止事件冒泡
.prevent提交事件不再重载页面
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身(而不是子元素)触发时触发回调
.once click事件只能点击一次
3.按键修饰符
为常用的按键提供了别名 .enter .tab .delete ==
4.表单 v-model 复选框、select、按钮
.lazy input中同步的事件转变为在change事件中同步
.number 将输入的值转变为Number类型的
.trim 去掉收尾的空格
5.创建一个组件并使用
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>' })
// 创建根实例 new Vue({ el: '#app' })
</script>
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child } })
6.组件 父组件向子组件传值:props
子组件向父组件传值:
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
7.自定义指令: directives 选项来注册局部指令
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus() }
})
Vue基础的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- java重写和重载
方法的重载: 在一个类中的两个或两个以上的方法,他们方法名相同但是参数列表不同,这种方式称为方法的重载,方法的重载是实现多态性的方式之一. 参数列表不同指的是参数的个数不同或相同的个数但顺序不同或者类 ...
- Flex内存泄露解决方法和内存释放优化原则
Flex内存泄露解决方法和内存释放优化原则 你对Flex内存泄露的概念是否了解,这里和大家分享一下Flex内存释放优化原则和Flex内存泄露解决方法,希望本文的介绍能让你有所收获. Flex内存释放优 ...
- pat1071-1080
1071 #include<iostream> #include<cstdio> #include<cstring> #include<vector> ...
- RobotFramework下的http接口自动化Follow Response关键字的使用
Follow Response 关键字用于处理http中的重定向请求,常见的http 重定向请求包含http code为301和302 两种重定向请求,代表着某个URL地址发生了转移. http co ...
- Splay入门解析【保证让你看不懂(滑稽)】
BST真是神奇的东西... 而且种类好多呀... 我这个蒟蒻只学会了splay orzCJ老爷,各种树都会 好好好,不说了,直接说splay. 不知道splay是啥,,你也要知道平衡树是啥... 平衡 ...
- 【BZOJ4916】神犇和蒟蒻(杜教筛)
[BZOJ4916]神犇和蒟蒻(杜教筛) 题面 BZOJ 求 \[\sum_{i=1}^n\mu(i^2)\ \ 和\ \sum_{i=1}^n\phi(i^2)\] 其中\[n<=10^9\] ...
- 一个题目涉及到的50个Sql语句
原博客地址 http://blog.csdn.net/maco_wang/article/details/6281484 Student(S#,Sname,Sage,Ssex) 学生表 Course( ...
- Java集合中迭代器的常用用法
该例子展示了一个Java集合中迭代器的常用用法public class LinkedListTest { public static void main(String[] args) { List&l ...
- 链接生成二维码-PHP
原文:http://www.upwqy.com/details/20.html 链接生成二维码 首先下载phpqrcode phpqrcode.zip 我这里使用的是TP5,把下载好的类库 放入到ex ...
- 【经验随笔】Java程序远程调试定位特定运行环境上出现的问题
Java后台程序远程调试 第一步:在JVM的启动参数中增加-Xdebug -Xrunjdwp:transport=dt_socket,address=6688,server=y,suspend=n 第 ...