Vuejs基础

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

Vue初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初体验</title>
</head>
<body>
    <div id="app">
        {{message}}
        <ul>
            <li v-for="item in movies">
                {{item}}
            </li>
        </ul>
    </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app',//用于挂载要管理的元素
                data:{ //定义数据
                    message:'你好啊',
                    movies:['少年派','星际穿越']
                }
            })
        </script>
</body>
</html>

Vue中的MVVM

MVVM的概念

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

Vue中MVVM：

通过ViewModel将view和model分隔。ViewModel的主要作用：

将model生成的数据与view进行绑定，并且对model中的数据进行实时监听保证view中的数据最新。
对view的DOM进行监听，如果发生某个事件会调用model中相应的回调。

Vue实例中的基本选项

el：
- 类型：string|HTMLElement
- 作用：Vue实例管理的DOM
data：
- 类型：Object|Function
- 作用：Vue实例对应的数据对象
methods：
- 类型：[key:string]：Function
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
生命周期函数：
- 类型：如beforeCreate: function(){}等….(详细如下Vue生命周期介绍)

computed（计算属性）：

类型：[key:string]：function(){}
作用：将属性进行加工处理，并返回
使用：<span>{{fullName}}</span>

computed:{  //计算属性
  	// 完整写法
  	fullName:{
      get(){
      	return this.firstName + '-' + this.lastName;
      },
      set(value){
      	console.log("fullName被人修改了哦!!");
      	const arr = value.split('-');
      	this.firstName = arr[0];
        this.lastName = arr[1];
      }
    }
    //只有考虑读取才能使用这个简写
    fullName(){
        return this.firstName + '-' + this.lastName;
    }
}

filters(过滤器)：

类型：key:string(value){}
作用：将数据进行过滤并返回过滤后的结果

//声明
filters:{
    timeFormater(value,str){
        return dayjs(value).format(str)
    }
}
//使用
<h3>现在是:{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>

watch(属性监视)：

类型：key(newValue,oldValue):{}
作用：监视属性的变化

watch:{ //同样可以检测普通属性和计算属性
    // isHot:{
    //     deep:true, //深度监视 监视多级结构中所有属性的变化
    //     immediate:true, //初始化时调用一下
    //     handler(newValue,oldValue){//当isHot发生变化时调用
    //         console.log("天气发生变化"+oldValue+newValue);
    //     }
    // }
    // 只需要handler时可以简写
    isHot(newValue,oldValue){
        console.log("天气发生变化"+oldValue+newValue);
    }
}   
})
// 写法2 
vm.$watch('isHot',{
    immediate:true, //初始化时调用一下
    handler(newValue,oldValue){//当isHot发生变化时调用
}

其余可以参考官方网站

Vue生命周期

Vue官方生命周期图例：

Vue各个生命周期阶段介绍：

beforeCreate：刚刚初始化事件但数据代理还未开始时，并且无法通过vm访问到data中的数据和methods中的方法
created：完成数据检测和数据代理之后调用，并且可以通过vm访问到data中的数据和methods中的方法
beforeMount：在Vue解析模板并生成虚拟DOM但还不能显示解析好的内容后调用，页面呈现的是未经Vue编译的DOM,对DOM的操作最终会失效
mounted：Vue完成模板的解析并把初试真实DOM元素放入页面后（挂载完毕），页面中呈现的是经过Vue编译的DOM
beforeUpdate：当更新数据时，重新解析模板之前调用，数据是新的页面是旧的
updated：当模板解析页面与数据同步之后调用，Vue会生成新的虚拟DOM随后与旧的DOM进行比较完成更新页面渲染
beforeDestroy：调用Vue.$destory()会完全销毁一个实例，清除它与其他实例的链接,解绑它的全部指令和事件监听器，在摧毁之前调用data、methods都可用,但是对数据的更新之后将不会触发更新了
destroyed：Vue完成销毁之后调用

Vue指令

内置指令

v-once：只会动态渲染一次，动态渲染以后就是静态资源了
v-clock：标识延迟加载的标签，如果vue加载完毕后就关闭
v-html：用于嵌入html代码
v-pre：直接静态渲染不进行解析加快编译
v-text：往标签中写入文本数据

v-bind：动态绑定属性（可以绑定href、src、class、style等）

<img v-bind:src="imgURL">
<img :src="imgURL">  <!-- 简写 -->
<!-- 动态添加类名 -->
<div :class="{active:isActive}">文字</div>
<div :class="['a','b']">文字</div><!-- 数组语法 -->
<!-- 动态绑定样式 -->
<div :style="{fontSize: fsize+'px'}">111</div>
<div :style="styleObj">222</div>

v-for：用于遍历

<!-- 遍历数组-->
<ul>
    <li v-for="(p,index) in persons" :key="p.id"><!-- p为元素，index为索引 添加key提高DOM渲染的效率-->
        {{index+1}}:{{p.name}}-{{p.age}}
    </li>      
</ul>
<!-- 遍历对象-->
<ul>
    <li v-for="(value,key,index) in person"><!-- value为对象属性值，key为对象属性名 index为索引-->
        {{index+1}}:{{key}}-{{value}}
    </li>      
</ul>

v-on:事件：绑定事件(简写为@)

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo1">点我提示信息</button>
        <button @click="showInfo2($event,66)">点我提示信息</button>
        <!-- keyup事件后面加哪个键
            回车：enter
            删除：delete
            退出：esc
            空格：space
            换行：tab（特殊需要配合keydown如：ctrl,alt,shift,meta）
            上：up
            下：down
            左：left
            右：right
        -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el:'#root',
            data(){
                return{
                    name:'我家',
                }
            },
            methods:{
                showInfo1(event){
                    console.log(event.target.innerText);
                    alert("你好啊1~");
                },
                showInfo2(event,number){
                    console.log(event);
                    console.log(number);
                    alert("你好啊2~"+number);
                },
                showInfo(event){
                    // if(event.keyCode !== 13) return  
                    console.log(event.target.value);
                },
            }
        })
    </script>
