（二）Vue常用7个属性
- el属性
- 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
- data属性
- 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
- template属性
- 用来设置模板，会替换页面元素，包括占位符。
- methods属性
- 放置页面中的业务逻辑，js方法一般都放置在methods中
- render属性
- 创建真正的Virtual Dom
- computed属性
- 用来计算
- watch属性
- watch:function(new,old){}
- 监听data中数据的变化
- 两个参数，一个返回新值，一个返回旧值，
<div id="app">
{{msg}}
<div>这是模板的第一种使用方法1</div>
</div> <template id="bot">这是模板的第三种使用方法，不常用3</template>
<script>
<div id="bot">模板的第四种创建方法4</div>
</script>
<script>
var vm1 = new Vue({
data: {
msg: "data属性"
},
methods: {
Personal:function () {
console.log("methods方法存放方法")
}
},
template: `<div>模板的第二种使用方法2</div>`,
//template："#bot",
render: (createElement) => {
return createElement("h1",{"class":"类名"，"style":"color: red"},"这一个render属性创建的虚拟dom")
},
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head> <body>
<div id="app">
<p>{{message}}</p> //直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p> //运用计算属性
<p>{{reverseMessage}}</p> //运用methods方式
<p>{{methodMessage()}}</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
（二）Vue常用7个属性的更多相关文章
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- 【Android】7.1 布局控件常用的公共属性
分类:C#.Android.VS2015: 创建日期:2016-02-10 一.简介 Android应用程序中的布局控件都是容器控件,用于控制子元素的排列和放置方式.Android提供的布局控件有: ...
- Vue基础进阶 之 常用的实例属性
Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- 重学VUE——vue 常用指令有哪些？
一.什么是指令? 在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性.指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上.只有v-for是一个类 ...
- 进击的Python【第五章】：Python的高级应用（二）常用模块
Python的高级应用(二)常用模块学习 本章学习要点: Python模块的定义 time &datetime模块 random模块 os模块 sys模块 shutil模块 ConfigPar ...
随机推荐
- 自定义mousewheel事件，实现图片放大缩小功能实现
本文是承接 上一篇的<自定义鼠标滚动事件> 的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...
- linux比较两个文件的不同（6/21）
cmp 命令:比较任意两个类型的文件,且吧结果输出到标准输出,默认文件相同不输出,不同的文件输出差异 必要参数 -c 显示不同的信息-l 列出所有的不同信息-s 错误信息不提示 选择参数 -i< ...
- C#求百分比
public string integralpercentage; integralpercentage = ((double)user.Credits / integralmax).ToString ...
- js算法-快速排序(Quicksort)
快速排序(英语:Quicksort),又称划分交换排序(partition-exchange sort),简称快排,一种排序算法,最早由东尼·霍尔提出.在平均状况下,排序n个项目要O(nLogn)次比 ...
- CSS3 3D旋转动画菜单
在线演示 本地下载
- filter方法解析
filter一般用于将数组中的某些元素过滤掉,并生成一个新的数组 基本语法如下: var newArray= arrayObj.filter(functionObj); newArray 根据过滤条件 ...
- Oracle数据库的数据导入导出
--备份数据库--数据库系统用户账号system/adminuser --查看oracle数据库的用户select * from all_users;--查看oracle数据库的版本号select * ...
- NOIP 数字游戏
描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共n个),你要按顺序将其分为m ...
- centos、linux查找未挂载磁盘格式化并挂载？
centos.linux查找未挂载磁盘格式化并挂载? df -h 查看当前linux服务器硬盘: fdisk -l /dev/sda 第一块硬盘 /dev/sdb 第二块硬盘 依此类推 以/d ...
- Record and accumulation
最近有同学在准备校招的问题,问我几个问题,我觉得有必要把大家的问题汇总下: 1.在设计变量的while指挥时候,可以利用弹栈的特性以及Java传值 只是传递的副本 去控制 : https://www ...