Vue.js2.0基础学习笔记

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

初始化项目: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

2、申明式渲染

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

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

result: hello world

3、Vue实例

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 ”改变后调用
})

4、Vue的生命周期构子

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

5、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'}
             ]
         }
     })

6、计算属性与侦听器

 计算属性用于简单计算,由于在数据绑定中写表达式难以维护,也无法进行条件判断等动作,可以使用计算属性来实现,计算属性会根据其依赖的值自动更新并缓存
     <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):当需要在数据变化时执行异步或开销较大的操作时使用

7、列表渲染(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 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升

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

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'
})

9、事件处理

<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' 时被调用

10、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">    //自动过滤用户输入的首尾空白字
 

11、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>
    原文作者:蔡万胜
    原文地址: https://segmentfault.com/a/1190000016327775
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