Vue.js2.0基础学习笔记

时间 2019-11-09

标签 vue.js2.0 vue 基础学习笔记栏目 JavaScript 繁體版

原文原文链接

一、使用脚手架Vue-cli构建vue项目html

初始化项目：vue create project  或 vue ui
进入项目根目录：cd project
在服务器中打开：npm run serve  或  yarn serve
打包项目：npm run build   或  yarn build
测试项目：npm run lint   或  yarn lint
安装插件或依赖：vue add element 或 yarn add element-ui 或 npm install element-ui --save

二、申明式渲染vue

<div id="app">
    {{msg}}
</div>

var app=new Vue({
    el:'#app',
    data:{
        msg:'Hello World!'
    }
})

result： hello world

三、Vue实例npm

var data={a:1}
var vm=new Vue({
    el:'example',
    data:data
})

vm.$data===data    //=>true
vm.$el===document.getElementById('example')    //=>true
vm.$watch('a',function(newValue,oldValue){
    //=>当 “ $vm.a ”改变后调用
})

四、Vue的生命周期构子element-ui

new Vue()实例化一个vue对象
初始化事件和生命周期
beforeCreate构子：组件建立以前，数据data和事件监测已初始化
经过依赖注入导入依赖项
created构子：组件实例以建立完成，此时Dom还未生成
检查是否配置挂载节点 el 项，若是没有则等待使用vm.$mount(el)绑定
是否存在：template 选项，存在则将其编译到渲染函数，不存在则以el的outHTML为编译模板
beforeMount构子：模板编译、挂载以前调用
编译，并替换了被绑定元素
mounted构子：组件编译、挂载节点
beforeupdate构子：当data数据发生改变时触发，此时即将更新渲染
updated构子：从新渲染成功
beforeDestroy:组件即将销毁
destroyed：组件已经销毁

五、Vue经常使用语法、指令数组

数据绑定语法：<span>{{msg}}</span>
 一次性数据绑定：<span v-once>{{msg}}</span>    //但数据改变时msg不更新
 数据绑定只能解释普通文本，解释html可用v-html：<span v-html="tem"></span>
 
 v-if指令：用于条件判断移除显示元素，v-if是真正的条件渲染，v-show是切换display
     <span v-if="ok">yes</span>
     <span v-else>No</span>
     <template v-if="true">
         <h1>能够使用template包裹住元素来判断，不会显示多余的template标签</h1>
     </template>
 
 v-bind指令：用于绑定HTML特性如  Class、src、href、style
 
      <a :href="url"></a> 
      <div class="a" :class="{active:isActive,'text-danger':hasErr}"></div>
      data:{
          isActive:true,
          hasErr:false
      }
      result:    <div class="a active"></div>
      

 v-on指令：用于监听Dom事件   <a @click=""></a>
 
 v-for指令用于循环：
 
     <div id="app">
         <ul>
             <li v-for="item in items">{{item.text}}</li>
         </ul>
     </div>
     var app=new Vue({
         el:'#app',
         data:{
             items:[
                 {text:'Javascript'},
                 {text:'Vue'}
             ]
         }
     })

六、计算属性与侦听器缓存

计算属性用于简单计算，因为在数据绑定中写表达式难以维护，也没法进行条件判断等动做,能够使用计算属性来实现，计算属性会根据其依赖的值自动更新并缓存
     <span>{{reversedMsg}}</span>
     new Vue({
         el:'app',
         data:{
             Msg:'Hello'
         },
         computed:{
             reversedMsg:function(){
                 return this.Msg.split('').reverse.join('')
             }
         },
         watch:{
             Msg:function(newMsg,oldMsg){
                 newMsg=oldMsg+1
             }
         }
     })
     
     result: gsMdesrevrr
     
侦听器watch侦听数据变化（Msg）：当须要在数据变化时执行异步或开销较大的操做时使用

七、列表渲染(v-for的优先级比v-if高)服务器

<ul>
    <template v-for="(item,index) in items" :key="item.index" v-if(item.age>20)>
       <li> {{aaa}}-{{index}}-{{item.messge}}</li>
       <li class="more">底部加载数据</li>
    </template>
</ul>
data:{
    aaa:333,
    items:[
        {messge:111,age:444},
        {messge:222}
    ]
}
建议尽量在使用 v-for 时提供 key，除非遍历输出的 DOM 内容很是简单，或者是刻意依赖默认行为以获取性能上的提高

八、使用Vue.set()响应式控制数据babel

var vm =new Vue({
    data:{
        user:{
            name:'Cai'
        }
    }
})

添加一个新的 age 属性到嵌套的 userProfile 对象
vm.set(vm.user,'age',22)
有时你可能须要为已有对象赋予多个新属性，好比使用 Object.assign()
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

九、事件处理app

<button @click="wran('传入消息',$event)"></button>
methods：{
    warn:function(message,event){
        if(event){
            // 如今咱们能够访问原生事件对象
        }
    }
}

<a @click.stop='doThis'></a>    //阻止单击事件继续传播

