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)


 

 
posted @ 2019-08-04 20:43  零基础到入土  阅读(252)  评论(0编辑  收藏  举报