学习vue2.0笔记(第四章下)

js实现过渡:通过v-on事件##

学习vue2.0笔记(第四章下)_第1张图片
image.png
学习vue2.0笔记(第四章下)_第2张图片
image.png
学习vue2.0笔记(第四章下)_第3张图片
image.png

实例:
最外层index里面引入jq


学习vue2.0笔记(第四章下)_第4张图片
最外层

监听三个事件


学习vue2.0笔记(第四章下)_第5张图片
image.png
学习vue2.0笔记(第四章下)_第6张图片
image.png

自定义事件##

自定义一个v-color指令

image.png

通过directives选项,
el:当前元素
binding:对象,绑定的变量等

学习vue2.0笔记(第四章下)_第7张图片

全局指令,需要写入根组件的实例化内

学习vue2.0笔记(第四章下)_第8张图片
学习vue2.0笔记(第四章下)_第9张图片
学习vue2.0笔记(第四章下)_第10张图片
image.png

细化指令,不同阶段执行不同得到操作


学习vue2.0笔记(第四章下)_第11张图片
image.png

举个栗子:为input聚焦

学习vue2.0笔记(第四章下)_第12张图片
例子

插件##

package.json文件中可以查看全部插件
npm安装插件:

image.png

引用

image.png

等同于



注册

image.png

实例化插件, 有的不需实例化,可直接使用


写入根组件


image.png
学习vue2.0笔记(第四章下)_第13张图片
image.png

单文件组件和vue-cli
单文件组件的实现得力于vue-loader+webpack

你可能感兴趣的:(学习vue2.0笔记(第四章下))