Vue基础

Vue概述：

vue是一套用于构建用户界面的渐进式框架。简单，高效，生态丰富（插件多）。

扩展：前端的三大框架分别是React、Vue、Angular。

作者：尤雨溪

Vue简单用法：

创建：

html内容

    <div id="box">
        <h1>{{msg}}</h1>
    </div>

js内容

<script src="./js/vue.js"></script>
//在实例化vue前必须要把vue的js或链接引入
new Vue({
    el:"#box",//指定vue选择的范围（css选择器）
    data:{
         msg:"vue指定data的数据"，
//
    }
})

注意：在创建实例化对象的时候要把符号规范，逗号不能省略。

使用：

文本渲染

v-text【指令是带有v-前缀的特殊符号，只会把内容放在该放的里面（若内容有div则以文本呈现）】

v-html【为了输出真正的HTML，可以把输进去的div等也加到内容里边】

{{表达式}}【所有数据绑定vue提供了完全的JavaScript表达式支持。】

属性渲染

v-bind：

给HTML标签动态绑定属性，v-bind指令可以用于响应式的更新HTML数据。

简写为

<div v-bind:color="#ccc">我是没有简化的v-bind</div>

 <div :color="#ccc">我是简化的v-bind</div>

 条件渲染

v-if【指令用于条件的渲染一块内容。这块内容只会在指令的表达式返回，true的时候才会渲染。】 

v-else-if【多重条件渲染】

v-show【根据条件展示元素 】

v-show和v-if的区别：

v-show是css方法隐藏（display），v-if移除dom节点方式隐藏（直接把这句话注释掉），如果频繁切换用v-show，如果不是频繁切换则用v-if。

列表渲染

 v-for【用这个v-for遍历，v-for指令根据数组的选项列表进行渲染。】

<li v-for="(item,index) in list">//list是需要遍历的对象

      {{item}}

</li>

data(){

      return{

       list:["对象1"，"对象2"，"对象3"]

      }
}

//index为索引

注：如果要添加index，需要用括号并且用逗号把item和index隔开。 

注：为了给Vue一个提示，能追踪每个节点的身份，重用重新排序现有元素，需要为每一项提供一个唯一的key。【一般不建议使用index作为key的值】

 监听事件

v-on【监听DOM事件】 

<button v-on:click="事件1"></button>

<button @click="事件1"></button>//简写为@click="事件1"

注：事件1可以是调用函数的名称，也可以是直接写需要干什么什么事情。

事件修饰符

.stop               阻止事件冒泡

.prevent          阻止默认事件 

.capture          捕获

.self                 自身元素触发

.once               执行一次

.passive          滚动立即触发，不等待滚动完成（移动端性能提升）

 按键修饰符

.enter           回车

.tab              制表

.delete         “删除”和“退格”键

.esc              取消

.space          空格

.up               上

.down          下

.left              左

.right            右

系统修饰符

 

按下相应按键时才触发鼠标或键盘事件的监听器。.enter  回车

ctrl

.alt

.shift

.meta 【Windows 徽标键 】

.exact    精确

鼠标按键修饰符

.left

.right

.middle

注：修饰符会限制处理函数仅响应特定的鼠标按钮。 

表单绑定 

v-model【绑定input上可以让v-model="msg"  msg与input内容值同步】 

表单修饰符

 .lazy                可以添加lazy修饰符，从而转为在change事件之后进行同步【一般为失焦才同步】

.number            输入值在同步过程中转为数字类型

.trim                  输入值在同步过程中过滤首尾空白

计算computed 

 对于包含响应式数据的复杂逻辑，应使用Vue里的计算属性【从现有数据计算出新的数据】

 

new Vue({
    computed: {		 
        msg: function() {						 
            return this.msg.split('').reverse().join('')//实现字符串反转
        }
    }
})
<div>{{msg}}</div>

注：计算computed中相应函数返回值为msg的值

监听watch

watch:{
    person:{
        handler(state){
            console.log(state);
            localStorage.setItem("age",this.person.age);//通过person内部改变触发这个监听事件
        },
        deep:true
    }
	 
}
//其中用handler与deep来辅助监听

 

 注：若直接监听这个数据不需要deep，deep默认值为false。

Class与Style

Vue操作元素的class与style 

//style绑定

<div :style="{ color: red, fontSize: fontSize + 'px' }"></div>

//class绑定

<div :class="[activeClass, errorClass]"></div>