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实例简单方法的更多相关文章

  1. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建)

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  4. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  5. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  6. Java-Runoob-高级教程-实例-方法:04. Java 实例 – 斐波那契数列

    ylbtech-Java-Runoob-高级教程-实例-方法:04. Java 实例 – 斐波那契数列 1.返回顶部 1. Java 实例 - 斐波那契数列  Java 实例 斐波那契数列指的是这样一 ...

  7. Vue实例和方法

    github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...

  8. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  9. vue:简单方法替代vuex或者bus

    兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点. vuex: 适合数据量大,并且函数集中处理. bus:适合数据虽少,却不得不用的时候,维护困难. root:这儿指将值挂在root组件上,需要 ...

随机推荐

  1. C语言编程题

    1.将整形a的第m位赋值到整形b的第n位 int fun4(int a, int m, int b, int n) { a = (a>>m) & ;//将a的第m位取出,为1或0, ...

  2. Latex插图操作

    1.竖排插入两张图 \begin{figure}[h] //放在当前位置 \centering \subfigure[A given traffic flow set]{ \includegraphi ...

  3. shell常见命令

    awk awk是个很好用的东西,大量使用在linux系统分析的结果展示处理上.并且可以使用管道, input | awk ''  | output 1.首先要知道形式 awk 'command' fi ...

  4. 二级缓存EhCache在几种应用技术的配置方法和步骤总结

    一:Spring和Ehcache缓存集成 业务问题:如果仓库不经常变动,大量进出库,总是需要查询仓库列表 (列表重复) ,使用缓存优化 ! 阅读spring规范29章节 第一步: 导入ehcache的 ...

  5. java项目显示红叉,程序却没有错误

    转 http://blog.sina.com.cn/s/blog_825b7d7c0102w7rq.html (2016-07-02 11:38:38)   分类: javaWeb 电脑换了不同版本的 ...

  6. silverlight导出图片文件

    新建一个Silverlight应用程序,添加下面两个控件: image控件:image1: Button控件:Click="Button1_Click"; code-Behind代 ...

  7. 用Dagger2在Android中实现依赖注入

    依赖注入这个模式(模式已经用烂了,这里再烂一次)是用来给应用的各部分解耦的.使应用开发更加可扩展,更容易维护.通过本文你会学到如何使用Dagger2来处理依赖. 简介 如果以对象需要另外的一个对象才能 ...

  8. Codeforces820A Mister B and Book Reading 2017-06-28 09:38 67人阅读 评论(0) 收藏

    A. Mister B and Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input ...

  9. hdu 1059

    题目大意:就是有价值1.2.3.4.5.6的硬币各多少个,然后让你判断能否把他们分成价值相等的两部分. 题目思路:目测dp,一看果然dp,完全背包,需要剪枝,硬币个数为容量,下标为value,用一个b ...

  10. Tarjan求缩点化强连通图

    Describe: 求一个有向图加多少条边可以变成一个强连通图 Solution: Tarjan缩点染色后,判断出度和入度,所有点的出度 = 0 的和 和 入度 = 0 的和的最大值即为所求. 缩点染 ...