VUE基础知识

一、概述

        Vue的定位是一个渐进式框架 前端三大mvvm框架 vue , react ,angular，Vue受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力；跟react和angular不同，Vue是尤雨溪主要创作的。

Vue的官网：cn.vuejs.org

Vue的主要特点分为以下几点：

1、简单、上手方便

2、结合了angular指令与react组件思维

3、生态丰富（插件多）且API文档完善

二、实例化参数

Vue的标准写法：

首先引入vue.js库

<script src="vue.js"></script>

然后在新创建一个 new  Vue  这里要注意Vue开头要大写；

el     选择目标标签

html代码:

<div id="app">
    
</div>

js代码：
    new Vue({
        el:'#app', //这里的#app是上面你要操作的DOM节点
    })

当然除了 el  Vue还有很多模板语法：

data   用来指定数据:

文本渲染指令：

{{}}、v-text、v-html   

除了以上三个还有  v-model    v-bind

<div id="app">
    <p>{{message}}</p>   //输出下面data内的内容
    <p v-text="message">></p>  //与{{}}输出结果相同但v-text作用在标签
    <p v-html="msg"></p>  //v-html可以输出html标签
    <input type="text" v-model="message">  //model  可以同步data的数据
    <p v-bind:title="dyTitle">{{message}}</p>    //v-bind:属性='指令值'
    //v-bind:v-bind:属性='指令值'还可以缩写为::属性='属性值'
</div>

new Vue({
    el:'#app'
    data:{
        message:'hello Vue!',
        msg:'<i>hello<i>'，
        dyTitle:'看见我的人一生平安'
    }
})

三、 methods    定义事件

html代码:
    <div id="app">
		<p @click="pclick()">
			<button type="button" @click.stop="bclick()">按钮</button>
			<a href="https://www.baidu.com" @click.stop.prevent="aclick()">百度</a>
		</p>   

        //@click是v-on：的缩写 click是点击事件
	
    	<h3 @click.once="hclick()">别点我了</h3>
	</div>

js代码:

    new Vue({
        el:'#app',
        data:{
            num:1
        },
        methods:{
            //定义方法
	    	pclick(){alert('p被点击了')},
		    bclick(){alert('按钮被点击了')},
		    aclick(){alert('a标签被点击了')},
		    hclick(){alert('都说了，别点我了')}	
	    }
    })

四、computed  计算

html代码：


<div id="app">
	<h1>计算：从现有数据计算出新的数据</h1>
	<p>n1:{{n1}}</p><input type="text"v-model.number="n1" />
	<p>n2:{{n2}}</p>
	<p>n3:{{n3}}</p>
</div>

js代码：

new Vue({
	el:'#app',
	data:{
		n1:10,
		n2:5
	},
	// 从现有数据计算出新的数据
	computed:{
	    "n3":function(){
			return this.n1+this.n2;
		}
	}
})

五、watch  监听

html代码：
    <div id="app">
			<h1>监听:监听数据的变化,并执行回调函数</h1>
			<span>{{num}}</span><input type="text" v-model="num"/>
	</div>

js代码：
new Vue({
	el:'#app',
	data:{
		person:{
			age:15
		},
		num:8
	},
    //监听数据变化，并执行回调函数handler
	watch:{
		num:{
		    handler(nval,oval){
			console.log("数据由",oval,"变化为",nval);
			console.log("num变化了:",this.num);
		    }
	    }
	},
})

六、自定义指令

常用：

bind 绑定执行一次、insert   插入执行一次、update  每更新执行一次

<input v-focus="flag">

directives:{

    "v-focus":{
          update(el,binding){
		    if(binding.value){
                el.focus()
            }
          }
     }
}

七、指令

指令的值是可以是简单的JavaScript命令

       1、文本渲染指令：

        {{}}、v-text、v-html   (渲染html文本)

        2、属性绑定：

        v-bind:属性='指令值'

        :属性='属性值'  

        3、条件渲染 ：

        v-show    //css方式隐藏。

        v-if      v-else-if      v-else

        频繁切换用x-show; 一次性切换用v-if; v-show隐藏是通过css的方式隐藏节点 。   

        4、列表渲染：

        v-for=“item in list”    list要遍历的数组       item要遍历的项。

        v-for"(item,index) in list"    index当前遍历的索引   从0开始。

        使用v-for务必v-bind:key"" :key="值"   。

        值必须是唯一，添加key属性可以优化v-for的渲染，让vue更好识别当前渲染的节点，特别是在排序、过滤等操作的时候不建议key的只使用循环的索引。

        5、事件指令：

        v-on:事件类型=“响应函数”        v-on:click"say()"

        @click=“say（）//v-on:事件简写。

        @click=“num++”  //行内事件响应。

        事件修饰符:.stop  阻止事件冒泡、.prevent 阻止默认事件、.once只执行一次。

        @click.stop.once.prevent=“num++”  //事件的修饰符可以同时写多个。

        按键修饰符:.up   .down   .left    .right   .delete   .enter   .space    .esc

        事件对象: $event

        6、表单绑定指令：

        v-model    //让表单的值与数据绑定在一起。

        <input type="checkbok">      //默认选中值是true;不选中值是false。

        <input type=:checkbok" name-"fruit" v-model="list">     //如果把多个选中的值动态添加到list数组中。

       修饰符: .number  数字    .trim   移除两端空白。

八、类绑定

属性：   :class="值"

对象：当属性值为真，该属性作为class绑定  :class="{'k1':true,'k2':false}"  k1的值为真，k1会被绑定，k2不会。

数组方法：:class="[c1,c2,c3]"

九、样式绑定

属性名去掉-下一个字母大写(驼峰命名)  :style="{'color':'red','fontSize':'48px'}"

十、动画

vue 动画  在内置组件transition包裹会自动在动画的进入过程与离开过程添加类名。

内置组件：transition：name名称；mode  模式：in-out先进再出  out-in  先出再进；

enter-active-class指定进入类名； leave-active-class  指定离开类名。

transition-group

动画类：v-enter-active  进入过程：v-enter  进入前     v-enter-to  进入后。

       v-leave-active   离开过程 ：v-leave 离开前     v-leave-to =离开后。

创建动画形式：

1.动画类6个css创建

.fade-enter-active{
	transition: all 1s;
}
.fade-enter{
	opacity: 0;
	width: 0;
}
.fade-enter-to{
	opacity: 1;
	width: 300px;
}
.fade-leave-active{
	transition: all 1s;
	transform: rotateZ(360deg);
}
.fade-leave{
	opacity: 1;
	width: 300px;
}
.fade-leave-to{
	opacity: 0;
	width: 0;
} 

2、keyframes关键帧
.fade-enter-active{animate:fadeIn ease 1s}
.fade-leave-active{animate:fadeOut ease 1s}；

3、引用第三方动画库
指定进入的class与离开的class
<transition name="fade" enter-active-class="wobble animated" leave-active-class="rollOut animated">

十一、过滤，管道

1.{{num|fix}}

2.{{num|fix(2)}}

3.v-text="num|fix"

filters:{
	fix(value,arg){
        return value.toFixed(arg)
    }
}

十二、组件

1.一段可以重复利用的代码块

2.全局组件：Vue.component("组件名",{template:''})

3.局部组件：const  steper = {template:''}

4.注册组件：new Vue({components:{steper}   })

5.使用组件：<steper></steper>