vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法
vue实例简单方法:
vm.$el -> 就是元素
vm.$data -> 就是data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
a==>{{a}}
<br>
b=={{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
//业务逻辑代码,b的值完全取决于return回来的值
get:function(){
return this.a+2;//默认调用get
},
set:function(val){
this.a=val;
}
}
}
}); vm.$el.style.background='red';//vm.$el -> 就是元素
console.log(vm.$data);//vm.$data -> 就是data,但是不会显示b
console.log(vm.$data.a);
console.log(vm.b);//这样才会显示b </script>
</body>
</html>
vm.$mount -> 手动挂在vue程序
<div id="box">
<span v-text="a"></span>
</div>
<script>
/*var vm=new Vue({
data:{
a:1
}
})；
vm.$mount('#box'); /*/ //手动挂载*!
var vm=new Vue({
data:{
a:1
}
}).$mount('#box');
</script>
vm.$options -> 获取自定义属性
var vm=new Vue({
aa:11, //自定义属性,
show:function(){
alert(1);
},
data:{
a:1
}
}).$mount('#box');
vm.$options.show();
console.log(vm.$options.aa);
vm.$destroy -> 销毁对象
vm.$log(); -> 查看现在数据的状态
<div id="box">
<span v-text="a"></span>
</div>
<script> var vm=new Vue({
data:{
a:1,
b:2
}
}).$mount('#box'); console.log(vm.$log());
</script>
vue教程2-04 vue实例简单方法的更多相关文章
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- 黑马eesy_15 Vue：04.Vue案例（ssm环境搭建）
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...
- 【前端】vue.js环境配置以及实例运行简明教程
vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...
- 在普通js文件里引入vue实例的方法
首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...
- Java-Runoob-高级教程-实例-方法：04. Java 实例 – 斐波那契数列
ylbtech-Java-Runoob-高级教程-实例-方法:04. Java 实例 – 斐波那契数列 1.返回顶部 1. Java 实例 - 斐波那契数列 Java 实例 斐波那契数列指的是这样一 ...
- Vue实例和方法
github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- vue：简单方法替代vuex或者bus
兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点. vuex: 适合数据量大,并且函数集中处理. bus:适合数据虽少,却不得不用的时候,维护困难. root:这儿指将值挂在root组件上,需要 ...
随机推荐
- 学以致用五----centos7+python3.6.2+django2.1.1
目的,在python 3.6的基础上搭建 django 2.x 一.使用pip安装django ,但是使用pip命令的时候报错,解决方法,做软连接 ln -s /usr/local/python/bi ...
- js基础学习笔记（零七）
indexOf() 方法 返回某个指定的字符串值在字符串中首次出现的位置. 语法: stringObject.indexOf(substring, startpos) 参数说明: 注意:如果要检索的字 ...
- castapp.js颜色配置
1 修改head的背颜色 (1) header添加class publicHead <header class="mui-bar mui-bar-nav publicHead&qu ...
- day29(对象转xml（使用java）)
通常使用xStream工具. 将集合,数组,对象转成XML. 导入两个包: xpp3_min-1.1.4c.jar xstream-1.4.4.jar 自定义一个类 package com.baidu ...
- Shell编程-11-子Shell和Shell嵌套
目录 什么是子Shell 子Shell产生的途径 Shell脚本调用模式 什么是子Shell 子Shell的概念其实是贯穿整个Shell的,如果想要更好的理解和写Shell脚本则必须要了解子S ...
- 标记化结构初始化语法 在结构体成员前加上小数点 如 “.open .write .close ”C99编译器 .
今天在看串口驱动(四)的时候 有这样一个结构体初始化 我很不理解 如下: static struct s3c24xx_uart_port s3c24xx_serial_ports[NR_PORTS] ...
- 20155326 第12周课堂实践总结（二）String类和Arrays类的学习
20155326 第12周课堂实践总结(二)String类和Arrays类的学习 实践二 Arrays和String单元测试 实践题目 在IDEA中以TDD的方式对String类和Arrays类进行学 ...
- TF-IDF模型的概率解释
信息检索概述 信息检索是当前应用十分广泛的一种技术,论文检索.搜索引擎都属于信息检索的范畴.通常,人们把信息检索问题抽象为:在文档集合D上,对于由关键词w[1] … w[k]组成的查询串q,返回一个按 ...
- Java中sleep()与wait()区别（涉及类锁相关概念）
在区别之前,我们首先先了解一下关于对象锁,类锁的相关概念(当时查阅的详细地址:http://www.importnew.com/20444.html,该作者对类锁和对象锁进行了详细的举例分析) 对象锁 ...
- 【推荐】Win7任务栏增强工具 7+ Taskbar Tweaker 强大的任务栏标签管理工具
我曾经推荐过一款XP的任务栏管理工具 Taskix,这是一款在XP系统中拖动任务栏内标签的小工具. XP 32位可以下载我汉化的版本 http://www.cnblogs.com/clso/archi ...