建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+ 谷歌浏览器 Firefox 30+ 火狐浏览器
请选择 进入手机版 | 继续访问电脑版
设置昵称

在此一键设置昵称,即可参与社区互动!

确定
我再想想
选择版块
标签
您还可以添加5个标签
  • 没有搜索到和“关键字”相关的标签
  • 云产品
  • 解决方案
  • 技术领域
  • 通用技术
  • 平台功能
取消

7号小助手

发帖: 78粉丝: 261

发消息 + 关注

更新于2021年01月04日 15:54:41 706 56
直达本楼层的链接
楼主
显示全部楼层
[活动打卡] 【移动应用开发全栈成长计划】VUE和H5篇 · 每周学习笔记征集帖

亲爱的开发者们

大家心心念念的【移动应用开发全栈成长计划】已开课

我们也特别为大家设置了【学习任务打卡】环节

为的就是让大家巩固学习成果,紧跟学习进度

请将需要完成的每周学习笔记按要求回复到本帖下方

按要求格式回复即可获得积分累计阶段奖品,还能有机会获得附加幸运奖哦~


征集时间

2021.01.06-2021.03.21 23:59

征集要求

在本帖中,回复自己本周课程内容的学习笔记

回复格式:华为云ID+第几周笔记+笔记内容,并分享些读书心得(字数≥200字)

示例图如下:

2.png


奖励方式

每周每篇有效笔记可获得5积分

阶段学习将以积分排行榜的形式,对前300名小伙伴进行奖励哦!

此外还有附加奖励,每周在本周内提交学习笔记的用户中,抽取10位幸运奖

奖励华为云定制文件收纳包

 文件收纳包.jpg


各阶段积分排行榜奖品

积分奖品图.png


三个阶段总积分排行榜奖品

总阶段积分奖品.jpeg



 活动注意事项

1. 学习任务提交后,小助手会在本阶段学习周期内,按序完成审核,并增加活动积分;

2. 本次活动通过完成提交学习笔记任务,可获得的积分上限为5积分/每周

3. 请务必按照上述要求提交内容,以免影响积分增加;

4. 若积分值相同则以完成学习任务的时间先后排序,其中任务完成时间的判定优先级为:阶段考核>问答官>分享转发>每周学习笔记>每章随堂测验;

5. 其他积分获取方式请查看活动社群公告。


想了解更多关于全栈成长计划课程内容请移步主帖:

https://bbs.huaweicloud.com/forum/thread-84766-1-1.html


除了本帖任务,其他学习任务可以通过以下链接进行查看:

查看随堂测验打卡帖:https://bbs.huaweicloud.com/forum/thread-99479-1-1.html

查看问答官排位打卡帖:https://bbs.huaweicloud.com/forum/thread-99471-1-1.html


举报
分享

分享文章到朋友圈

分享文章到微博

花溪

发帖: 0粉丝: 1

发消息 + 关注

更新于2021年01月08日 10:04:48
直达本楼层的链接
沙发
显示全部楼层

华为云ID:hw84740751 

1.6-1.10笔记分享

Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应。

在响应式系统中,Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者,而监听器watch、计算属性computed、视图渲染template/render三个角色同时作为订阅者,对于监听器watch,会直接订阅观察监听的属性,对于计算属性computed和视图渲染template/render,如果内部执行获取了data的某个属性,就会执行该属性的getter方法,然后自动完成对该属性的订阅,当属性被修改时,就会执行该属性的setter方法,从而完成该属性的发布通知,通知所有订阅者进行更新。

第一章 移动端vue入门

Vue的常见指令

>v-if:根据表达式的结果来判断,是true则渲染元素, false则将元素注释掉

>v-show:与v-if类似,true就渲染,但是fase并不是注释掉,而是通过 display:none;来将元素隐藏,如果需要来回切换,使用v-show更好

>v-for:遍历元素,使用格式为v-for="(值键)in遍历内容"

>v-bind:给标签绑定属性、类、样式等,可以缩写为冒号

>v-html:向标签内覆盖注入HTML内容作为其子元素