</body>

并且还有可以在事件后面添加修饰符

<!-- 1.prevent阻止跳转
            2.stop阻止事件冒泡(事件向上传递)
            3.once事件只触发一次
            4.capture使用事件的捕获模式(以由外向内执行事件)
            5.self只有event.target是当前操作的元素才会触发事件
            6.passive事件的默认行为立即执行，无需等待事件回调执行完毕
       -->
       <a href="http://www.baidu.com" @click.prevent="showInfo">点击超链接咯</a>
       <div @click="showInfo">
           <button @click.stop="showInfo">点我提示信息</button>
       </div>
       <button @click.once="showInfo">点我提示信息</button>

v-if/v-else-if/v-else：判断是否满足条件，不满足则不会渲染该元素及其子元素
v-show：判断是否满足条件进行隐藏展示,适合多次频繁切换

v-model：进行表单数据的双向绑定

<!-- v-model结合radio -->
<input type="radio" value="男" v-model="sex">
<!-- v-model结合checkbox -->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<!-- v-model结合select -->
<select v-model="city">
    <option value="">请选择校区</option>
    <option value="beijing">北京</option>
    <option value="shenzhen">深圳</option>
    <option value="wuhan">武汉</option>
</select>

修饰符：

lazy：可以让数据在失去焦点或者回车时才会更新
number：可以让在输入的内容自动转成数字类型
trim：可以过滤左右两边的空格

自定义指令

有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

<!--使用自定义指令 -->
<h2>放大后的n值是:<span v-big="n"></span></h2>
<input type="text" v-fbind:value="n">
<!--定义指令 -->
directives:{
	big(element,binding){ //简写方式只会在 bind 和 update 时触发相同行为
		element.innerText = binding.value*10
	},
	fbind:{
        //指令和元素成功绑定时
        bind(element,binding){
        	element.value = binding.value;
		},
        //指令所在元素被插入页面时
        insert(element,binding){
            element.focus();  
        },
        //指令所在的模板被重新解析时
        update(element,binding){
            element.value = binding.value;
        }
	}
}

钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值。
- oldValue：指令绑定的前一个值，仅在 update和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update和 componentUpdated 钩子中可用。