Vue零基础到实战权威开发宝典_学习笔记

1、VScode插件

2、ES6的字符串(模板字符串)可以随意换行,使用成对的单反引号

 

3、ES6中字符串的占位符:如,${name}

 

5、ES6中使用反单引号,可以作为模板字符串处理(可以识别换行,不用加\n),如下:

 

6、模板中写什么

 

7、可以使用ES6的模板字符串(单引号),好处多(支持换行,单双引号切换)

 

8、:key一般与for配合使用,提高页面渲染效率(VUE页面渲染是依靠虚拟的JS对象,数据改变时,不会页面全部刷新,只是对改变的数据对应的元素进行渲染刷新,效率高!)

 

9、插值(属性)、指令中都可以写js代码

10、ES6的for of循环,相当于for in

11、VUE中对象(包括js对象),就是json对象(可以包括属性与方法)

 

***********************VUE核心组件***********************

1、组件的props属性、data内部数据的区别

 

2、VUE项目结构:

 

3、一个单文件组件的内容构成:

 

5、一个模板必须使用一个div根元素包裹起来!

6、如果img src=”item.url”,这样src解析出来就行“item.url”的原样字符串,要按照如下所示加上:,这样就按照js代码进行处理,才能拿到item中的url属性

 

7、./表示当前文件所在的根目录, ../当前文件的上一级目录

 

8、一个属性前面加上“:”后,其的数值可以由js代码获取:

注:“{。。。。}”表示对象

 

9、

10、避免不同组件之间的样式污染的方法,加上scoped限定

11、参数不用写成jason键值对的形式,前提是由默认值的情况下:

 

12、从一个模块、组件中具名导入相应的方法、配置、对象

注意:webpak中的所有事物(图片、对象、组件、函数等)都可以看成模块,可以使用import进行导入!

 

13、如果目录太深,不要使用../../等方式,可以直接使用@,就表示src目录

15、v-for循环div及其子元素

16、计算属性的使用,其实跟一般data一样,只是要有返回值

17、vue中事件可以加上修饰符,比如.prevent,可以阻止a标签的默认事件(就是页面刷新)

 

18、类样式的动态指定:如下,只有item.channel===chooseid时才有class=active类型

19、配置文件中属性、数组的默认值不能写作 default:[],而是要写为函数形式,确保数值隔离( 因为组件可能会被重用)

 

20、请求的资源如果是本地工程目录中,那么要使用require来请求(因为build后,项目找不到相应资源),而外部资源可以直接使用外部资源地址

 

21、直接导入组件,按如下写就可以(也可以具名导入,或者导入模块的单个函数、对象等):

 

22、当模板中的一部分内容无法确定,可以使用slot技术,相当于占位符

23、

①如果不使用字面量赋值,而是使用data或prop,那么就要在前面加上“:”(表示js代码)

② v-if与v-else 可以搭配,可以根据条件现实(隐藏元素),隐藏时是将元素删除;

  v-show,也是根据条件显示,但是是不删除,只是隐藏,对于要频繁显示隐藏的元素,该模式比较好;

 

25、Vue公益课程的课程资料:
链接:https://pan.baidu.com/s/1--07TnBcrgCoLt9DhfDrZA 
提取码:agk1 

 

26、

npm create 工程名  (首先使用控制台进入创建工程项目的根文件)

npm run builid (可以当前VUE项目进行转换,最终部署时使用)

 

npm run serve (测试阶段使用,直接在内存构建),ctr+c停止当前服务器

 

27、项目中第三方的库可以不拷贝,因为package.json中已经有依赖记录,只需要在当前工程目录的控制台中运行 npm  i 就可以将依赖自动安装:

28、clear可以清空控制台的屏幕内容

 

29、组件export

①默认导出,相当于导出一个default对象,其中有个fn

 

②具名导出,导出的对象中有个一个double函数

④最终这个文件对象中导出:包含一个default函数、一个具名double函数,一个变量n

30、组件(模块)导入import

31、VUE工程目录说明:

 

 

********************VUE2*******************

1、VUE的单页应用:切换页面不刷新页面,只是变换内部的组件

2、JS文件中可以导出export模块

  1. routlink是router第三方库中的组件,相当于a标签,但是跳转时不刷新页面:

  1. js拼接字符串à其实就是占位符

${item.channelId}就是占位符,与‘/channel/’进行拼接

 

  1. 路由匹配动态id使用parameter参数进行

6、属性绑定js代码的,其赋值使用{ }对象方式(就是键值对形式)

7、这样写a标签的点击事件,可以阻止页面刷新(停止事件传播)

8、v-if与v-else配形式

9、组件中的watch用于监控组件中某些数据的变化,并触发一些相应的事件

 

10、命令式导航,是通过代码进行页面的跳转,而不是通过页面交互(如Click事件)

11、因为组件的属性只能接收不能改变,组件的data只能在组件内部使用,所有当需要数据在不同组件或页面之间共享流转的时候,就要使用共享数据(store),从而当共享数据改变时,相应的组件要进行刷新:如用户登录状态数据等。

 

12、import可以在组件的头部进行使用,也可以在script中进行使用

 

13、共享数据的改变只能使用mutation方式进行修改,不能直接改变共享数据

15、使用共享数据的好处,如果一个组件请求了一次数据,那么其他使用概数据的组件就不用重复获取,(已经缓存至内存中)

16、使用ajax组件返回异步结果的方式:

 

17、form开发方式,一般input控件使用双向绑定方式:

18、表单默认提交会刷新,使用.prevent阻止页面刷新

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值