>v-on:给标签绑定函数,可以缩写为@,Vuejs为v-on提供了事件修饰符。修饰符是由开头的指令后缀来表示的,用于对事件进行约束。)

>v -model-:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符

>v-once:不允许修改数据

Vue的简单应用

computed与watch的区别

计算属性computed和监听器watch都可以观察属性的变化从而做出响应,不同的是:

计算属性computed更多是作为缓存功能的观察者,它可以将一个或者多个data的属性进行复杂的计算生成一个新的值,提供给渲染函数使用,当依赖的属性变化时,computed不会立即重新计算生成新的值,而是先标记为脏数据,当下次computed被获取时候,才会进行重新计算并返回。

而监听器watch并不具备缓存性,监听器watch提供一个监听函数,当监听的属性发生变化时,会立即执行该函数。

Vue的生命周期

beforeCreate:是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created:在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与Dom进行交互,如果非要想,可以通过vm.$nextTick来访问Dom。

beforeMount:发生在挂载之前,在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。

mounted:在挂载完成后发生,在当前阶段,真实的Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对Dom进行操作。

beforeUpdate:发生在更新之前,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重渲染。

updated:发生在更新完成之后,当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。

beforeDestroy:发生在实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器。

destroyed:发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。

第二章 移动端适配简介

什么是移动端适配

移动端Web页面,即常说的H5页面、手机页面、webview页面;

手机设备屏幕尺寸不一,做移动端的Web页面,需要考虑安卓/IOS的各种尺寸设备上的兼容,针对移动端设备的页面,设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备;

目的:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放(看起来差不多)”;


第一章 移动端vue入门.pdf 3.74 MB,下载次数:1 预览

移动端适配简介.pdf 6.37 MB,下载次数:0 预览

点赞 评论 引用 举报

ludierr

发帖: 2粉丝: 0

发消息 + 关注

更新于2021年01月14日 14:57:20
直达本楼层的链接
板凳
显示全部楼层
华为云ID:hw01482763 第一周笔记 # 第一章 移动端入门 ## 1. Vue是什么? - Vue是前端框架,是自底向上逐层应用 - MVVM框架 - 为什么用vue 轻量,学习成本低,性能优越,生态良好 ## 2. 从零创建一个Vue工程 - Vue引入方式 A. SDN引入 B. NPM方式 ## 3. Vue的简单应用 - 声明式模板 - 指令是带有V-的特殊属性 - 常见指令 v-if、v-show、v-for、v-bind、v-html、v-on、v-model、v-once - 自定义指令 - 组件 》全局注册 》局部注册 - data、computed、methods、watch属性 》data 数据 》computed 计算 》methods 方法 》watch 观察 ## 4. Vue的生命周期 - 钩子函数 》beforeCreate a. 用户使用new Vue()新建实例前 b. 将父组件自定义事件传递给子组件 c. 初始化render函数转为虚拟dom方法 》created a. 初始化事件 b. 数据和data属性绑定 c. 此时还没有el选项 》beforeMount a. 先判断有没有el b. 判断有无template 》mounted 给vue实例对象添加$el成员 》beforeUpdate vue发现data更新,则在下次时间循环开始时重新渲染组件 》updated a. 重新执行render函数生成vnode b. 将vnode转化为真实Dom c. 重新挂载到HTML中 》beforeDestroy a. 调用vm.$destroy()准备销毁vue实例 b. 这一步实例仍然可用 》destroyed 在vue实例销毁后调用,所以实例被销毁 # 第二章 移动端适配简介 ### 移动端和PC端开发的主要差别 - 布局自适应 - 图片高清适配 ### 常见特殊问题和处理 - 细线(1px问题) 解决方法之一 meta里viewport设置问题 - iPhoneX+安全区域适配 - Android垂直居中问题
点赞 评论 引用 举报

cobblestone

发帖: 0粉丝: 0

发消息 + 关注

发表于2021年01月06日 21:45:25
直达本楼层的链接
地板
显示全部楼层

华为云ID:freedomMXC

2021.1.4-1.10笔记分享

