【vue】挂载点概念
2024-08-24 12:49:26
## vue
vue是mvvm模型，自底向上逐层应用，用于构建用户界面的渐进式框架。
### 挂载点、模板、实例
挂载点，vue仅处理挂点下面的内容（dom节点）。挂载点内部的为模板。
<div id="app">
<p>{{ mag }}</p>
</div>
<script>
new Vue({
el: "#app",
data() {
mag: 'hello, ';
},
}); Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
}) </script>
模板
1. 直接放在挂在点内部
2. 实例内的template属性
<div id="app">
</div>
<script>
new Vue({
el: "#app",
template: "<p>哈韩</p>"
data() {},
});
</script>
实例，new Vue创建
<div id="app">
<p>{{ mag }}</p>
</div>
<script>
var app = new Vue({
el: "#app",
components: {
todo-item,
},
data() {
mag: 'hello, ';
},
}); app.component('todo-item', {
template: '<li>这是个待办项</li>'
})
</script>
## vue组件，实例，vue-cli
每一个组件也是一个实例，挂在点下最大的实例，有一层层组件构成。
开发大型项目，借助webpack打包单文件组件(.vue)。脚手架vue-cli搭建项目。
## 单文件组件
<template>
<div>
<li class="todo-item"
@dblclick="handleDelete(index)"
>{{ text }}</li>
</div>
</template>
<script>
export default {
name: 'todo-item',
props: ['text', 'index'],
methods: {
handleDelete(index) {
this.$emit('delete', index);
},
},
};
</script>
<style scoped>
.todo-item{ }
</style>
最新文章
- SQL链接服务器
- Singleton
- mac osx vi 设置tab 四个空格
- Oracle通过一个Value值查询数据库
- 基于 Annotation 拦截的 Spring AOP 权限验证方法
- jquery总结
- hdu 猜数字
- [AIR] AS3.0设置屏保功能
- MFC ListControl用法
- 深层解析：构建facebook应用商店推荐引擎
- Servlet的学习之Request请求对象（3）
- magento模块的建立
- Powerbuilder编程技巧 如何获取网页的HTML源码
- ！important的理解
- java8实战一------解决冗杂，java8真的很便利（抛砖）
- centos6.8下安装dc2012
- Linux网络编程：socket文件传输范例
- 浅谈 Web 缓存
- [转]linux各文件夹介绍
- 机器学习-数据可视化神器matplotlib学习之路（三）