Vue.js基础知识

什么是Vue.js？

• Vue.js是目前最火的前端主流框架之一，和Angular、React一起，并成为前端三大框架。
• Vue.js是一套构建用户界面的框架，只关注视图层。

框架和库的区别

• 框架：是一套完整的解决方案；对项目的侵入性较大，项目需要更换框架，则需要重新构建整个项目。
• 库/插件：提供一个小功能，对项目侵入性较小，可以随时切换的小部分模块。

MVC和MVVM区别

• MVC是后台的分层开发概念；

• MVVM是前端视图层的概念，MVVM把前端的视图层分为三部分：Model、View、ViewModel

  
  
  MVVM.png

Vue实例中MVVM对应的内容

//Vue实例所控制的这个元素（app），就是View
<div id="app">  
  <span>{{ name }}</span>
</div>
<script>
//new出来的vm对象就是ViewModel
  var vm = new Vue({
    el:'#app',
    data: {  //data就是model，用来保存每个页面的数据
      name:RPP
    }
  })
</script>

v-cloak

用于解决插值表达式闪烁的问题

<style>
  [v-cloak] {
    display:nome;
  }
</style>
<div id="app">  
  <span v-cloak>{{ name }}</span>
</div>

v-text

• 用于渲染数据，同插值表达式一样，但是v-text默认没有闪烁问题
• v-text与插值表达式的不同点：

插值表达式可以渲染出来“我的名字是：”
<span>我的名字式{{ name }}</span>
v-text无法渲染“我的名字是”，而是加载完成后直接覆盖标签内的文本
<p v-text="name">我的名字是：</p>

v-html

可以输出html元素,v-text和插值表达式输出的是普通字符串

<div id="app">  
  <span>{{ title }}</span>
  <span v-text="title"></span>
  <span v-html="title"></span>
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data: { 
      title:'<h2>我是h2标签</h2>'
    }
  })
</script>

v-bind

Vue提供的用于绑定属性的指令，可以简写为 :要绑定的属性，v-bind中可以写合法的表达式

<div id="app">  
  <input type="button" value="按钮" v-bind:title="title">
  <input type="button" value="按钮" :title="title+'123' ">
  <input type="button" value="按钮" v-bind:title="title+'123' ">
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data: { 
     title:'这是一个按钮'
    }
  })
</script>

v-on

Vue中提供的事件绑定机制,可以简写为 @事件名
methids为存放方法的对象

<div id="app">  
  <button v-on:click="show">按钮</button>
  <button @click="show">按钮</button>
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data: { 
    }，
    methods:{
      show(){
        console.log('RPP')
      }
    }
  })
</script>

Vue实例中想要获取data上的数据，或者调用methods中的方法，必须通过 this.数据名/方法名 来进行访问，这里的this表示new出来的vm实例对象

<div id="app">  
  <button @click="show">按钮</button>
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data: { 
      name:'RPP'
    }，
    methods:{
      fn(){
        alert(this.name)
      }
      show(){
        this.fn
      }
    }
  })
</script>

事件修饰符(可串写)

• .stop 阻止冒泡(冒泡是从里到外，捕获是从外到里)

<div @click="divShow"> 
  <button @click.stop="show">按钮</button>
</div>  

• .prevent 阻止默认事件

  <a href="http://baidu.com" @click.prevent ="show">按钮</a>

• .capture 添加事件侦听器时使用事件捕获模式(冒泡是从里到外，捕获是从外到里)

<div @click="divShow"> 
  <button @click.stop="capture ">按钮</button>
</div> 

• .self 只当事件在元素本身（比如不是子元素）触发时回调

<div @click.self ="divShow"> 
  <button @click.stop="capture ">按钮</button>
</div> 

• .once 事件只触发一次

<button @click.once ="show">按钮</button>

v-model和双向数据绑定

使用v-model 指令，可以实现表单元素和Model 中数据的双向数据绑定

<div id="app">  
  <h2>{{ name }}</h2>
  <input type="text" v-model="name">
</div>
<script>
  var vm = new Vue({
    el:'#app',
    data: { 
      name:'RPP'
    }
  })
</script>

Vue中样式的设置

• 使用Class类

1、数组

<h1 :class=" [ 'active' , 'red' ] ">我的名字叫H1</h1>

2、数组中使用三元表达式

<h1 :class=" [ 'active' , flag?'red':' ' ] ">我的名字叫H1</h1>

data:{
  flag:true
}

3、数组中使用对象

<h1 :class=" [ 'active' , {'red':flag ] ">我的名字叫H1</h1>

data:{
  flag:true
}

4、直接使用对象

<h1 :class="{ active : true , red : false}">我的名字叫H1</h1>

• 使用内联样式

1、直接绑定

<h1 :style="{ color: '#666', 'font-size' : '18px'}">我的名字叫H1</h1>

2、在data上定义样式

<h1 :style="active">我的名字叫H1</h1>

data:{
  active:{ color: '#666', 'font-size' : '18px'}
}

3、多个样式组合使用

<h1 :style="[ ' active ' , ' back ' ]">我的名字叫H1</h1>

data:{
  active:{ color: '#666', 'font-size' : '18px'},
  back:{ background : 'red'}
}

v-for

• 循环数组

<span v-for="(item,index) in list"> {{ item }} ---{{ index }} </span>

data:{
  list:[ ' 一 ' , ' 二 ' , ' 三 ' ,]
}

• 循环对象

<span v-for="(val,key,index) in list"> {{ val }} ---{{ key}} ---{{index}} </span>

data:{
  list: { id:1 , name:'bob1' },
}

• 循环带对象的数组

<span v-for="(item,index) in list"> {{ item.id }} ---{{ item.name}}---{{ index }} </span>

data:{
  list:[ 
    { id:1 , name:'bob1' },
    { id:2 , name:'bob2' },
    { id:3 , name:'bob3' },
  ]
}

• 迭代数字（使用v-for迭代数字时，前边的count值时从1开始而不时从0开始）

<span v-for="count in 10"> 这是第{{count}} 次循环</span>

v-for的key值

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
注意：只能为number或者string类型，并且需要v-bing绑定到元素上

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

v-if和v-show

• v-if特点：
  每次都回重新删除或者创建元素
  有较高的切换性能消耗
• v-show特点：
  每次不会重新进行DOM的删除和创建操作，知识切换了元素的 display:none/block样式
• 建议：
  如果涉及频繁的切换，最好不要使用v-if，而是使用v-show
  如果元素可能永远也不会显示或者隐藏出来，则推荐使用v-if

<span v-if="flag"> 标签 </span>
<span v-show="flag"> 标签 </span>

data:{
  flag:true
}