Vue笔记(一) 笔记来源:第一章第一节vue入门培训.mp4

(一)Vue的特点(优点):

1.视图与数据相互绑定,框架帮我们做同步工作

2.轻量

3.学习成本低

4.性能优越(虚拟DOM)

5.生态良好(用的厂商多)

(二)引入&搭建方式:

1.CDN方式,引入vue.js

2.NPM方式,安装vue脚手架(命令行、可视化界面)

(三)vue应用(选取记录一部分)

常用指令:

v-if与vue-show的区别

v-if为false直接移除DOM

v-show为false只是加了display:none,相当于隐藏

组件(vue的核心)

全局注册:整改工程都可以使用(例如在main.js里注册的组件)

局部注册:可用于当前组件及子组件

data:

定义默认属性

computed:

数据是计算而来的,可通过set方法实现反向绑定

method:

定义自己需要的函数

watch:

监控某些属性,如果属性变化,触发某些函数

Vue的生命周期:

创建

挂载

更新

删除



点赞 评论 引用 举报

运气男孩

发帖: 279粉丝: 31

发消息 + 关注

发表于2021年01月06日 23:58:50
直达本楼层的链接
5#
显示全部楼层

华为云账号:hw__yang88+第一周笔记

Vue是什么

Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。

1.框架做分层设计,每层都可选,不同层可以灵活接入其他方案
2.它给你提供足够的optional,但并不主张很多required。

vue的核心

  • MVVM: Model-View-ViewModel

  •  Vue是数据驱动视图的框架,采用了MWVM(Model、View、ViewModel)架构。其核心库只关注视图层,视图与数据状态保持同步
        Vue的核心是一个“响应式的数据绑定系统”

  • 数据和视图建立绑定之后,DOM将与数据保持同步.

Vue的优势(为什么要使用Vue)

  • 轻量:

  • 学习成本低:

  • 性能优越:

  • 生态良好:

Vue安装

1.标签引入

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

下载地址:https://vuejs.org/js/vue.min.js

2.CDN引入

对于制作原型或学习,你可以这样使用最新版本:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js\

3.NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

 npm install vue

4.命令行工具 (CLI)

Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。

常见指令

指令的作用是:是当其表达式的值改变时相应的将某些行为应用到DOM上

