vue脚手架搭建

1、插槽（slot） 就是页面分离出去的 公共部分 至关于PHP 的 include 替换部分

种类： 不具名插槽 覆盖不具名插槽 具名插槽 覆盖具名插槽

特色：

一、不具名公共插槽

覆盖公共插槽

公共插槽的惟一性

二、具名插槽(带有名称的来进行替换不一样的位置)

 

2、extend拓展组件模板

经过实例为组件传值

3、Vue中的computed计算属性 有冗余(功能与methods和filter稍有些重叠) 计算方法 过滤器

4、vue 中的自定义指令

一、组成结构

Vue.directive(指令名, 指令实现内容)

传过去的： 属性名 指令名 属性值

二、directive 中的钩子函数(在实列化前仍是实例化后)至关于js 构造函数 具备生命周期

1）bind

 

只调用一次，指令第一次绑定到元素时调用，用这个钩子函数能够定义一个在绑定时执行一次的初始化动做

2）inserted

被绑定元素插入父节点时调用（父节点存在便可调用，没必要存在于 document 中）

3）update

被绑定元素所在的模板更新时调用，而不论绑定值是否变化。经过比较更新先后的绑定值，能够忽略没必要要的模板更新

4）componentUpdated

被绑定元素所在模板完成一次更新周期时调用

5）unbind

只调用一次，指令与元素解绑时使用

5、动画

v-if（条件渲染）

v-show（条件展现）

动态组件

在组建的根节点上，而且被vue实例DOM方法触发，如appendTo方法把组件添加到某个根节点上

Vue推荐Animate.css样式库来拓展丰富Vue的动画效果，若是用别人的动画库就不得不涉及到自定义类名了(CSS动画插件)

1）Animate.css官方库地址

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

Vue中的动画 Javascript钩子

当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 不然，它们会被同步调用，过渡会当即完成。

velocity动画库(JS动画插件)

velocity是专门用于拓展出来服务于JS渲染动画的，咱们能够结合Vue进行使用

6、路由

一、至关于a连接

a）router-link (超连接标签)

b）to（须要跳转的目标地址）

二、切换导航连接时，相应单页面的内容会发生变化，这边就须要一个容器去接收组件的内容

<router-view></router-view>

7、Vue中的动态路由参数params

1）动态路径参数 以冒号开头

2）获取动态路由参数

let list = {template: '<h1>$route.params.id</h1>'}

3）单参

4）多参

/list/测试/name/三日

8、Vue中的动态路由参数query(至关于get请求 带参数界面)

-----------------------------------------------------------------------------------------------

项目实践：

开发一个 记事本 的项目

脚手架安装

建立脚手架的目的

能够帮助咱们构建好一个空的项目 包括目录，文件命名， 入口文件， 依赖插件， 打包程序

 

vue ，(自带了webpack的小型服务器 ，因此不用咱们再去使用服务器)

vue全局安装指令：

npm install --global vue-cli -g

 

webpack (vue init webpack notepad), 初始化一个基于webpack模板的名字叫作notepad

webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

 

 

grunt(npm install -g grunt-init)