初学Vue,总结如下:

1、首先要区分html的dom和js的dom

2、html的dom是View的范畴,js的dom是Model的范畴。

3、vue这库就是创建了伟大的new Vue()对象,把html的dom的范畴与js的dom范畴关联在一起,通过el这个属性,把js的dom与html的dom关联在一起了。

-----------------------------------

谈谈我对vuejs的组件的认识。

最开始的定义组件的方法,虽然有点复杂,但利于容易理解。请按照下面注解顺序阅读。

<div id="box">
<!-- 4、通过在html的dom标签,Vue对象渲染出js的dom内容-->
<aaa></aaa>
</div> <script>
//1、通过继承Vue生成js的dom模板对象
var Aaa=Vue.extend({
template:'<h3>我是标题3</h3>'
});
//2、通过Vue对象的组件方法把html的dom标签与js的dom模板对象关联一起
Vue.component('aaa',Aaa);
//3、通过Vue对象实例把html的dom与js的dom模型关联在一起
new Vue({
el:'#box', }); </script>

通过上面js定义dom->标签注册->html的绑定->Vue对象的渲染,就在html中产生了js的dom视图

上面代码可以简化为如下:直接在Vue.compoent方法里面定义js的dom描述

<div id="box">
<aaa></aaa>
</div>
<script>
Vue.compoent('aaa',{
template:'<h3>welcome to here</h3>'
});
new Vue({
el:'#box'
});
</script>

---------------------------------------

**关于组件里面的数据必须是函数形式出现,且返回的数据必须是对象(即json)

我所理解的Vue——学习心得体会1(Vue对象)的更多相关文章

  1. Salty Fish 结对学习心得体会及创意照 (20165211 20165208)

    小组结对学习心得体会及创意照 在阅读了软件工程讲义 3 两人合作(2) 要会做汉堡包和现代软件工程讲义 3 结对编程和两人合作后,加之对于这几周组队学习的感悟,我们对于组队学习的一些感悟和想法如下: ...

  2. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  3. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

  4. Vue学习心得----新手如何学习Vue(转载)

    ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了,这里总结一下心得,主要为 ...

  5. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  6. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  7. vue学习【一】vue引用封装echarts并展示多个echarts图表

    大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...

  8. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  9. 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)

    文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...

随机推荐

  1. Method and apparatus for establishing IEEE 1588 clock synchronization across a network element comprising first and second cooperating smart interface converters wrapping the network element

    Apparatus for making legacy network elements transparent to IEEE 1588 Precision Time Protocol operat ...

  2. C#中的字符串——用Stringbuilder类很重要

    注:这篇文章基本是<C#高级编程>(第七版)第九章的学习笔记. 众所周知,C#中处理字符串通常用的都是string,它其实是.NET基础类System.String类的映射.注意一个是小写 ...

  3. Robot Framework 快速入门_英文版

    Copyright © Nokia Siemens Networks 2008 Licensed under the Apache License, Version 2.0 Table of Cont ...

  4. WPF响应长按事件

    原文:WPF响应长按事件 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78983140 思路:MouseD ...

  5. Matlab Tricks(二十二)—— 自定义函数

    printme = @(txt) print('-dpdf', sprintf('figures/Example_%s',txt)); % 这里的 print 显然不是控制台输出一句话,而是图像的命名 ...

  6. 用WPF轻松打造iTunes CoverFlow效果

    原文:用WPF轻松打造iTunes CoverFlow效果 用WPF轻松打造iTunes CoverFlow效果                                             ...

  7. @RequestBody标记的形参,与APP接口不能直接用

    用ajax请求传JSON串,在服务端形参用@RequestBody标记可以直接转为对应的对象: 在APP调用该接口时,服务端用@RequestBody标记无法转为对应对象,将形参改为String类型, ...

  8. MIME映射(程序映射)

    MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型.是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器 ...

  9. sql count(1)不要和查询数据混用 非常耗时

    count(1)不要和查询数据混用 非常耗时 例子: SELECT w.[PKID], COUNT(1) OVER() AS TotalCount FROM w WITH(NOLOCK) INNER ...

  10. Android Studio gradle编译 NullPointerException(no error message)解决

    原文:Android Studio gradle编译 NullPointerException(no error message)解决 1.关闭Android Studio  2.找到工程目录下的 . ...