vue基础
Vue.js的定位是一个渐进式框架 前端三大mvvm框架 vue , react ,angular
Vue.js受到越来越多关注的一个重要原因:你只需要具备基本的HTML/JavaScript/CSS 基础,就可以快速上手,让你用上这些现代Web开发中的先进技术来提高你的生产力:
vue官网
与Angular和React出自巨型公司不同,Vue.js基本上是以作者(尤雨溪/Evan YOU)
hello Vue.
1.引入vue.js库
< script src = "vue.js" ></ script >
|
2. 创建vue实例
< script >
new Vue({
el:'#app',
data: {msg:'Hello,Vue.js 2'}
})
</ script >
|
3. 完整html导入
< div id = "app" >
hello Vue!
</ div >
|
4.完整的helloWorld代码
< meta charset = "UTF-8" >
< script type = "text/javascript" src = "../assets/js/vue.js" ></ script >
< title >Helloworld</ title >
< h1 >Hello World</ h1 >
< hr >
< div id = "app" >
{{message}}
</ div >
< script type = "text/javascript" >
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</ script >
|
模板语法-文本语法
文本
数据绑定最常见的形式就是使用{{}}语法 (双大括号)
< span > {{message}}</ span >
|
也可以使用v-bind方法
< span v-bind = "message" ></ span >
|
html文本
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html
< div id = "app" >
< div v-html = "rawMsg" ></ div >
</ div >
< script type = "text/javascript" >
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
rawMsg:'< h1 >你好vue</ h1 >'
}
})
</ script >
|
模板语法-属性
给html标签绑定一个属性值应该使用 v-bind:属性名称
以下代码给h1绑定一个新的id和title属性
< div id = "app" >
< h1 v-bind:id = "dyId" v-bind:title = "dyTitle" >我是一行快乐的标题</ h1 >
</ div >
< script type = "text/javascript" >
var app=new Vue({
el:'#app',
data:{
dyId:'best',
dyTitle:'看见我的人一生平安'
}
})
</ script >
|
渲染结果是:
< h1 id = "best" title = "看见我的人一生平安" >我是一行快乐的标题</ h1 >
|
绑定属性也是可以直接简写:
< h1 :id = "dyId" :title = "dyTitle" >我是一行快乐的标题</ h1 >
|
使用 JavaScript 表达式
在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{4+5}}
{{ ok ? '是的' : '不是' }}
{{['木木','曾庆林'].join('--')}}
|
{{ var a = 1 }}
{{ if (ok) { return message } }}
|
条件指令 v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。
< div v-if = "isLogin" >你好,木木!</ div >
|
也可以用 v-else 添加一个“else 块”:
<div v - else = "">请登录后操作< / div>
|
< div id = "app" >
< div v-if = "isLogin" >你好:木木</ div >
< div v-else = "" >请登录后操作</ div >
</ div >
< script type = "text/javascript" >
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</ script >
|
v-show指令
另一个用于根据条件展示元素的选项是 v-show 指令
< h1 v-show = "isShow" >Hello!</ h1 >
|
v-show 只是调整css中display属性,DOM已经加载,只是CSS控制没有显示出来。
v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载。
v-show:调整css dispaly属性,可以使客户端操作更加流畅。
列表渲染
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
基本用法
< li v-for = "item in items" >
{{item}}
</ li >
|
var app=new Vue({
el:'#app',
data:{
items:['angular','react','vue',jquery]
}
})
|
对象循环输出
< li v-for = "item in items" >
{{item.name}}--{{item.age}}
</ li >
|
var app=new Vue({
el:'#app',
data:{
items:[
{name:"mumu", age:18},
{name:"zql", age:22},
{name:"曾庆林", age:28},
]
}
})
|
索引
< li v-for = "(item, index) in items" >
{{item.name}}-{{index}}-{{item.age}}
</ li >
|
结果是
< li >mumu-0-18</ li >
< li >zql-0-22</ li >
< li >曾庆林-0-28</ li >
|
key
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
< li v-for = "(item,index) in items" :key = "index" >
{{item}}
</ li >
|
var app=new Vue({
el:'#app',
data:{
items:['mumu','曾庆林','木木','mumu']
}
})
|
如果不绑定tip 重复的'mumu' 再列表循环在列表循环会报错
监听事件
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
< div id = "app" >
< button v-on:click = "counter += 1" >加 1</ button >
< p >按钮被点击了 {{ counter }}次.</ p >
</ div >
|
var example1 = new Vue({
el: '#ap',
data: {
counter: 0
}
})
|
事件处理方法
< div id = "app" >
< button v-on:click = "greet" >问候</ button >
</ div >
< script >
var app = new Vue({
el:'#app',
data:{
name:'Vue.js'
},
methods:{
greet:function(event){
// 'this' 在方法里指向当前 Vue 实例
alert('你好'+this.name+'!');
// 'even' 是元生 DOM事件
if(event){
alert(event.target.tagName)
}
}
}
})
// 也可以用JavaScript 直接调用
app.greet();
</ script >
|
事件绑定简写方式
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
< a v-on:click.stop = "doThis" ></ a >
< form v-on:submit.prevent = "onSubmit" ></ form >
< a v-on:click.stop.prevent = "doThat" ></ a >
< a v-on:click.once = "doThis" ></ a >
|
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
< input v-on:keyup.enter = "submit" >
< input v-on:keyup.page-down = "onPageDown" >
|
按键码
使用 keyCode 特性也是允许的:
< input v-on:keyup.13 = "submit" >
|
Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete
(捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
表单输入绑定
v-model
你可以用 v-model 指令在表单 >input<、>textarea< 及 >select< 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
复选框
多个复选框
< div id = "app" >
< input type = "checkbox" id = "name1" value = "木木" v-model = "checkedNames" >
< label for = "name1" >木木</ label >
< input type = "checkbox" id = "name2" value = "曾庆林" v-model = "checkedNames" >
< label for = "name2" >曾庆林</ label >
< input type = "checkbox" id = "name3" value = "mumu" v-model = "checkedNames" >
< label for = "name3" >mumu</ label >
< br >
< span >选择的名字是: {{ checkedNames }}</ span >
</ div >
< script >
var app = new Vue({
data:{checkedNames:[]},
})
</ script >
|
修饰符
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:
< input v-model.lazy = "msg" >
|
.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
< input v-model.number = "age" type = "number" >
|
.trim 如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
< input v-model.trim = "msg" >
|
计算属性
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
< div id = "example" >
{{ msg.split('').reverse().join('') }}
</ div >
|
,这里是想要显示变量 msg 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。
当你需要从现有数组得到新的数据这个时候你就需要计算了computed
< div id = "example" >
< p >原来的信息: "{{ msg }}"</ p >
< p >计算翻转的信息: "{{ rmsg }}"</ p >
</ div >
|
var vm = new Vue({
el: '#example',
data: {
msg: 'Hello'
},
computed: {
// 计算属性的 getter
rmsg: function () {
// `this` 指向 vm 实例
return this.msg.split('').reverse().join('')
}
}
})
|
结果:
原来的信息: "hello}"
计算翻转的信息: "olleh"
侦听器
Vue 通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
< div id = "app" >
< p >计数器: {{ num }}</ p >
< button @ click = "num++" >点我</ button >
</ div >
< script >
var vm = new Vue({
el: '#app',
data: {
num: 1
},
watch:{
'num': function(nval, oval) {
console.log('num变化 :' + oval + ' 变为 ' + nval + '!');
},
}
});
</ script >
|
每次点击按钮都会输出:
num变化 :1变为2!
num变化 :2变为3!
...
对象变化监听
我们需要监听对象的属性值是否发生改变用
< div id = "app" >
< p >计数器: {{ num }}</ p >
< button @ click = "num.age++" >点我</ button >
</ div >
< script >
var vm = new Vue({
el: '#app',
data: {
num: {age:1}
},
watch:{
'num':{
handler:function(nval, oval) {
console.log('num变化 :' + oval.age + ' 变为 ' + nval.age + '!')
},
deep:true
}
}
});
</ script >
|
自定义指令
除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点
< div id = "app" >
< p >页面载入时,input 元素自动获取焦点:</ p >
< input v-focus = "" >
</ div >
< script >
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</ script >
|
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
指令的值数据-简写
在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子
< div id = "app" >
< p >页面载入时,input 元素自动获取焦点:</ p >
< input v-focus = "true" >
</ div >
< script >
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: function (el,data) {
// 聚焦元素
//如果指令的值是true则获取焦点
if(data.value==true){
el.focus()
}
}
}
})
</ script >
|
类的绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
我们可以传给 v-bind:class 一个对象,以动态地切换 class:
< div v-bind:class = "{ active: isActive }" ></ div >
|
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 真假
你可以在对象中传入更多属性来动态切换多个 class
< div class = "static" v-bind:class = "{ active: isActive, 'text-danger': hasError }" ></ div >
|
data 如下
data: {
isActive: true,
hasError: false
}
|
渲染结果为
< div class = "static active" ></ div >
|
绑定的数据对象不必内联定义在模板里:
< div v-bind:class = "classObject" ></ div >
|
数据如下
data: {
classObject: {
active: true,
'text-danger': false
}
}
|
classObject对象可以通过计算动态获得
数组语法
我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:
< div v-bind:class = "[activeClass, errorClass]" ></ div >
|
data: {
activeClass: 'active' ,
errorClass: 'text-danger'
}
|
渲染为
< div class = "active text-danger" ></ div >
|
绑定内联样式-对象语法
对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名
< div v-bind:style = "{ color: activeColor, fontSize: '24px' }" ></ div >
|
data: {
activeColor: 'red' ,
}
|
渲染结果
< div style = "color:red, font-size: 24px" ></ div >
|
直接绑定到一个样式对象通常更好,这会让模板更清晰:
data: {
styleObject: {
color: 'red' ,
fontSize: '13px'
}
}
|
对象语法常常结合返回对象的计算属性使用。
vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。
动画
Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。
语法
<transition name= "过渡名称" >
<div></div>
</transition>
|
简单列子
< div id = "demo" >
< button v-on:click = "show = !show" >
Toggle
</ button >
< transition name = "fade" >
< p v-if = "show" >hello</ p >
</ transition >
</ div >
|
new Vue({
el: '#demo' ,
data: {
show: true
}
})
|
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
|
过渡的类名
-
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
-
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
-
v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除),在过渡/动画完成之后移除。
-
v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
-
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
-
v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除),在过渡/动画完成之后移除。
CSS 动画 html
< div id = "app" >
< button @ click = "flag=!flag" >切换</ button >
< div >
< transition name = "fade" >
< img src = "img/sun.jpg" height = "260" v-show = "flag" alt = "" >
</ transition >
</ div >
</ div >
|
js
new Vue({
el: "#app" ,
data:{flag: true },
methods:{},
})
|
css
@keyframes fadeIn{
0%{ opacity: 0; transform:scale(0.7)}
90%{opacity: .8;transform:scale(1.2)}
100%{opacity: 1;transform:scale(1)}
}
@keyframes fadeOut{
from{ opacity: 1; transform:scale(1)}
to{opacity: 0;transform:scale(0.7)}
}
.fade-enter-active{
animation: fadeIn .7s ease;
}
.fade-leave-active{
animation: fadeOut .2s ease;
}
|
自定义过渡的类名
他们的优先级高于普通的类名,这对于 Vue 的过渡系统和其他第三方 CSS 动画库,如 Animate.css 结合使用十分有用。
html
< div id = "app" >
< button @ click = "flag=!flag" >切换</ button >
< div >
< transition enter-active-class = "animated rotateIn" leave-active-class = "animated bounceOutDown" >
< img src = "img/sun.jpg" height = "260" v-show = "flag" alt = "" >
</ transition >
</ div >
</ div >
|
js
new Vue({
el: "#app" ,
data:{flag: true },
})
|
导入其他css类库
< link rel = "stylesheet" href = "css/animate.min.css" >
|
动画模式
同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式
< div id = "app" >
< transition name = "fade" mode = "out-in" >
< button v-if = "!flag" @ click = "flag=!flag" :key = "'off'" >off</ button >
< button v-if = "flag" @ click = "flag=!flag" :key = "'on'" >on</ button >
</ transition >
</ div >
|
new Vue({
el: "#app" ,
data:{flag: true }
})
|
@keyframes fadeIn{
0%{ opacity: 0;}
100%{opacity: 1;}
}
@keyframes fadeOut{
from{ opacity: 1;}
to{opacity: 0;}
}
.fade-enter-active{
animation: fadeIn .7s ease;
}
.fade-leave-active{
animation: fadeOut .2s ease;
}
|
当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们
动画组
怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 组件
- 不同于
<transition>
,它会以一个真实元素呈现:默认为一个 <span>
。你也可以通过 tag
特性更换为其他元素。
- 过渡模式不可用,因为我们不再相互切换特有的元素。
- 内部元素 总是需要 提供唯一的
key
属性值。
< transition-group name = "slide" tag = "ul" >
< li class = "item p15" v-for = "(item,index) in listing" :key = "item" >
</ li ></ transition-group >
|
/* 定义进 的关键帧动画*/
@keyframes slideIn{
from{ opacity: 0; transform: translateY(-80px);}
to{opacity: 1; transform: translateY(0px);}
}
/* 定义出 的关键帧动画*/
@keyframes slideOut{
from{ opacity: 1; transform: translateX(0);}
to{opacity: 0; transform: translateX(-100%);}
}
/*enter-active 进入时候添加class名称*/
.slide-enter-active{
animation: slideIn .5s ease;
}
/*离开的时候添加的class 名称*/
.slide-leave-active{
animation: slideOut .3s ease;
position: absolute;
}
/*正在移动元素 添加的class名称(vue 内置添加的)*/
.slide-move{
transition: all .3s ease;
}
|
v-move 特性,它会在元素的改变定位的过程中应用
v-move 对于设置过渡的切换时机和过渡曲线非常有用
Vue.js 组件
组件(Component)是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
全局组件
Vue.component( 'my-component' , {
template: '<div>一个自定义组件</div>'
})
|
// 模板
< div id = "app" >
< my-component ></ my-component >
</ div >
|
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
局部注册
局部注册
var Child = {
template: '< div >一个自定义组件</ div >'
}
new Vue({
// ...
components: {
// < my-child ></ my-child > 将只在父组件模板中可用
'my-child': Child
}
})
|
data 必须是一个函数 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
var counter = {
template:`< button @ click = "num++" >{{num}}</ button >`,
data:function(){return {num:1}}
}
new Vue({
el:"#app",
components:{
counter,
}
})
|
组件调用
< div id = "app" >
< counter ></ counter >
< counter ></ counter >
< counter ></ counter >
</ div >
|
组件传参
当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。
< child message = "hello!" ></ child >
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
template: '< span >{{ message }}</ span >'
})
|
动态 Prop
你也知道 prop 可以通过 v-bind 动态赋值
< div >
< input v-model = "parentMsg" >
< br >
< child :my-message = "parentMsg" ></ child >
</ div >
|
如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind
todo: {
text: '学习Vue',
isComplete: false
}
< todo-item v-bind = "todo" ></ todo-item >
=
< todo-item v-bind:text = "todo.text" v-bind:is-complete = "todo.isComplete" ></ todo-item >
|
单向绑定
Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会 另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop
在两种情况下,我们很容易忍不住想去修改 prop 中数据:
- Prop 作为初始值传入后,子组件想把它当作局部数据来用;
- Prop 作为原始数据传入,由子组件处理成其它数据输出。
1. 定义一个局部变量,并用 prop 的值初始化它:
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
|
2. 定义一个计算属性,处理 prop 的值并返回:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
|
验证
们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告。这对于开发给他人使用的组件非常有用。
Vue.component('example', {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
|
type 可以是下列原生构造函数中的一个:
String
Number
Boolean
Array
Object
Date
Function
Symbol
子组件怎么跟父组件通信
我们知道,父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。
每个 Vue 实例都实现了事件接口,即:
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
< div id = "app" >
< p >{{ total }}</ p >
< counter v-on:add = "addTotal" ></ counter >
< counter v-on:add = "iaddTotal" ></ counter >
</ div >
|
Vue.component( 'counter' , {
template: '<button v-on:click="addCounter">{{ counter }}</button>' ,
data: function () {
return {
counter: 0
}
},
methods: {
addCounter: function () {
this .counter += 1
this .$emit( 'add' )
}
},
})
new Vue({
el: '#counter-event-example' ,
data: {
total: 0
},
methods: {
addTotal: function () {
this .total += 1
}
}
})
|
slot 插槽
在使用组件时,我们常常要像这样组合它们:
< app >
< app-header ></ app-header >
< app-footer ></ app-footer >
</ app >
|
单个插槽
假定 my-component 组件有如下模板:
< div >
< h2 >我是子组件的标题</ h2 >
< slot >
只有在没有要分发的内容时才会显示。
</ slot >
</ div >
|
父组件模板
< div >
< h1 >我是父组件的标题</ h1 >
< my-component >
< p >这是一些初始内容</ p >
< p >这是更多的初始内容</ p >
</ my-component >
</ div >
|
结果
< div >
< h1 >我是父组件的标题</ h1 >
< div >
< h2 >我是子组件的标题</ h2 >
< p >这是一些初始内容</ p >
< p >这是更多的初始内容</ p >
</ div >
</ div >
|
具名插槽
有时我们需要多个插槽。例如,假定我们有一个 app-layout 组件:
< div class = "container" >
< header >
< slot name = "header" ></ slot >
</ header >
< main >
< slot ></ slot >
</ main >
< footer >
< slot name = "footer" ></ slot >
</ footer >
</ div >
|
slot 元素有一个特殊的特性:name。这个特性可以用来定义额外的插槽:
父组件模板
< app-layout >
< h1 slot = "header" >这里可能是一个页面标题</ h1 >
< p >主要内容的一个段落。</ p >
< p >另一个主要段落。</ p >
< p slot = "footer" >这里有一些联系信息</ p >
</ app-layout >
|
结果为:
< div class = "container" >
< header >
< h1 >这里可能是一个页面标题</ h1 >
</ header >
< main >
< p >主要内容的一个段落。</ p >
< p >另一个主要段落。</ p >
</ main >
< footer >
< p >这里有一些联系信息</ p >
</ footer >
</ div >
|
一个不带 name 的 出口会带有隐含的名字“default”。
cli
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统
- 通过
@vue/cli
搭建交互式的项目脚手架。
- 通过
@vue/cli
+ @vue/cli-service-global
快速开始零配置原型开发。
- 一个运行时依赖 (
@vue/cli-service
),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装
Vue CLI 需要 Node.js 8.9 或更高版本
可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
|
检查其版本是否正确
创建一个项目 vue create
创建一个新项目:
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
使用图形化界面 vue ui 命令以图形化界面创建和管理项目
上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。
npm
NPM是随同NodeJS一起安装的包管理工具
查看版本
安装命令
//全局安装
npm install 模块名 -g
//本地安装
npm install 模块名
//一次性安装多个
npm install 模块1 模块2 模块3
//安装开发时依赖包
npm install 模块名 --save-dev
//安装运行时依赖包
npm install 模块名 --save
|
查看安装的目录
查看npm的所有命令
更新node模块
npm update 模块名
npm update 模块名 @版本号
npm install 模块名@latest
|
卸载 模块
查看当前已经安装的模块
npm list
npm list --depth=0
|
查看某个包的各种属性
npm view 模块名 dependencies
|
初始化项目
npm init:引导你创建一个package.json文件,包括名称、版本、作者这些信息
npm init:引导你创建一个package.json文件,包括名称、版本、作者这些信息
|
版本控制
默认情况下,当用--save或者--save-dev安装一个模块时,npm通过脱字符(^)来限定所安装模块的主版本号,而该脱字符对于不同的版本号有不同的更新机制
- ^1.2.1 代表的更新版本范围为 >=1.2.1 && < 2.0.0
- ^0.2.1 代表的更新版本范围为 >=0.2.1 && < 0.3.0
- ^0.0.2 代表的更新版本范围为 0.0.2(相当于锁定为了0.0.2版本)
yarn
快速、可靠、安全的依赖管理工具。
Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样,它的目的是解决这些团队使用 npm 面临的少数问题
1.安装的时候无法保证速度/一致性
2.安全问题,因为 npm 安装时允许运行代码
|
安装
查看版本
yarn –version
初始化
会在根目录下生成一个package.json,与npm类似具体不做解释,如下
添加
yarn add [pkg-name] ,会自动安装最新版本,会覆盖指定版本号
# yarn add jquery
一次性添加多个包:yarn add [pkg-name1] [pkg-name2]
# yarn add bootstrap zepto
添加指定版本的包:yarn add [pkg-name]@ver
|
更新
将包更新到指定版本: yarn upgrade [pkg-name]@ver
将包更新到最新版本:yarn upgrade –latest [pkg-name]
举例将3.0.0版本的 jquery更新到最新版本:yarn upgrade –latest jquery
|
删除包
yarn remove [pkg-name]
举例删除 jquery:yarn remove jquery
|
一次删除多个包:yarn remove [pkg-name1] [pkg-name2]
举例删除 bootstrap 和 zepto:yarn remove bootstrap zepto
|
yarn.lock 自动锁定安装包版本
在安装过程中,会自动生成一个 yarn.lock 文件,yarn.lock 会记录你安装的所有大大小小的。有点类似 PHP 开发者们所熟悉的 composer.lock。yarn.lock 锁定了安装包的精确版本以及所有依赖项,只要你不删除 yarn.lock 文件,再次运行 yarn install 时,会根据其中记录的版本号获取所有依赖包。有了这个文件,你可以确定项目团队的每个成员都安装了精确的软件包版本,部署可以轻松地重现,且没有意外的 bug。你可以把 yarn.lock 提交到本库里,这样其他签出代码并运行 yarn install 时,可以保证大家安装的依赖都是完全一致的。
npm vs yarn windows下CMD常用命令
作为一个开发者,我们用的最多的就是windows,但是对于cmd,我不知道大家熟不熟,反正我是一直不怎么熟悉。平时操作linux比较多,反而忽视了cmd相关命令,这里大致总结一些常用的命令
一、常用命令 1、进入某个盘
切换目录
查看目录文件
如果是需要查看隐藏文件的或者更多操作的话,可以使用dir /?来查看其它用法,cmd这点挺好的。
3、创建目录和删除目录
查看本机ip
清除屏幕 类似于linux下的clear
复制文件
移动文件
删除文件
ping
帮助