Vue的基础知识点

其他 2019-10-25 18:01:32 阅读次数: 0
 

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 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

  • .stop
  • .prevent
  • .once
<!-- 阻止单击事件继续传播 -->
<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 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<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< 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

信息是: {{msg }}

复选框

 

多个复选框

<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>
<!-- 结果 -->
<!-- 选择的名字是:["木木","曾庆林"，"mumu"] -->
修饰符

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<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;
}

过渡的类名

  1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

  2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

  5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

  6. 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 提供了 过渡模式

  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。

  • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<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>'
})
// 创建根实例
new Vue({
  el: '#app'
})
// 模板
<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 中数据：

  1. Prop 作为初始值传入后，子组件想把它当作局部数据来用；
  2. 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 --version
创建一个项目 vue create

创建一个新项目：

vue create hello-world

你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

使用图形化界面 vue ui 命令以图形化界面创建和管理项目
vue ui

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

npm

NPM是随同NodeJS一起安装的包管理工具

查看版本
npm -v
安装命令
//全局安装
npm install 模块名 -g
//本地安装
npm install 模块名
//一次性安装多个
npm install 模块1 模块2 模块3
//安装开发时依赖包
npm install 模块名 --save-dev
//安装运行时依赖包
npm install 模块名 --save
查看安装的目录
//查看项目中模块所在的目录
npm root
//查看全局安装的模块所在目录
npm root -g
查看npm的所有命令
npm help
更新node模块
npm update 模块名
 //当然你也可以update 该模块到指定版本
 npm update 模块名 @版本号
 //如果安装到最新版本可以使用以下命令
 npm install 模块名@latest
  
 //如果当前的版本号为2.5.1，是没办法进行npm update 模块名 @2.3.1 将模块版本号变为2.3.1的，当然，你可以先uninstall，然后进行install @2.3.1
卸载 模块
npm uninstall 模块名
查看当前已经安装的模块
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 安装时允许运行代码
安装
npm install -g yarn
查看版本 
 
yarn –version
初始化
yarn init

会在根目录下生成一个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 add [email protected]
更新
将包更新到指定版本： yarn upgrade [pkg-name]@ver
# jquery从2.1.4更新到3.0.0版本：yarn upgrade [email protected]
 
将包更新到最新版本：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、进入某个盘
//进入d盘
D:
//进入F盘
F:
切换目录
cd 目录名称
查看目录文件
//查看当前目录下的文件，类似于linux下的ls
dir

如果是需要查看隐藏文件的或者更多操作的话，可以使用dir /?来查看其它用法，cmd这点挺好的。

3、创建目录和删除目录
//创建目录
md 目录名（文件夹）
//删除目录
rd  目录名（文件夹）
查看本机ip
ipconfig
清除屏幕 类似于linux下的clear
cls
复制文件
copy 路径\文件名 路径\文件名
// 把一个文件拷贝到另一个地方。
移动文件
move 路径\文件名 路径\文件名
// 把一个文件移动（就是剪切+复制）到另一个地方
删除文件
//这个是专门删除文件的，不能删除文件夹
del 文件名
ping
//用来测试网络是否畅通
ping ip(主机名)
帮助
help

 

猜你喜欢

转载自www.cnblogs.com/xiegongliang/p/11739323.html
今日推荐
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
周排行
计算机组成与设计（七）—— 除法器
Integer Approximation(分治+枚举)
大话数据库索引
windows10系统JDK的配置及下载地址
mysql实现秒值转换中原六仔平台搭建
Codeforces Round #556 (Div. 1)
百练1064 网线主管
Codeforces 995F Cowmpany Cowmpensation
子集生成之增量构造法，位向量法，二进制法
ERROR: cmd.exe failed with args /c "/APK\gradle\rungradle.bat...
每日归档
更多
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022