<form @submit.prevent=''></form>    //提交事件再也不重载页面

<div @click.capture=''></div>    // 添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理，而后才交由内部元素进行处理
<div @click.self="">...</div>    //只当在 event.target 是当前元素自身时触发处理函数
<div @click.once=""></div>    //只触发一次点击

<div v-on:scroll.passive="onScroll">...</div>    //滚动事件的默认行为 (即滚动行为) 将会当即触发，而不会等待 `onScroll` 完成，可提高性能

键盘事件：
<input @keyup.enter="submit" />    //按 enter键触发
<input @keyup.page-down="onPageDown">    //处理函数仅在 $event.key === 'PageDown' 时被调用

十、Vue表单处理异步

v-model双向数据绑定

    <input v-model="message">    //输入框
    <p style="white-space: pre-line;">{{message}}</p>
    <textarea v-model="message"></textarea>    //多行输入框
    
    ==>复选框
    <div id="example">
        <input type="checkbox" id="red" value="red" v-model="selectColor" >
        <label for="red">红色</babel>
        <input type="checkbox" id="green" value="green" v-model="selectColor" >
        <label for="green">绿色</babel>
        <input type="checkbox" id="blue" value="blue" v-model="selectColor" >
        <label for="blue">蓝色</babel>
        <span>{{selectColor}}</span>
    </div>
    new Vue({
        el:'example',
        data:{
            selectColor:[]    //选中项会添加至数组selectColor中
        }
    })
    
    ==>单选按钮
    <input type="radio" v-model="select" value="男">
    <input type="radio" v-model="select" value="女">
    <span>{{select}}</span>
    data:{
        select:''
    }
    
    ==>下拉选择框
    <select v-model="such">    //加 multiple 多选，获得数组
        <template v-for="option in options">
            <option disabled>请选择</option>
            <option :value='option.value'>{{option.text}}</option>
        </template>
    </select>
    <span>{{such}}</span>
    data:{
        such:'A',
        options:[
            {text:'one',value:'A'},
            {text:'two',value:'B'}
        ]
    }
    <input type="checkbox" v-model="toggle">    //当选中时vm.toggle===true
    <input type="radio" v-model="pick" :value="a">    //选中时vm.pick===vm.a
    <input v-model.lazy="msg" >   //在change时更新而非input
    <input v-model.number="age" type="number">    //将用户的输入值转为数值类型
    <input v-model.trim="msg">    //自动过滤用户输入的首尾空白字

十一、Vue组件基础

定义一个组件（组件与 new Vue 接收相同的选项，除el外）

Vue.component('my-component',{
   data:function(){        //一个组件的 data 选项必须是一个函数
       return{
           count:0
       }
   },
   template:'<button @click='count++'>{{count}}</button>'
})
使用组件：<my-component></my-component>

父组件经过Prop向子组件传递数据

Vue.component('child',{
   props:['title'],
   template:'<h3>{{title}}</h3>'
})
在父组件中使用：<child title='我是标题'></child>

给子组件传递的数据来自父组件的data

Vue.component('child',{
   props:['title'],
   template:'<h3>{{title}}</h3>'
})

new Vue({
    el:'#app',
    data:{
        posts:[
            {id:1,title:'title1'},
            {id:2,title:'title2'}
        ]
    }
})
<child v-for='post in posts' :key='post.id' :title='post.title'></child>    //循环动态渲染两个child组件

当须要传递的props太多时，能够在父组件传递一个数组或对象,而后在子组件接收
Vue.component('child',{

props:['post'],
   template:`
       <div>
           <h2>{{post.title}}</h2>
           <div>{{post.content}}</div>
       </div>
   `
   })
   <child v-for='post in posts' :key='post.id' :post='post'></child>

子组件经过事件向父组件发送消息

Vue.component('child',{
       template:`<button @click='$emit('setFont',0.1)'></button>`
   })
   
   new Vue({
       el:'#app',
       data:{
           postFontSize:1
       },
       template:`
           <div style='{fontSize:postFontSize+'em'}'>
               <p>点击按钮放大文字</p>
               <child @setFont='postFontSize+=$event'></child>
           </div>
       `
   })

若是自定义组件须要使用 v-model 实现双向数据绑定

Vue.component('my-input',{
       props:['value'],
       template:`
           <input :value='value' :input='$emit('input',$event.target.value)'>
       `
   })
   <my-input v-model='searchText'></my-input>

<slot>插槽

<alert-box>
         //若是想在这里面写东西,在组件内用插槽
   </alert-box>
   Vue.component('alert-box',{
       template:`
           <div class='demo'>
               <slot></slot>
           </div>
       `
   })

动态组件与 is 特性

<ul>、<ol>、<table> 和 <select>等元素对内部元素有严格的要求如：li/tr/option,若是想在这些元素中嵌入使用自定义组件，能够使用 is 特性：
   <ul>
       <li is='my-component'></li>
   </ul>
   
   使用 is 实现动态组件
   <component :is='creunt'></component>