（二）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 ...
随机推荐
- python selenium firefox使用
演示的版本信息如下: Python 3.6.0 Selenium 3.5.0 Firefox 55.0.3 geckodriver v1.0.18.0 win64 1.前提准备 1.1 安装pyth ...
- Vue-router学习（一）- 路由匹配
一.Vue-router引入使用 Vue-router就是一个vue路由类,通过new一个Vue路由实例,然后Vue.use()嵌入即可. 一般分为以下步骤: 1.引入 (1).方法一:npm包嵌入, ...
- OpenGL中的Shader
http://blog.csdn.net/huangcanjun187/article/details/52474365 学习总结自:http://learnopengl.com/#!Getting- ...
- 关于div可编辑的复制粘贴问题
todoFilter(e) { e.preventDefault(); if (!e.target.getAttribute('contenteditable')) { return; } const ...
- spring security结合数据库验证用户-XML配置方式
之前的用户信息我们都是使用的内存用户,测试例子可以,实际中使用肯定不行,需要结合数据库进行验证用户.这就是本节的重点: 项目目录如下: 在之前的项目中的依赖中添加两个依赖: <dependen ...
- Hystrix工作流程图
- 通过HBase API进行开发
http://www.cnblogs.com/netbloomy/p/6683509.html 一.将HBase的jar包及hbase-site.xml添加到IDE 1.到安装HBase集群的任意一台 ...
- Linux Wget 命令
Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器.如果我们使用虚拟主机,处理这样的 ...
- Android开发-Android Studio安装
开发平台:Windows 7 旗舰版,SP1 开发工具:Android Studio1.2正式版 1.打开http://www.androiddevtools.cn/ ,找到Android Studi ...
- Vue初步认识
什么是Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架(根据需求使用特定的功 能).与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的 ...