v-if:根据表达式的结果来判断,是true则渲染元素,false则将元素注释掉
v-show:与v-f类似,true就渲染,但是false并不是注释掉,而是通过 displaynone;来将元素隐藏,如果需要来回切换,使用v-show更好。
v-for:遍历元素,使用格式为v-for="(值,键) in遍历内容"
v-bind:给标签绑定属性、类、样式等,可以缩写为冒号> v-html:向标签内覆盖注入HTML内容作为其子元素
v-on:给标签绑定函数,可以缩写为@,(Vue.js为v-on提供了事件修饰符。修饰符是由.开头的指令后缀来表示的,用于对事件进行约束。
v-model:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符。
v-once:不允许修改数据

生命周期

  1. beforeCreate钩子函数:
    a.用户使用new Vue()新建Vue实例
    b.父实例实例化子实例,确认组件间的父子关系,将父组件的自定义事件传递给子组件
    c.初始化将render函数转为虚拟dom的方法

  2. created钩子函数:
    a.初始化事件,进行数据的观测
    b.数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)
    c.此时还是没有el选项

  3. beforeMount钩子函数:
    a. el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期。
    b.如删掉el: ‘#app’
    c. template参数
    (1)如果vue实例对象中有template参数选项,则将其作为模板编译成render函数。
    (2)如果没有template选项,则将外部HTML作为模板编译。
    (3)可以看到template中的模板优先级要高于outer HTMIL的优先级。

  4. mounted
    a.给vue实例对象添加$el成员,beforeMount之前el上还是undefined
    b. mounted之前h1中还是通过{{message}}进行占位的,因为此时还有挂载到页面上,还是JavaScript中的虚拟DOM形式存在的。在mounted之后可以看到h1中的内容发生了变化。

  5. beforeUpdate
    a. vue发现data中的数据发生了改变,则在下一次时间循环开始重新渲染组件

  6. updated
    a.重新执行render函数生成vnode。
    b.将vnode转化为真实Dom
    c.重新挂载到HTML中,并且覆盖掉上—次渲染的$el

  7. beforeDestroy:
    a.调用vm.$destroy(0准备销毁vue实例
    b. beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

  8. destroyed:
    a.在Vue实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

读书心得

我看完了Vue的入门基础,对Vue有一个基本的认识,比如说Vue是一个渐进式的Js框架,它的核心是响应式数据绑定,它有什么优势,它该如何安装?它的生命周期如何?这些都是看完后值得思考的,其次,可以动手用NPM和Node.js安装运行一下Vue,简单体验一下Vue。在后面的课程继续了解Vue的进阶部分吧,期待下次更新。

点赞 评论 引用 举报
发表于2021年01月07日 09:27:34
直达本楼层的链接
6#
显示全部楼层

华为云ID:hw90117984

2021.01.06-2020.01.10 第一周笔记

对Vue的认识

什么渐进式框架,什么由底层逐渐向上层也不明白。只明白现在环境下,不管在哪,都需要会vue,小程序,前端,应该都是用vue框架来进行开发。Vue只关心做什么就可以了,实现了数据视图双向绑定

Vue的常见指令

>v-if:根据表达式的结果来判断,是true则渲染元素, false则将元素注释掉

>v-show:与v-if类似,true就渲染,但是fase并不是注释掉,而是通过 display:none;来将元素隐藏,如果需要来回切换,使用v-show更好

>v-for:遍历元素,使用格式为v-for="(值键)in遍历内容"

>v-bind:给标签绑定属性、类、样式等,可以缩写为冒号

>v-html:向标签内覆盖注入HTML内容作为其子元素

>v-on:给标签绑定函数,可以缩写为@,Vuejs为v-on提供了事件修饰符。修饰符是由开头的指令后缀来表示的,用于对事件进行约束。)

>v -model-:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符

>v-once:不允许修改数据

Vue的简单应用

全局注册:整改工程都可以使用(例如在main.js里注册的组件)

局部注册:可用于当前组件及子组件

data:

定义默认属性

computed:

数据是计算而来的,可通过set方法实现反向绑定

method:

定义自己需要的函数

watch:

监控某些属性,如果属性变化,触发某些函数

Vue的生命周期

init:

beforeCreate:是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created:在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与Dom进行交互,如果非要想,可以通过vm.$nextTick来访问Dom。

beforeMount:发生在挂载之前,在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。

mounted:在挂载完成后发生,在当前阶段,真实的Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对Dom进行操作。

beforeUpdate:发生在更新之前,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重渲染。

updated:发生在更新完成之后,当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。

beforeDestroy:发生在实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器。

destroyed:发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。

template

当使用template时,template的优先级是高于el的




点赞 评论 引用 举报
发表于2021年01月07日 11:20:22
直达本楼层的链接
7#
显示全部楼层

华为云ID:huang_guoqing

第一周学习笔记

Vue为MVVM框架,当数据模型data变化时,页面视图会得到响应更新,其原理对data的getter/setter方法进行拦截(Object.defineProperty或者Proxy),利用发布订阅的设计模式,在getter方法中进行订阅,在setter方法中发布通知,让所有订阅者完成响应。


Vue是什么

Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。


1.框架做分层设计,每层都可选,不同层可以灵活接入其他方案

2.它给你提供足够的optional,但并不主张很多required。


vue的核心

MVVM: Model-View-ViewModel


Vue是数据驱动视图的框架,采用了MWVM(Model、View、ViewModel)架构。其核心库只关注视图层,视图与数据状态保持同步

    Vue的核心是一个“响应式的数据绑定系统”


数据和视图建立绑定之后,DOM将与数据保持同步.


