VUE的认识及基础语法

我们先来了解一下什么是VUE

vue是渐进式JavaScript框架

什么是渐进式？

vue你可以当成插件使用也可以当成库使用，也可以当成框架使用叫做vuex全家桶

库、插件和框架的区别？

插件： 可能就是一个非常小的功能或者模块 例如fullpage就是完成一个滚屏的功能

库： 一系列插件的集合，相当于把方法重新定义，简化写法，无法完成大型项目的构建

框架： 可以完后大型（完整的）项目的时候即被称为框架

vue从而出现了一种开发模式那就是mv*

mv*就是指的MVC或MVVM的开发模式
而mvc的意思就是modle view control
MVVM的意思就是modle view view-modle
这里的modle(存储数据) view（视图） control（数据和视图的桥梁）

插值表达式的使用

语法形式：

{{值或变量或表达式}}

例子：

<!--插入标准值得-->
{{ 123 }}
<!--插入变量的，但是这个是有前提的要先创建vue实例-->
{{ obj }}

vue中是数据驱动视图的，mvc,修改了m中的数据，v会自动呈现，c是作为桥梁的

要想在修改数据时也同样更改视图的有

可以这样：

<!--可以更新视图，a属性书已经存在的并且是存储器属性-->
obj.a = 1000  
<!--如果对象中不存在的属性然后使用以前添加属性的方式添加进去是不能是实现的，所以要使用下面的方法-->
vm.obj = {a:1,b:2,abc:100}

数组跟原生的数组不一样，vue中对数组和对象重写
例：

<!-- 
            1.通过索引的方式进行修改数组，不能更新视图
            2.通过length属性修改数据，不能更新视图
            想要修改数据中的数据，必须通过7个方法修改，这7个方法是重写以后的方法，可以更新数据并且渲染视图
            pop: ƒ mutator()
            push: ƒ mutator()
            reverse: ƒ mutator()
            shift: ƒ mutator()
            sort: ƒ mutator()
            splice: ƒ mutator()
            unshift: ƒ mutator()
         -->


         <!-- 其他的属性 -->
         <!-- 1.
            vm.$el 被vue所接管的区域
            vm.$el.innerHTML
            vm.$el.innerText

			2.vm.$nextTick()   渲染完成以后执行
        -->

上面的这些方法和以前我们学js里面的这些方法的使用是一样的

指令

mvvm框架 在vue中的指令是以v-开头的，angular是以ng-,react是可以定义的，指令写在标签的属性中的，可以写不同的指令完成不同的功能

1.v-pre 跳过该元素及其子元素的后面的渲染，显示的初始值{{}}

2.v-cloak 就是一个多余出来的指令，没啥含义，第一次渲染可以避免点，得和css一起使用，只让他渲染第二次

3.v-once 只会渲染一次,vue是组件化的，每一块都是一个组件，vue会进行一次缓存，后面所用到的内容都是缓存中的值

4.v-html innerHTML 这个html片段一定是被处理过的，值得被信任的，公司中不会用，因为能够被信任代码很少 避免xss跨站脚本攻击

<!--这个dom是在vue实例里面的变量-->
<div v-html="dom"></div>

5.v-text innerText 这个是给你要操作的元素添加内容

<!--这个test是在vue实例里面的变量-->
<div v-html="test"></div>

6.v-if 控制元素是否存在

7.有v-if那么就会有v-else啊，这里的v-if是配套使用的js里面的if……else的意思是差不多的。
例：

<div v-if="flag">
   <div>张三</div>
</div>
<div v-else>
   <div>18</div>
</div>

v-else v-else-if 跟原生js语法相同，一组必须是连续的，中间不能有插足者

我们可以使用template模板标签进行减少dom的渲染次数
8.从上面的可以看的出也可以这样使用v-else-if使用和上面的使用方法是一样的

9.v-show 这个和v-if的区别

1. v-show是控制样式display:none,v-if是直接控制元素的是否存在
2. v-if如果初始条件为flase则连编译都没有
3. v-sho不支持template标签

关于属性

绑定属性，需要通过vue去渲染的属性在前面必须加一个标识符v-bind: ,属性标识符可简写 ===》:

例：

 <div id="app">
        <!-- class -->
        <!-- 1.一个值 -->
        <div :class="color"></div>
        <!-- 2.数组 -->
        <div :class="[red,yellow]"></div>
        <!-- 3.对象 属性值为boolean，控制class名是否存在-->
        <div :class="{red:false,yellow:true,green:true}"></div>
        
        <!-- 这里的是要看你css文件里面里的权重值的 -->
        <div :class="[color,flag?yellow:'',!flag && red]"></div>
        
        <!-- 一个值，数组 -->
        <div style="width: 500px;height:500px;" :style="divStyle"></div>

        <!-- 事件 
            v-on:+事件名称 简写@
        -->
        <button v-on:click="change1('red')">red</button>
        <button @click="change('yellow')">yellow</button>
        <button @click="change('blue')">blue</button>
        <div :class="color"></div>
    </div>

