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组件上,需要 ...
随机推荐
- ubuntu16.04 编译安卓4.2
1. root@ge-Lenovo:/usr/lib/jvm# cd /home/material/install/jdk/ jdk-6u29-linux-x64.bin jdk-6u45-l ...
- linux上搭建redis
环境centos7及redis-4.0.2.tar.gz 第一步首先在/usr/local/mypackage下mkdir redis 通过工具上传redis安装包 解压安装包 tar -zxvf r ...
- index.jsp首页访问不了的解决方法
解决方法: Tomcat,将项目添加到里面 部署解包的webapp目录 将Web项目部署到Tomcat中的方法之一,是部署没有封装到WAR文件中的Web项目.要使用这一方法部署未打包的webapp目录 ...
- MapReduce编程解析
MapReduce编程模型之案例 wordcount 输入数据 atguigu atguiguss sscls clsjiaobanzhangxuehadoop 输出数据 atguigu 2banzh ...
- day02_雷神_字符串、列表、字典
1.字符串 1.1 字符串相加 s1 = " ale x " s2 = " sb " print(s1 + s2) #识别空格 print(s1.strip() ...
- vsm安装
一. 部署环境介绍 软件需求 1) CentOS 6.5 64bit 2) Ceph 0.80.6 网络拓扑介绍 1) Controller Node 由Console节点组成,安装VSM控制平台 2 ...
- JavaScript中的工厂函数
所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例. 在学习jQuery的时候,我们经常会看到“工厂函数”这个概念,那么究竟什么是“工厂函数”呢?我们来看看概念,“所 ...
- 浅析C#中的Thread ThreadPool Task和async/await
.net 项目中不可避免地要与线程打交道,目的都是实现异步.并发.从最开始的new Thread()入门,到后来的Task.Run(),如今在使用async/await的时候却有很多疑问. 先来看一段 ...
- c#中快速排序的学习
最近看了一句话,说的是在现实生活中,会写字的人不见得会写出好文章,学习编程语言就像是学会了写字,学会了编程语言并不一定能写出好程序. 我觉得就是很有道理,以前读书的时候,基本学完了C#中的语法知识,算 ...
- asp.net core 使用identityServer4的密码模式来进行身份认证(2) 认证授权原理
前言:本文将会结合asp.net core 认证源码来分析起认证的原理与流程.asp.net core版本2.2 对于大部分使用asp.net core开发的人来说. 下面这几行代码应该很熟悉了. s ...