在响应式系统中,Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者,而监听器watch、计算属性computed、视图渲染template/render三个角色同时作为订阅者,对于监听器watch,会直接订阅观察监听的属性,对于计算属性computed和视图渲染template/render,如果内部执行获取了data的某个属性,就会执行该属性的getter方法,然后自动完成对该属性的订阅,当属性被修改时,就会执行该属性的setter方法,从而完成该属性的发布通知,通知所有订阅者进行更新。



常见指令

指令的作用是:是当其表达式的值改变时相应的将某些行为应用到DOM上


v-if:根据表达式的结果来判断,是true则渲染元素,false则将元素注释掉

v-show:与v-f类似,true就渲染,但是false并不是注释掉,而是通过 displaynone;来将元素隐藏,如果需要来回切换,使用v-show更好。

v-for:遍历元素,使用格式为v-for="(值,键) in遍历内容"

v-bind:给标签绑定属性、类、样式等,可以缩写为冒号> v-html:向标签内覆盖注入HTML内容作为其子元素

v-on:给标签绑定函数,可以缩写为@,(Vue.js为v-on提供了事件修饰符。修饰符是由.开头的指令后缀来表示的,用于对事件进行约束。

v-model:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符。

v-once:不允许修改数据



Vue的简单应用

computed与watch的区别

计算属性computed和监听器watch都可以观察属性的变化从而做出响应,不同的是:


计算属性computed更多是作为缓存功能的观察者,它可以将一个或者多个data的属性进行复杂的计算生成一个新的值,提供给渲染函数使用,当依赖的属性变化时,computed不会立即重新计算生成新的值,而是先标记为脏数据,当下次computed被获取时候,才会进行重新计算并返回。


而监听器watch并不具备缓存性,监听器watch提供一个监听函数,当监听的属性发生变化时,会立即执行该函数。


Vue的生命周期

beforeCreate:是new Vue()之后触发的第一个钩子,在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。


created:在实例创建完成后发生,当前阶段已经完成了数据观测,也就是可以使用数据,更改数据,在这里更改数据不会触发updated函数。可以做一些初始数据的获取,在当前阶段无法与Dom进行交互,如果非要想,可以通过vm.$nextTick来访问Dom。


beforeMount:发生在挂载之前,在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成,即将开始渲染。在此时也可以对数据进行更改,不会触发updated。


mounted:在挂载完成后发生,在当前阶段,真实的Dom挂载完毕,数据完成双向绑定,可以访问到Dom节点,使用$refs属性对Dom进行操作。


beforeUpdate:发生在更新之前,也就是响应式数据发生更新,虚拟dom重新渲染之前被触发,你可以在当前阶段进行更改数据,不会造成重渲染。


updated:发生在更新完成之后,当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据,因为这可能会导致无限循环的更新。


beforeDestroy:发生在实例销毁之前,在当前阶段实例完全可以被使用,我们可以在这时进行善后收尾工作,比如清除计时器。


destroyed:发生在实例销毁之后,这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。


点赞 评论 引用 举报

依旧廖凯

发帖: 2粉丝: 0

发消息 + 关注

发表于2021年01月07日 15:15:44
直达本楼层的链接
8#
显示全部楼层

华为云ID:zyq19990925

1.6-1.10笔记分享

1. Vue是什么?

Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。

1.框架做分层设计,每层都可选,不同层可以灵活接入其他方案

2.它给你提供足够的optional,但并不主张很多required。

2. 为什么用vue

轻量,学习成本低,性能优越,生态良好

3. Vue引入方式

A. SDN引入

B. NPM方式

4. Vue的简单应用

声明式模板

指令是带有V-的特殊属性

常见指令

v-if、v-show、v-for、v-bind、v-html、v-on、v-model、v-once                

自定义指令

组件

全局注册

局部注册

data、computed、methods、watch属性

data 数据

computed 计算

methods 方法

watch 观察

5. Vue的生命周期

钩子函数

beforeCreate

a. 用户使用new Vue()新建实例前

b. 将父组件自定义事件传递给子组件

c. 初始化render函数转为虚拟dom方法

created

a. 初始化事件

b. 数据和data属性绑定

c. 此时还没有el选项

beforeMount

a. 先判断有没有el

b. 判断有无template

mounted

给vue实例对象添加$el成员

beforeUpdate

vue发现data更新,则在下次时间循环开始时重新渲染组件

updated

a. 重新执行render函数生成vnode

b. 将vnode转化为真实Dom

c. 重新挂载到HTML中

beforeDestroy

a. 调用vm.$destroy()准备销毁vue实例

b. 这一步实例仍然可用

destroyed

在vue实例销毁后调用,所以实例被销毁

读书心得

我看完了入门基础,对Vue有一个基本认识,它有什么优势,它的生命周期如何?它该如何安装?这些都是看完后值得思考的,其次,可以动手用NPM和Node.js安装运行,简单体验一下Vue。期待下次更新。

点赞 评论 引用 举报

虚荣Vainglory

发帖: 23粉丝: 1

发消息 + 关注

发表于2021年01月08日 10:35:33
直达本楼层的链接
9#
显示全部楼层

华为云ID:hw53391917

1.6-1.10笔记分享

什么是Vue?

Vue是—套用千构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用(由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能)
1.    框架做分层设计, 每层都可选, 不同层可以灵活接入其他方案
2.    它给你提供足够的optiona|, 但并不主张很多required。
3.    Angular、react:强主张

图片.png

MVVM: Model-View-ViewModel
Vue是数据驱动视图的框架采用了MVVM (Model、 View、 ViewMode|)架构。 其核心库只关注视图层,视图与数据状态保持同步,

“Vue的核心是—个响应式的数据绑定系统” 即数据和视图建立绑定之后DOM将与数据保持同步。

图片.png

为什么要用Vue?

-轻量:         

•    Angular   65kb
•    内置bundling和tree-shaking
•    Vue+Vuex+Vue Router - 30KB

-学习成本低:

•    文档组织结构清晰
•    API面积比Angular少
•    对ES6+的要求比React少

-性能优越:

•    虚拟DOM
•    避免子组件重渲染

-生态良好:

•  众多厂商都在使用井持续增长

创建一个工程

Vue引入方式
A. CDN方式:引入vue框架js

B.  NPM方式:构建应用,Vue提供了一个官方的CLI:https://cli.vuejs.org/zh/

Vue的简单应用

指令(Directives):是带有 V- 前缀的特殊属性。指令属性的预期值是单一的JavaScript表达式。

>职责:是当其表达式的俏改变时相应的将某些行为应用到DOM上

·    常见指令
>    v-if:根据表达式的结果来判断,是true则渲染元素,false则将元素注释掉
>    v-show:与v-if类似,true就渲染,但是false并不是注释掉,而是通过display:none;来将元素隐截,如果需要来回切换,使用v-show更好。
>    v-for:遍历元素,使用格式为v-for="(值,键)in遍历内容”
>    v-bind:给标签绑定属注、类、样式等,可以缩写为冒号
>    v-html:向标签内覆盖注入HTML内容作为其子元素
>    v-on:给标签绑定函数,可以缩写为@, (Vue.js为v-on提供了享件修饰符。 修饰符是由.开头的指令后缀来表示的, 用于对享件进行约束。)
>    v-mode|:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符
>    v-once:不允许修改数据

·    自定义指令
>需要对普通DOM元素进行底层操作, 这时候就会用到自定义指令
>    Vue.directive用于注册自定义指令

组件
>全局注册:全局注册组件可用在Vue根实例(new Vue)的模板中

>局部注册:局部注册组件可用在当前注册的组件及子组件中

•    data、 computed、methods、 watch

>    data:属性
>    methods:方法
>    watch:观察者

>   computed:计算属性

读书心得:通过这周学习,简单了解了Vue的相关知识,很有收获。

点赞 评论 引用 举报

谭涟漪

发帖: 13粉丝: 1

发消息 + 关注

更新于2021年01月11日 11:44:42
直达本楼层的链接
10#
显示全部楼层

华为云ID:hw09881291

1.6-1.10笔记分享

什么是Vue?

Vue是—套用千构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用(由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能)

Vue是数据驱动视图的框架采用了MVVM (Model、 View、 ViewMode|)架构。 其核心库只关注视图层,视图与数据状态保持同步,

“Vue的核心是—个响应式的数据绑定系统” 即数据和视图建立绑定之后DOM将与数据保持同步。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
参数    一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind 指令可以用于响应式地更新 HTML 特性demo
修饰符  . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

创建一个Vue实例

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程—例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 8个生命周期 (钩子函数)
生命周期钩子的 this 上下文指向调用它的 Vue 实例。注意:不要在选项属性或回调上使用箭头函数,会改变this指向。

1.beforeCreate钩子函数:

a.用户使用new Vue()新建Vue实例

b.父实例实例化子实例, 确认组件间的父子关系, 将父组件的自定义聿件传递给子组件

C. 初始化将render函数转为虚拟dom的方法

2.created钩子函数:

a.初始化聿件, 进行数据的观洌

b.数据已经和data展性进行绑定(放在data中的属性当值发生改变的同时, 视匡也会改变)

C. 此时还是没有el选项

3.beforeMount钩子函数:

a.el选项。 如果有的话就继续向下编译,如果没有el选项,则停止编译, 也就意昧着停止了生命周朋.

b.如删掉el:'#app'

“…---beforeCreate仓阻前状态------

c.template参数

(1)如果vue实例对象中有template参数选项, 则将其作为楼板编译成render函数。

(2)如果没有template选项, 则将外部HTML作为楼板编译。

(3)可以看到template中的楼板优先级要高千outer HTML的优先级。

4. mounted

a.给vue实例对象添加$el成员 , beforeMount之前el上还是undefined

b.mounted之前h1中还是通过{{message}}进行占位的 , 因为此时还有挂载到页面上, 还是 丿avaScript中的虚拟DOM形式存在的。 在mounted之后可以看到h1中的内容发生了变化。

5.beforeUpdate

a.vue发现data中的数据发生了改变,则在下次时间循坏开始蚕新渲染组件

6.updated

a.直新执行render函数生成vnode。

b. 将vnode转化为真实Dom

c 直新挂载到HTML中, 并且覆盖掉上次渲染的$el

7.beforeDestroy:

a.洞用vm.$destroy()准备销毁vue实例

b.beforeDestro烟子函数在实例销毁之前洞用。在这步,实例仍然完全可用。

8.destroyed:

a. 在Vue实例销毁后洞用, 调用后, Vue实例指示的所有东西都会解绑定, 所有的聿件监听器会被移除, 所有的子实例也会被销毁。

读书心得:学习了VUE相关基础和适配知识,感觉对于初学者还是比较难懂的,加油吧!

评论
7号小助手 5 天前 评论

您好哦 您提供的华为云账号和前一个是一样的呢 内容也相似,不能算积分哦~

... 查看全部
谭涟漪 5 天前 评论

评论 7号小助手:我只是复制了他的标题忘了改账号,内容并不相似啊,你可以再看看

... 查看全部
点赞 评论 引用 举报

AAAI

发帖: 16粉丝: 0

发消息 + 关注

发表于2021年01月08日 17:04:06
直达本楼层的链接
11#
显示全部楼层

华为云ID:f1113206748  第一周笔记

Vue

一套用于构建用户界面的渐进式框架,可以自底向上逐层应用。

Vue是数据驱动的框架,采用MVVM架构,核心库只关注视图层,视图与数据状态保持同步。

Vue的核心是一个响应式的数据绑定系统。

Vue的特点:轻量,学习成本低,性能优越,生态良好。、

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

生命周期流程:

开始创建–初始化数据–编译模板–挂载Dom→渲染–更新→渲染–销毁。

指令

指令:是带有v-前缀的特殊属性。

职责:是当其表达式的值改变时相应的将某些行为应用到DOM上。

组件:

全局注册:用于Vue根实例的模板中

局部注册:用在当前注册的组件及子组件中。

移动端适配:等比例缩放问题

注意布局自适应,图片高清匹配



点赞 评论 引用 举报

游客

富文本
Markdown
您需要登录后才可以回帖 登录 | 立即注册