我所理解的Vue——学习心得体会1(Vue对象)
初学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对象)的更多相关文章
- Salty Fish 结对学习心得体会及创意照 (20165211 20165208)
小组结对学习心得体会及创意照 在阅读了软件工程讲义 3 两人合作(2) 要会做汉堡包和现代软件工程讲义 3 结对编程和两人合作后,加之对于这几周组队学习的感悟,我们对于组队学习的一些感悟和想法如下: ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- vue学习心得
前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...
- Vue学习心得----新手如何学习Vue(转载)
ps:本文并非原著,转载自:https://www.cnblogs.com/buzhiqianduan/p/7620102.html,请悉知 前言 使用vue框架有一段时间了,这里总结一下心得,主要为 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习【一】vue引用封装echarts并展示多个echarts图表
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下. 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香).阿里的 ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- 前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
文章目录 1.学习目标 2.前端知识体系 2.1 前端三要素 2.2.MVVM 3.第一个Vue程序 4.Vue实例的生命周期 vue的官方文档:https://cn.vuejs.org/ 1.学习目 ...
随机推荐
- PHP数组教程
定义数组 PHP数组array是一组有序的变量,其中每个变量被叫做一个元素. 一.定义数组 可以用 array() 语言结构来新建一个数组.它接受一定数量用逗号分隔的 key => value ...
- 微信4.5 for Android安卓内测版体验【实时对讲】杀手级应用下载
微信4.5 for Android 安卓 内测版 体验 程序启动画面,是一支在动的烛光 主要功能更新如下 支持语音提醒,到时间后自动弹出消息框 发起语音提醒请求 成功识别语音请求,并且保存在本地,应该 ...
- Cocos2d-X之LUA注意事项
「使用计时器」: 计时器函数原型:unsigned int scheduleScriptFunc(unsigned int handler, float interval, bool paused) ...
- 编程军规 —— Java 篇
提高代码的可读性,规避容易出现的错误. 0. 共性 对象或引用的非空性判断: 强制类型转换时: 函数返回时: 函数的输入参数: 任务执行的成功或失败判断: 文件打开:网络连接:数据库连接: 内存申请: ...
- HDU 3360 National Treasures 奇偶匹配的最低点覆盖
标题来源:pid=3360">HDU 3360 National Treasures 意甲冠军:假设a[i][j] != -1 把他转成二进制 最多有12位 代表题目那张图的12个位置 ...
- IOS status bar
从iOS7开始,该系统提供2样的管理风格状态栏 由UIViewController管理(每UIViewController我们可以有各自不同的状态栏) 由UIApplication管理(由其统一管理的 ...
- libcurl 支持 openssl 交叉编译 mips rt5350
By admin | 11月18日 0 Comment Advertisement 历经半个月终于把libcurl库编译出来,参考网上很多博客,最终把自己要的库编译出来. 首先说明一下,我要这个库的目 ...
- 使用WPF技术模拟手机界面
原文:使用WPF技术模拟手机界面 1. 前言 WPF(Windows Presentation Foundation),即"Windows呈现基础",它的目的非常明确,就是用来把数 ...
- JS判断android/IOS,并执行回调函数
判断类型: var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') ...
- ASP 用隐藏域解决Http无状态问题
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> < ...