(原创)vue 学习笔记

layman 发布于2019-08-22 18:09 / 2140人阅读

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。

开篇语

我最近学习了js,取得进步,现在学习vue.js.
建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧
参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vu...
从基础开始理解和上手,请看我写的中文注释,帮助理解

一些建议

直接把菜鸟教程的例子复制到自己的代码编辑器里看更好

菜鸟教程的好处我觉得之一是其有很多实例子,那么就应该拿例子复制回来本地自己的编辑器看.

因为菜鸟的例子左边代码,右边视图.就很小了,不好审视.

要打开浏览器控制台(比如我们推荐用谷歌浏览器chrome在浏览器按f12就可以打开控制台),直观的看到js和dom层,比看到界面更重要的是看到dom层的实际操作变化

一个简单的vue.js例子


 vue
  
   学习vue很舒服 
   {{ message }}
 {{ mz }}

vue.js一个简单例子的基础说明系列-[第1个例子]





vue一个简单例子的基础说明




site : {{site}}
url : {{url}}
alexa : {{alexa}}
{{details()}}

vue.js一个简单例子的基础说明系列-[第2个例子]---实例属性与方法,它们都有前缀 $

参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vu...

请看我写在代码里的注释





vue.js一个简单例子的基础说明系列-[第2个例子]



site : {{site}}
url : {{url}}
Alexa : {{alexa}}

vue.js一个简单例子的基础说明系列-[第3个例子]-----vue如何模板语法渲染数据





vue.js一个简单例子的基础说明系列-[第1个例子]----vue如何模板语法渲染数据



{{message2}}

vue.js一个简单例子的基础说明系列-[第4个例子]-----这个例子.我还是不明白这个例子.我还是不明白

它是怎么vue去改变dom层

在浏览器控制台可以看到操作是它的dom层的变化





Vue 测试实例 - 菜鸟教程(runoob.com)





修改颜色





directiva v-bind:class

vue 的v-bind,bind意思:绑定

vue 的v-bind,bind意思:绑定,v-bind就是在dom和js层进行数据绑定.就是可以讲js的数据变量什么的绑定到dom层的属性,让属性的值是js数据.这样,就能使得改变数据于是就改变了dom的属性

vue学习笔记-vue双向数据绑定- vue双向数据绑定





vue双向数据绑定







{{parentMsg}}

vue npm 搭建项目流程及备忘及不踩坑

首先我新建个"abc"文件夹,cmd到abc目录下.

然后,初始化一个vue项目 vue init webpack mydemo1 (vue init simple 是简单版,webpack是普通版,一般选择使用webpack版),然后它就开始新建一个名叫作mydemo1的项目,问一些问题如下,除了几个要注意,其他的就按回车默认就行,要注意的几个如下:

Use ESLint to lint your code? (Y/n)

要使用严格的es6语法吗?不用,因为严格的话,写错一点代码都不允许,太麻烦.按n选no,再回车

Set up unit tests No ?(Y/n)

是测试工具,这个也选no就行.

Setup e2e tests with Nightwatch?

也是测试工具,这个也选no就行.

npm install 表示我要根据package.json文件清单来从node云端下载文件放到生成的node modules文件夹.这要下载很多东西,所以建议cnpm install

------------------------------------------分割-----------------------------------------

vue学习笔记-vue模板语法




vue模板语法

vue + Django 一个项目涉及的 vue 技能清单

"Python前后端分离开发Vue+Django REST framework实战难度中级" 的知识技能清单已经罗列完了,它是偏后端的,所以前端的知识技能讲的不太多.
我打算现在继续再分析一个vue前端的项目,名字"慕课网 Vue2.5开发去哪儿网App 从零基础入门到实战项目",罗列它的知识技能清单.

vue项目技能清单之_vue2.0开发去哪儿网

来自慕课网教程"Vue2.5开发去哪儿网App 从零基础入门到实战项目"

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95566.html

回望2017：一个前端从业者砥砺前行的一年

摘要：走过了这一年，公众号的名称前前后后改了三次，最后定格为闰土大叔。均价，这价格绝对属于太原市最便宜的楼盘之一了。据售楼部的朋友说，未来两年太原的房价还会迎来新一波的涨价潮，到了年，太原会承办全国青少年运动会，简称青运会。前言从年前就嚷嚷着要走出去走出去，转眼间已经到了年底依然在我的大太原呆着。年底了，不能免俗的我，也来写一篇2017年度工作总结的文章，凑凑热闹。如果对你有一点点启发，...

dmlllll 2019-06-26 17:31 评论0 收藏0
回望2017：一个前端从业者砥砺前行的一年

摘要：走过了这一年，公众号的名称前前后后改了三次，最后定格为闰土大叔。均价，这价格绝对属于太原市最便宜的楼盘之一了。据售楼部的朋友说，未来两年太原的房价还会迎来新一波的涨价潮，到了年，太原会承办全国青少年运动会，简称青运会。前言从年前就嚷嚷着要走出去走出去，转眼间已经到了年底依然在我的大太原呆着。年底了，不能免俗的我，也来写一篇2017年度工作总结的文章，凑凑热闹。如果对你有一点点启发，...

xietao3 2019-08-21 18:34 评论0 收藏0
资源集 - 收藏集 - 掘金

摘要：行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider)，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。如果你还不知道客户端爬取，可以先看...

stdying 2019-07-25 12:06 评论0 收藏0
资源集 - 收藏集 - 掘金

摘要：行爬取顶点全网任意小说掘金之前连续多篇文章介绍客户端爬取平台，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。文件标记所有文件我的后端书架后端掘金我的后端书架月前本书架主要针对后端开发与架构。 30行js爬取顶点全网任意小说 - 掘金之前连续多篇文章介绍客户端爬取平台(dspider)，今天我们从零开始，实现爬取顶点小说网任意一本小说的功能。如果你还不知道客户端爬取，可以先看...

马忠志 2019-08-15 10:42 评论0 收藏0