vue.js 学习笔记（一）

对webpack有了基本的了解之后，开始学习vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue.js官网，https://cn.vuejs.org/v2/guide/index.html 

官网上的资料是最全最准确的，但是如果像我一样之前对vue.js 没有任何了解，直接通过它去入门还是有一些难度的。

下面的这篇文章写得不错，虽然是针对1.X版本的，但是比较适合新人。

1. Vue.js——60分钟快速入门
2. Vue.js——60分钟webpack项目模板快速入

第一篇是对vue的使用入门，第二篇是在webpack的基础上构建项目。

下面这个还是同一套学博客，由于2.x版本之后改了很多api，文档中的项目并不能直击跑起来，但是作为入门写的还是很不错的

1. Vue.js——60分钟组件快速入门（上篇）
2. Vue.js——60分钟组件快速入门（下篇）

注意，

1、由于是在webpack项目模板的基础上创建项目，所以注意先要安装webpack相关的环境

如我在运行是报错：

C:\Program Files\nodejs\node_gobal\webpack:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
 

其实是项目没有安装webpack-dev-server依赖包 ，

运行 npm install -D webpack-dev-server  然后重新  执行 npm install   

再次 运行项目就ok了。

 

2、关于运行工具使用的是webstrom，但是不识别.vue文件，所以没有相关的提示，

需要安装  vue.js的插件

3、关于项目创建

参考 这篇文章 https://www.jianshu.com/p/02b12c600c7b

组件的el和data选项

传入Vue构造器的多数选项也可以用在 Vue.extend() 或Vue.component()中，不过有两个特例： data 和el。
Vue.js规定：在定义组件的选项时，data和el选项必须使用函数。

下面的代码在执行时，浏览器会提出一个错误

Vue.component('my-component', {
	data: {
		a: 1
	}
})

另外，如果data选项指向某个对象，这意味着所有的组件实例共用一个data。
我们应当使用一个函数作为 data 选项，让这个函数返回一个新对象：

Vue.component('my-component', {
	data: function(){
		return {a : 1}
	}
})

3、vue单页面，多路由，前进刷新，后退不刷新

  这篇博客中的方案相对可行的：https://segmentfault.com/a/1190000012083511

 

4、Vue Router 的params和query传参的使用和区别

https://blog.csdn.net/mf_717714/article/details/81945218

 

5、Vue——watch选项详解

https://blog.csdn.net/yangdengcheng/article/details/90479976

Vue.js中 watch(深度监听)的最易懂的解释 ：https://blog.csdn.net/qq_36688143/article/details/81287535

 

6、Vue props用法详解 

https://www.jianshu.com/p/89bd18e44e73

 

7、过渡动画效果

进入/离开 & 列表过渡

https://cn.vuejs.org/v2/guide/transitions.html

状态过渡

https://cn.vuejs.org/v2/guide/transitioning-state.html

第三方动画库 animate

https://daneden.github.io/animate.css/