【vue】挂载点概念
## 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>
【vue】挂载点概念的更多相关文章
- vue系列之概念
一.模板引擎 通常出现在应用层,即服务器端(MVC层中的view) 客户端HTTP请求->应用层的控制器(Controller)->应用层的服务层(Service,访问数据库)->封 ...
- Vue 入门之概念
Vue 简介 Vue 是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 [view].新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组 ...
- vue入门——基本概念
1. 挂载点,模板,实例的关系? 首先附上一个基本demo: <!DOCTYPE html> <html lang="en"> <head> & ...
- Vue挂载元素的替换
Vue根组件已有挂载DOM'#app',在render又引进一个组件,该组件最外层也是用了'#app',为何根组件的DOM'#app'会被替换掉. //main.js import Vue from ...
- vue 挂载点 实例 模板
挂载点:vue实例 里面的el属性 对应的 id 所在的dom节点 模板:指的是挂载点内部的内容 模板可以写在挂载点内部 也可以写在属性里面 demo < ...
- 关于vue的基础概念
vue-cli相当于脚手架 给你自动生成模板工程vue-router是 vue路由插件 支持你单页应用的vue-loader是webpack下loader插件 可以把.vue文件 输出成组件
- Vue 中组件概念
1 为了能在模板中使用,组件必须先注册以便 Vue 能够识别.这里有两种组件的注册类型:全局注册和局部注册. 1.1 全局注册是通过Vue.component 来向Vue注册,例子 Vue.compo ...
- Vue.js核心概念
# 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效 ...
- Vue指令的概念
指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式. 指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应. 如下例子: 实例 <div id=&quo ...
随机推荐
- splay专题复习——bzoj 3224 & 1862 & 1503 题解
[前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...
- expect安装测试-批量用户管理
安装: yum list | grep expect yum install expect 批量创建用户: ansible mysqldb -m user -a 'name=ansible state ...
- How to use eclipse quickly
--> // TODO Quickly find outstanding event 快速查找未完成事件 eg: // TODO Robin --> Templates ...
- Timus 1146. Maximum Sum
1146. Maximum Sum Time limit: 0.5 secondMemory limit: 64 MB Given a 2-dimensional array of positive ...
- bzoj3771
http://www.lydsy.com/JudgeOnline/problem.php?id=3771 生成函数... 其实就是多项式乘法...lrj书上有一个通俗的解释... 然后就是这个样子,我 ...
- PCB 规则引擎之编辑器(语法着色,错误提示,代码格式化)
对于一个规则引擎中的脚本代码编辑器是非常关键的,因为UI控件直接使用对象是规则维护者,关系到用户体验,在选用脚本编辑器的功能时除了满足代码的编辑的基本编辑要求外,功能还需要包含;语法着色,错误提示,代 ...
- Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解
Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...
- $P2126 Mzc家中的男家丁$
problem #ifdef Dubug #endif #include <bits/stdc++.h> using namespace std; typedef long long LL ...
- vue学习记录(一)—— vue开发调试神器vue-devtools安装
网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行 github下载地址 点击跳转 具体步骤 ...
- [Luogu 1966] noip13 火柴排队
[Luogu 1966] noip13 火柴排队 Problem 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之 ...