vue - 选项
1.计算属性（computed）：主要是对原数据进行改造输出。改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号
2.methods（methods）：用于绑定html中的事件对应的方法
3.数据变化监听器（watch）：主要用于监测data中的数据变化，让v-model生效
4.过滤器（filters）：通常格式化字符，使用传值
5. 混入（mixins）：用于减少代码污染、减少代码量、实现代码重用
6.扩展（extends）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<div>价格： {{newPrice}}</div>
<div>数字： {{count}}</div>
<div><button @click="add(2)">add</button></div>
<div><input v-model="question"></div>
<div>过滤： {{filtera | filterA}}</div>
</div> <script type="text/javascript">
// 额外临时加入时，用于显示日志
var addLog={
updated:function(){
console.log("数据放生变化,变化成"+this.count+".");
}
} // 扩展
var extendObj ={
created: function(){
console.log("我是被扩展出来的");
}
} // 实例化vue
var app = new Vue({
// 挂载实例
el:'#app',
// 页面数据初始化，字符，对象、数组
data:{
message: 'hello Vue!',
price: 100,
count: 100,
question: '',
filtera: 'abc'
},
// 计算属性：主要是对原数据进行改造输出。
// 改造输出：包括格式化数据（价格，日期），大小写转换，排序，添加符号
computed: {
newPrice () {
return '￥' + this.price + '元';
}
},
// 方法声明：用于绑定html中的方法
methods:{
add (num) {
this.count += num;
}
},
// data属性监听器, 作用v-model
watch: {
question(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal);
}
},
// 过滤器，通常格式化字符，使用传值
filters: {
filterA(value) {
return value.toUpperCase();
}
},
// 混入，作用：减少代码污染、减少代码量、实现代码重用
mixins: [addLog],
// 扩展
extends: extendObj
})
</script>
</body>
</html>
vue - 选项的更多相关文章
- Vue源码思维导图------------Vue选项的合并之$options
本节将看下初始化中的$options: Vue.prototype._init = function (options?: Object) { const vm: Component = this / ...
- vue2,vue指令和选项
vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue.2.0.5-Vue 实例
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模式, Vue 的设 ...
- Vue.js实例
构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })
- vue入门 vue与react和Angular的关系和区别
一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- vue学习笔记 实例（二）
var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...
- Vue.js 学习笔记 一
本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...
随机推荐
- B/S、C/S模式介绍
1.B/S模式 B/S(Browser/Server,浏览器/服务器)方式的网络结构. ①.客户端统一采用浏览器如:Netscape和IE,通过Web浏览器向Web服务器提出请求,由Web服务器对数据 ...
- Linux命令之ftp
ftp [-pinegvd] [host] pftp [-inegvd] [host] 用户通过ftp这个程序来使用Internet上的标准文件传输协议(FTP).本程序允许用户向远端网站发送文件,或 ...
- Linux命令之telnet
telnet [-8EFKLacdfrx] [-X authtype] [-b hostalias] [-e escapechar] [-k realm] [-l user] [-n tracefil ...
- Web应用主动侦测工具Skipfish
Web应用主动侦测工具Skipfish Skipfish是Kali Linux附带的一个主动Web应用侦测工具.该工具会首先尽可能获取所有网站路径,进行访问,然后根据返回的内容,检测是否存在漏洞. ...
- [Codeforces-div.1 68D] Half-decay tree
[Codeforces-div.1 68D] Half-decay tree 试题分析 增加显然是\(log\)的. 由于某一些叶子结点的答案是一样的,所以我们可以考虑一次性求解. 容易想到一个非常优 ...
- BZOJ 4247 挂饰（背包问题）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4247 [题目大意] JOI君有N个装在手机上的挂饰,编号为1...N. JOI君可以将 ...
- 【并查集】Gym - 101128B - Black Vienna
有26张牌(A~Z),其中三张被拿走了.其余23张被分发给了两个人.给你m次调查结果,一次调查结果是对其中一个人询问一对牌,他会告诉你他有这对牌的几张(0~2).问你有多少种被拿走的牌的组合. 三重循 ...
- 【状压dp】CDOJ1608 暑假集训
裸的状压的话,很显然……但有一个强大的优化. 就是在枚举决策的时候,固定第一个空位置.可以证明,这样状态数没有减少,但是降低了很多重复访问. 因为你在枚举的时候,总是可以划分为包含第一个空位置的3个位 ...
- Hiho: 连通图
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 还记得上次小Hi和小Ho学校被黑客攻击的事情么,那一次攻击最后造成了学校网络数据的丢失.为了避免再次出现这样的情况,学校决 ...
- 技术分享：杂谈如何绕过WAF（Web应用防火墙）（转）
0×01开场白 这个议题呢,主要是教大家一个思路,而不是把现成准备好的代码放给大家. 可能在大家眼中WAF(Web应用防火墙)就是"不要脸"的代名词.如果没有他,我们的" ...