首先呢, 我们建一个空的文件夹, 取名 vue 组件 2
建好了没?
下一步, 很重要! 命令行, 先进入已经建好的文件夹 vue 组件 2, 然后敲命令请复制: vue init webpack vuetest
这里 vue 官网写的也很清楚:
下面再附上一张我安装成功的结果图:
根据黄色命令提示依次执行, 很简单的静静等待以小会, 成功的小伙伴会看到 2 个结果 1 命令行出现一个成功提示, 并给出一个网址, 把这个网址放到浏览器打开就行了, 如图:
2 新建的 vue 组件 2 文件夹出现了一大堆东西, 嗯, 到了这一步就可以正式的开始我们的组件小笔记了
开发之前, 还得安装开发版本, 进入命令进入 vuetest 文件, 敲命令, 复制:, 这个命令 vue 官网也是有的, 不知道的也不用担心, 因为我依然会附上一张图:
又是两个结果: 1 命令行, 看图:
2vuetest 文件夹出现一个 dist 文件夹, 不管他, 出来就行
下面的只是笔记总结, 教程到此结束!
2 个点, 一个在 index.html, 一个在 app.vue
A. 先看 index.html
也两个点: 1 全局注册组件, 2 局部注册组件
注意: 自定义标签的命名 : 小写, 并且包含一个短杠, 如:<my-component></my-component > 或者使用: is 属性 < div is="my-component"></div>, 当然 is 也可以提供 js 环境, 如:<div :is="judge?'hello-world':'my-component'"></div>
data 必须是函数, 否则 Vue 会停止运行, 并在控制台发出警告这里有一个小东西, 模拟 data 函数?: 外面定义一个对象, 如: var obj = {message:"我是 str 字符串"}; 然后 data 函数里面 return 这个 obj, 如 data:function () {return obj;},, 这个对象将被各个组件共用一个引用, 即传址问题? 不是很清楚
所以我们应该使用 data 函数为每个组件返回全新的数据对象来修复这个问题
data: function() {
return {
counter: 0
}
}
全局注册组件:
格式:
注册一个全局组件, 可以使用 Vue.component(tagName, options)
Vue.component("MyComponent", {
template: "<h1 > 全局注册的 mycomponent 组件 is me {{mymessage}}</h1>",
data: function() {
return {
mymessage: "被忽略的组件数据"
}
}
})
在实例模板 #app 中使用自定义标签 < my-component> 就 ok 了
局部注册: 你不必把每个组件都注册到全局你可以通过某个 Vue 实例 / 组件的实例选项 components 注册仅在其作用域中可用的组件, 如:
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child HelloWorld: HelloWorld
}
})
局部组件里面的 data 数据渲染到 template 里面, 这点和 vue 实例里面的 data 数据渲染到实例模板 #app 里面一样, 且注意, template 里面只能有一个容器, 即一个标签节点
组件之间也可以互相使用, 当然必须得加入 components 注册在其的作用域内, 渲染方法还是一样的这里也有一个注意点, 要注册到另一个组件的组件要定义在上面, 否则会出问题好了, index.html 就这么多
B 终于到 app.vue, 不知道还能不能写完
先总结下知识点有: 1 子组件如 Person 与父组件 app.vue 之间的数据互传:
父组件传数据给子组件, 由于组件实例的作用域是孤立的, 需要使用 prop, 即自定义标签的时候, 将数据当做标签属性写入标签, 如:
<Person
username="张三"
:height="180"
color="white"
></Person>
子组件通过 props 声明它预期的数据来接收数据, 如:
props:['username','height','color'],
或者
props:{
username:{type:String},
height:{type:Number},
color:{type:String}
},
同样也可以在 template 实例中通过来调用
如:
<template>
<div>
<p > 姓名:{{username}}</p>
<p > 肤色:{{height}}</p>
<p > 身高:{{color}}</p>
</div>
</template>
子组件传数据给父组件:
************ 这是官网上子组件修改 prop 值并返回给父组件, 也是子组件传输局给父组件的一种表现? 回头研究
定义一个局部变量, 并用 prop 的值初始化它:
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
定义一个计算属性, 处理 prop 的值并返回:
props: ['size'],
computed: {
normalizedSize: function() {
return this.size.trim().toLowerCase()
}
}
这里有一种返回数据的方法, 使用 emit
passDad: function() {
// 传递事件
// 第一个参数是要发射的事件名称, 后面参数是要传递的数据
this.$emit("myfn", this.message);
}
父组件通过 @myfn="fn",data 就是传递的数据
methods: {
fn: function(data) {
console.log(data);
}
}
2 引入组件 (其他的 vue 文件):
如: import HelloWorld from './components/HelloWorld',
./ 可以换成 @, 这里 @指的是 src 文件夹,
引入之后还得注册到 components 里面, 这里的 components 和 index.html 一样, 他在写在 script 里面的 export default 里面, 和 name 同级
3 具名插槽
在子组件 Myslot 里面
<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容多个插槽可以有不同的名字具名插槽将匹配内容片段中有对应 slot 特性的元素
如:
<template>
<div>
<h1 > 我是 slot 组件 </h1>
<slot name="header"></slot>
<slot > 我是默认显示的内容 </slot>
<slot name="footer"></slot>
</div>
</template>
仍然可以有一个匿名插槽, 它是默认插槽, 作为找不到匹配的内容片段的备用插槽如果没有默认插槽, 这些找不到匹配的内容片段将被抛弃中间那个 slot 元素里面写的内容就是备用插槽
在父组件里面: template 里面呈现
<my-slot>
<p slot="header"> 我是头部 </p>
<p slot="footer"> 我是底部 </p>
<p > 我是插槽里的内容 </p>
</my-slot>
父组件里面的 p 标签没有 slot 属性, 它的内容优先级要大于子组件的备用插槽, 即如果没有这个 p 标签, 子组件的备用插槽内容就会显示
4 还有一个 transition 过渡, 这个其实不是讲组件的, 只是通过父组件呈现出来而已, 顺带讲一下先附上一张结构图, 方便了解:
v-enter: 动画开始进入的状态
v-enter-to: 动画进入完成的状态
v-leave: 动画将要离开的状态
v-leave-to: 动画离开结束的状态
v-enter-to,v-leave 其实是同一种状态, 也就是没有动画时候的状态
还有官网上德解释, 也看看呗
v-enter: 定义进入过渡的开始状态在元素被插入时生效, 在下一个帧移除
v-enter-active: 定义过渡的状态在元素整个过渡过程中作用, 在元素被插入时生效, 在 transition/animation 完成之后移除这个类可以被用来定义过渡的过程时间, 延迟和曲线函数
v-enter-to: 2.1.8 版及以上 定义进入过渡的结束状态在元素被插入一帧后生效 (与此同时 v-enter 被删除), 在 transition/animation 完成之后移除
v-leave: 定义离开过渡的开始状态在离开过渡被触发时生效, 在下一个帧移除
v-leave-active: 定义过渡的状态在元素整个过渡过程中作用, 在离开过渡被触发后立即生效, 在 transition/animation 完成之后移除这个类可以被用来定义过渡的过程时间, 延迟和曲线函数
v-leave-to: 2.1.8 版及以上 定义离开过渡的结束状态在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除), 在 transition/animation 完成之后移除
v - 指的是节点, 如: class 类名
了解这个之后, 就可以呈现出来了, 首先在 template 里面用 transition 标签包裹要过渡动画的节点
动画显示方法: 2 种
1 直接通过定义 class 类名, 如: fade,
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
这个是动画进入和离开的过渡状态, 完全根据上面的模板来的, style 也是 CSS 的写法, 很简单
.fade-enter, .fade-leave-to {
opacity: 0;
}
这个是动画进入和离开的过渡样式, 也是很容易看懂的
注意: 组件动态切换: 模式切换 mode 切换 (默认 in-out)
将它改成 out-in, 就会出现用相同的节点切换, 但不是一个节点, 讲起来比较难懂, 反正用它显示效果会使你想要的可以试试区别
给个例子:
<transition name="fade" mode="out-in">
<div :is="switchC?'Component1':'Component2'"></div>
</transition>
如果使用的时 if-else 写法: 那么就要使用 value 值来区分这两个节点, 如果没有加以区分, 缓存就会将他们当做一个节点来变化如:
<transition name="mymove" mode="out-in">
<div v-if="switchC" key="1"> 我是 div1</div>
<div v-else key="2"> 我是 div2</div>
</transition>
2 先看代码:
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false"
>
<div class="mydiv" v-show="myjudge">div 里面的内容 </div>
</transition>
这种方法其实就是将动画效果携程函数, 然后再 transition 标签里面用属性的方式调用
再看函数的代码:
methods:{
beforeEnter:function(el){
console.log(el);
$(el).css({left:"0px",opacity:0});
},
enter:function(el,done){
$(el).animate({left:"450px",opacity:1},done);
// done();
},
leave:function(el,done){
$(el).animate({left:"900px",opacity:0},done);
// done();
}
}
这里除了 beforeEnter 只有一个 el 参数外, 其他的都还有 done 参数, done 代表的时这个动画结束, 执行下一个, el 代表元素节点
恩, 终于写完了, 本来以为会总结的很好, 结果分了两天写, 写的就有点乱套了, 反正这个只是我的一个小笔记, 自己应该能看懂, 恩, 就这样
来源: http://www.jianshu.com/p/8cb951dccbc2