vue脚手架搭建

一、插槽（slot） 就是页面分离出去的 公共部分 相当于PHP 的 include 替换部分

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

特点：

1、不具名公共插槽

覆盖公共插槽

公共插槽的唯一性

2、具名插槽(带有名称的来进行替换不同的位置)

 

二、extend拓展组件模板

通过实例为组件传值

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

四、vue 中的自定义指令

1、组成结构

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

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

2、directive 中的钩子函数(在实列化前还是实例化后)相当于js 构造函数 具有生命周期

1）bind

 

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

2）inserted

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

3）update

被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新

4）componentUpdated

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

5）unbind

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

五、动画

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进行使用

六、路由

1、相当于a链接

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

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

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

<router-view></router-view>

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

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

2）获取动态路由参数

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

3）单参

4）多参

/list/测试/name/三日

八、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)