vue 中包含哪些属性 和 data实例 在component 中和在Vue中
2023-09-27 14:27:48 时间
属性
new Vue({
//绑定元素
el:'#app',
//要绑定的数据
data:{},
//用来接受外部资料的属性
props:{},
// 用来定义在Vue内使用的方法
methods:{},
//用来观察Vue 数据的更新
watch:{},
//自动为内部数据计算的属性
computed:{},
// 提供Vue 实体编译后的样板
template:{},
//用来定义子元件
components:{}
});
大多数的数据都相同,唯一要注意的就是data属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<style>
#app{
margin: 1em;
font-size: 1.2em;
}
.component{
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
{{msg}}
<hr>
<my-component></my-component>
</div>
<script>
//register
Vue.component('my-component',{
template:' <div class="component">{{msg}}</div>',
data:function () {
return{
msg:'A custom component of Vue!'
}
}
});
//create wa root instance
new Vue({
el:'#app',
data:{
msg:'A root msg of Vue!'
}
});
</script>
</body>
</html>
相关文章
- (尚027)Vue_案例_交互添加
- 【Vue】this代表什么含义
- vue+iview使用webpack打包工具上线后丢包问题Loading chunk xxx failed
- [转]vue 中 mixins 的使用
- Vue中使用ECharts报错echarts Uncaught (in promise) TypeError: Cannot read property ‘getAttribute‘ of null
- Vue 中关于页面全屏登录页面无法全屏解决
- 【Python】+Django+Vue+Element UI 实现前后端分离的web项目开发
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- vue观察模式浅析
- vue去掉严格开发,即去掉vue-cli安装时的eslint
- vue基础---列表渲染
- Vue+Echarts监控大屏实例十六:Echarts对接天地图插件开发
- Vue+Echarts监控大屏实例五:呼叫中心监控模板实例
- vue学习笔记十:Vue中引入jquery
- vue文档摘录五:实例 property
- 在C#的MVC中 Vue的基本用法实例
- vue element UI el-table 给表格添加复选框,并得到所选值
- vue项目加入百度统计
- Vue组件开发实例(详细注释)
- vue基础四(comment实例)
- vue.js 安装过程(转载)
- Vue开发实例(11)之el-menu实现左侧菜单导航
- vue-cli + webpack 多页面实例配置优化方法