<script>
       //在这里要注意的是如果你把函数方法定义在data属性上，如果该函数需要传值那么this的指向的就是vue的代理对象，如果该函数不传值那么this的指向的就是window对象
        var vm = new Vue({
            el:"#app",
            data:{ //定义数据
                name : "xiaoqiang",
                age : 18,
                dom : "<h1>vue</h1>",
                flag : true,
                imgUrl : "https://cn.vuejs.org/images/logo.png",
                color:"pink",
                red:"red",
                yellow:"yellow",
                green:"green",
                divStyle:{
                    width:"200px",
                    height : "200px",
                    background:"blue"
                },
            },
            methods:{//所有方法都定义在这个里面
                 change(color){
                     console.log(color)
                     console.log(this) //指向vue实例化对象
                     this.color = color
                }
            }
        })

循环

这里的循环就是v-for指令
注意：
在脚手架环境中不能这样写，首先vue是mvvm框架，没有直接更改dom的操作（效率更高），而是使用虚拟dom被称为vdom
vdom驱动视图，变成真实的dom，修改dom会导致重绘问题，
为了提升效率，把循环出来的vdom全部加上了标记（在普通环境中看不见，只有在cli中会发出警告），这个标记就是key属性
1.key值可以任意写
2.但是它是标记，唯一性，key值重复会有警告
3.尽量不要使用index值作为key属性的值
4.key值是真实存在的，只是不会显示在dom结构中

<div v-for="(item,index) in arr" :key="item" :a="item">{{item}}</div>
<div v-for="(item,index) in arr">{{item}}:{{index}}</div>
<div v-for="(value,key) in obj">{{key}}:{{value}}</div>

如果内容有多个，可以使用template标签，template标签是虚拟标签，里面不能添加key值，只能添加在template标签的子元素中

v-model

这个可以完成数据的双向绑定，主要使用在表单元素中

<!-- input -->
<input type="text" v-model="content">
<span>{{ content }}</span>

<!-- textarea 文本域 -->
<textarea v-model="content"></textarea>
<span>{{ content }}</span>

<!-- checkbox 复选框-->
<label for="zs">张三</label>
<input type="checkbox" id="zs" v-model="checked02" value="zs">
<label>李四<input type="checkbox" v-model="checked02" value="ls">
</label>
<label>王五
<input type="checkbox" v-model="checked02" value="ww">
</label>
{{ checked02 }}

<!--radio 单选按钮-->
<label>one
<input type="radio" v-model="radi" value="one">
</label>
<label>two
<input type="radio" v-model="radi" value="two">
</label>
{{ radi }}

<!--下拉框的-->
<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>选中的值: {{ selected }}</span>

自定义指令

自定义指令有两种情况：
全局的：可以用在任意的一个呗vue接管的标签中
局部的：定义在vue的实例中，只能在当前vue所接管标签中使用的

1. 自定义指令为什么需要别的指令来做支撑，自定义指令应该是属于独立的一块

    自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。
   

全局的 ：
函数的例子：

//这里指定以指令的slice在使用时是v-slice=“”
 Vue.directive("slice",(el,bindings,vnode)=>{
            console.log(el)  //绑定的元素
            console.log(bindings)   //绑定的详细信息
            console.log(vnode)  //虚拟的节点   最后肯定要转换成真实节点  
        })

对象的例子：

Vue.directive("slice",{
// 有五个函数，常用三个
	bind(el,bindings,vnode){//指令绑定上去时触发
	console.log("bind")
},
	update(el,bindings,vnode){//数据更新时触发
	console.log("update")
},
inserted(el){//元素插入到页面时触发
    console.log("insert")
    console.log(el)
    el.focus();
  }
})

局部的：

var vm = new Vue({
	el:"#app",
	data:{
		content:"jackashfkadhsh",
	},
	directives:{
       // 局部的自定义指令
  	}
})

过滤器

过滤器跟指令一样，只是有点区别
1.过滤器在vue中没有内置，不像angular中有9大内置过滤器，在vue中全是自定义
2.全局，局部

过滤器的调用就是当成一个函数进行调用，返回值作为数据展示

toMoney就是函数，只是这种函数写法变了样，调用也变了样
例：

