（二）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 ...
随机推荐
- Unity 碰撞检测 OnTriggerEnter 入门
当我们需要检测两个物体A和B发生碰撞的时候,必须要满足一下条件 1:A和B必须有碰撞边界,你可以点开一个A,在属性窗口点击AddComponent,在physis(物理)目录下看到以下这些 ,根据形状 ...
- 如何生成.a文件，小心有坑！！
.a文件是一种对实现文件细节进行隐藏的打包文件. 由于是打包文件,所以需要创建工程,将功能代码添加到工程.下面是创建.a文件的具体步骤: Step One:打开Xcode(此处使用的Xcode 8.2 ...
- Mixed mode assembly is built against version 'v2.0.50727' of the runtime and cannot be loaded in the 4.0 runtime without additional configuration info
Mixed mode assembly is built against version 'v2.0.50727' of the runtime and cannot be loaded in the ...
- 【hihocoder】01背包
描述 且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励的时刻了! 小Ho现在手上有M张奖券,而奖品区有N件奖品,分别标号为1到N,其中第i件奖品需要ne ...
- ijkplayer实现IMediaDataSource
由于ijkplayer不能识别android.resource类型的资源在播放raw中的文件的时候用IjkMediaPlayer不能正常播放,实现IMediaDataSource为IjkMediaPl ...
- CSS3 Loading进度条加载动画特效
在线演示 本地下载
- shell脚本多进程
shell脚本再执行过程中就一个进程,从头到尾 下面配置shell脚本执行过程中启动多个进程同时执行 #!/bin/bash for ((i=1;i<=10;i++)) do ( echo &q ...
- 最牛技术 1秒启动Linux的窍门
1秒启动Linux可以实现吗?我们知道Linux系统开机并不算快,最少也需要11秒,但是,现在有一个技巧,可以1秒打开linux系统,到底是什么技术这么牛?请看下文详细介绍 尽可能快的启动系统,对于自 ...
- 关于 Content-Type:application/x-www-form-urlencoded 和 Content-Type:multipart/related（转）
最近项目中用到的一个是用一个页面接收c程序post过来的一断字符串..总接收不到值... 我用C#写一个测试可以正常接收到值. 最后抓包比较 区别只是 Content-Type:application ...
- 通俗理解数字签名，数字证书和https
最近在开发关于PDF合同文档电子签章的功能,大概意思就是在一份PDF合同上签名,盖章,使其具有法律效应.签章有法律效应必须满足两个条件: 能够证明签名,盖章者是谁,无法抵赖 PDF合同在签章后不能被更 ...