vue初体验(个人学习笔记)

什么是vue?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue的基本指令

v-text

更新元素的文本内容，不解析；

<div v-text = "msg" id = "box"></div>
...
new Vue(){
	el : "#box",
	data : {
		msg : "<font color = red> hello </font>",
	}
}

输出结果为：

v-html

更新元素的文本内容，会解析；

<div v-html = "msg" id = "box"></div>
...
new Vue(){
	el : "#box",
	data : {
		msg : "<font color = red> hello </font>",
	}
}

输出结果为：

v-show

切换元素的显示隐藏效果

<div v-show="false">show隐藏</div>
//隐藏  ==  display : none
<div v-show="false">show显示</div>
//显示 == display : block

v-if

根据表达式的值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建,当条件变化时该指令触发过渡效果。

<div v-if="false">if隐藏</div>
//删除这个元素节点
<div v-if="true">if显示</div>
//创建这个元素节点

注： v-if 和 v-show 的区别
1:v-if 是通过删除dom节点和创建dom节点来实现显示隐藏的效果，如果是频繁的显示隐藏，那么建议使用v-show ,减少对内存的损耗！
2:v-show 是通过改变css样式来实现，只操作dom部分，因此对内存不会有影响

v-else

为 v-if 或者 v-else-if 添加“else 块”。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

注：前一兄弟元素必须有 v-if 或 v-else-if。

v-else-if

表示 v-if 的“else if 块”。可以链式调用。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

注：前一兄弟元素必须有 v-if 或 v-else-if。

v-for

用来遍历元素
1：遍历数组
普通数组

<div v-for = "(item,index) in arr">
 	{{item}} {{index]}
 </div>
 ...
 arr : [1,2,3,5,66]

对象数组

<div v-for = "(item,index) in arr">
 	{{item.name}} {{index]}
 </div>
 ...
 arr : [
	{
	name : "张三"，
	age : 18
	}，
	{
	name : "李四"，
	age : 16
	}
]

2.遍历对象

<div v-for = "(item,index) in obj">
 	{{item}} {{index]}
 </div>
 ...
obj: {
	name : "张三“，
}

3.遍历整数

<div v-for = "n in 10">
 	{{n}}
 </div>

v-on

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event property：v-on:click=“handle(‘ok’, $event)”。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器)：

<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-bind

v-bind 指令被用来响应地更新 HTML 属性，主要是绑定属性。
v-bind:href 可以缩写为 :href;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

绑定对象

• 我们可以给v-bind:class 一个对象，以动态地切换class。
• 注意：v-bind:class指令可以与普通的class特性共存
  v-bind 中支持绑定一个对象 ，如果绑定的是一个对象则键为对应的类名，值为对应data中的数据 、

<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>
<!-- 
	HTML最终渲染为 <ul class="box textColor textSize"></ul>
	注意：
		textColor，textSize  对应的渲染到页面上的CSS类名	
		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
		当 isColor 和 isSize 变化时，class列表将相应的更新，
		例如，将isSize改成false，
		class列表将变为 <ul class="box textColor"></ul>
-->
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

<script>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true,
    }
})
</script>

绑定class

v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据。

<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

绑定对象和绑定数组的区别

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
• 绑定数组的时候数组里面存的是data 中的数据

绑定style

有些时候我们需要绑定内置样式，这个时候我们可以使用v-bind:style绑定属性。

<div v-bind:style="styleObject">绑定样式对象</div>'
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
 
<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>

<script>
	new Vue({
      el: '#app',
      data: {
        styleObject: {
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
   		fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>

v-model

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

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

修饰符：

.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

v-pre

跳过编译过程，显示最原始的标签信息
一些静态的内容不需要编译加这个指令可以加快渲染

<span >{{msg}}</span>    
	<!--  显示的是 Hello Vue.js  -->
<span v-pre>{{msg}}</span>  
  <!--   显示的是{{msg}} -->
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue.js'
        }
    });

</script>

v-cloak

用来防止界面加载时出现闪烁问题
闪烁问题： 页面加载时先加载Html语法的标签内容 即 {{msg}}, 等到加载完js时，才会将data中msg的内容显示到页面中，这个加载过程会在网络请求缓慢的时候出现，为了取消这个闪烁问题，我们用v-cloak 和 display : none 配合使用来实现这个问题：

<html>
	 <style type="text/css">
  [v-cloak]{
    /* 元素隐藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
	</script>
</body>
</html>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        }
    });
</script>

当再次修改msg 值时，在span中显示的内容依然是第一次渲染的内容