//这个是全局的写法
Vue.filter('toMoney',(value,a,b,c)=>{
   console.log(value,a,b,c)
   return value*3
})
//这个是局部的写法
var vm = new Vue({
   el:"#app",
   data:{
      money:1000000
   },
   filters:{
    
	}
})

修饰符

v-on 指令常用修饰符：

1、.stop 调用 event.stopPropagation()，禁止事件冒泡。
2、.prevent 调用 event.preventDefault()，阻止事件默认行为。
3、.capture 添加事件侦听器时使用 capture 模式。
4、.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。
5、.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调。
6、.native 监听组件根元素的原生事件。
7、.once 只触发一次回调。
8、.left 这个是在vue的2.2.0的版本才有的，只当点击鼠标左键时触发。
9、.right 这个是在vue的2.2.0的版本才有的，只当点击鼠标右键时触发。
10、.middle 这个是在vue的2.2.0的版本才有的，只当点击鼠标中键时触发。
11、.passive 这个是在vue的2.3.0的版本才有的，以 { passive: true } 模式添加侦听器。（注意！）如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用其他的.native修饰符了。

v-bind指令常用修饰符：

1、.prop -被用于绑定 DOM 属性 (property)。
2、.camel 这个是在vue的2.1.0以上的版本才有的，将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)。
3、.sync 这个是在vue的2.3.0以上的版本才有的，语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-model指令常用修饰符：

1、.lazy 取代 input 监听 change 事件。
2、.number 输入字符串转为数字。
3、.trim 输入首尾空格过滤

vue的渲染流程

渲染流程是如果在你的Vue实例中没有template替代模板和render的方法那么就渲染vue接管的元素里面的元素进行渲染，如果没有render方法，有替代模板，那么最后的渲染结果就会是template的内容进行渲染，如果三个都有那么就会根据render方法里面为最后显示在页面上的渲染结果。

详细图如下：

生命周期

生命周期函数范围四组，第一组是创建开始（beforeCreate()）和创建结束函数（created()），第二组是创建输出模板开始(beforeMount())和输出模板结束函数(mounted())，第三组是修改开始（beforeUpdate()）和修改结束（updated()），
第四组是删除开始（beforeDestroy()）和删除完成（destroyed()），具体的示意图如下：

计算属性和侦听器

计算属性

在vue实例中有一个属性就是把要进行计算的属性定义一个方法放在computed的属性里面，然后使用时就只需要将方法放在插值表达式里面进行使用该方法名就行了，如果是放在vue实例的methods的属性里面就会出现你修改了data上的属性的值那么也会触发methods上的函数的（触发的前提是data属性里面有没有参加属性计算的属性被调用，再进行修改就会出现的），而你写在vue的computed属性上里面的方法就会出现上面的这种情况。
例：

var vm = new Vue({
   el:"#app",
data:{
     // 前提：后台给的
     name : "zhangsan",
     age : 18,
     msg : "长得可爱",
    preson : ''
    },
computed:{ //计算属性
	getPreson(){ 
	//计算属性是不需要调用，直接使用
	// 计算属性相当于做了一层缓存，只要不涉及修改的值从缓存中取值
	// 只有在涉及到数据更改的时候才会重新执行该函数
    console.log("test")
    console.log(this)
    return `姓名：${this.name}年龄：${this.age}`
    }
},

侦听器（watch）

侦听器就是监听data属性里面的变量的变化的
使用方法有两种：
第一种函数的使用方法：

watch:{ 
   	name(newVal){  //name被修改就会被触发
   		// newVal改变name以后的新值
   		// 监听数据必须先存在
   		this.preson = `姓名：${this.name}年龄：${this.age}`
},
	age(newVal){
		this.preson = `姓名：${this.name}年龄：${this.age}`
	}
}

第二种对象的使用方法：

watch:{ 
	name :{
		handler(newVal){
			console.log(this)
			// this.preson = `姓名：${this.name}年龄：${this.age}`
			setTimeout(()=>{
				this.preson = `姓名：${this.name}年龄：${this.age}`
			},3000)
		},
		immediate:true//第一次渲染可以直接出现
	},
	age :{
		handler(newVal){
			this.preson = `姓名：${this.name}年龄：${this.age}`
		},
		immediate:true
	}
}

computed和watch的区别？
1.computed可以观察多个数据，watch只能是一个数据
2.computed生成一个新的数据，直接渲染至视图中，watch是修改本身已经存在的数据
3.computed不可以执行异步的，因为需要返回值，返回值是由js主线程控制，watch可以执行异步的，因为不需要返回数据，定时器是属于异步的线程