vue从入门到精通之基础篇（一）语法概要

(1).vue起步

1:引包
2:启动 new Vue({el:目的地,template:模板内容});
options
- 目的地 el
- 内容 template
- 数据 data 保存数据属性
  数据驱动视图

(2).插值表达式

{{ 表达式 }}
- 对象 (不要连续3个{{ {name:‘jack’} }})
- 字符串 {{ ‘xxx’ }}
- 判断后的布尔值 {{ true }}
- 三元表达式 {{ true?‘是正确’:‘错误’ }}
可以用于页面中简单粗暴的调试
注意: 必须在data这个函数中返回的对象中声明

(3).什么是指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
- 比如html页面中的属性 <div v-xxx ></div>
比如在angular中以ng-xxx开头的就叫做指令
在vue中以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

(4).vue中常用的v-指令演示

v-text:元素的InnerText属性,必须是双标签跟{{ }}效果是一样的使用较少
v-html: 元素的innerHTML
v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
v-else-if
v-else
v-show 隐藏元素如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换

 v-text 只能用在双标签中
 v-text 其实就是给元素的innerText赋值
 v-html 其实就是给元素的innerHTML赋值
 v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素
 如果有if和else就不需要单独留坑了
 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用
 v-if和v-else-if都有等于对应的值，而v-else直接写
 v-if家族都是对元素进行插入和移除的操作
 v-show是显示与否的问题
 注意: 指令其实就是利用属性作为标识符,简化DOM操作,
  看：v-model="xxx"
  v-model 代表要做什么  xxx代表针对的js内存对象
  写在那个元素上，就对哪个元素操作

(5).v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

(6).v-bind使用

给元素的属性赋值
- 可以给已经存在的属性赋值 input value
- 也可以给自定义属性赋值 mydata
语法在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"

<div v-bind:原属性名="变量"></div>
<div :属性名="变量">
    
</div>

(7).v-on的使用

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名="表达式||函数名"
简写方式 @事件名="表达式"

(8).v-model

双向数据流（绑定）
- 页面改变影响内存(js)
- 内存(js)改变影响页面

(9).v-bind 和 v-model 的区别?

input v-model="name"
- 双向数据绑定页面对于input的value改变，能影响内存中name变量
- 内存js改变name的值，会影响页面重新渲染最新值
input :value="name"
- 单向数据绑定内存改变影响页面改变
v-model: 其的改变影响其他 v-bind: 其的改变不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

(10).v-for的使用

基本语法 v-for="item in arr"
对象的操作 v-for="item in obj"
如果是数组没有id
- v-for="(item,index) in arr" :class="index"
各中v-for的属性顺序(了解)
- 数组 item,index
- 对象 value,key,index

(11).过滤器filter

filters
- 将数据进行添油加醋的操作
- 过滤器分为两种
  - 1:组件内的过滤器(组件内有效)
  - 2:全局过滤器(所有组件共享)

局部过滤器的使用

先注册,后使用
组件内 filters:{ 过滤器名:过滤器fn } 最终fn内通过return产出最终的数据
使用方式是 {{ 原有数据 | 过滤器名 }}
过滤器fn:
- 声明function(data,argv1,argv2...){}
- 使用{{ 数据 | 过滤器名(参数1,参数2) }}

全局过滤器的使用

语法：Vue.component('过滤器的名字',fn)
调用：跟局部组件调用方式一样

(12).侦听器watch

watch 监视单个属性和对象

watch:{

               
        		//监视复杂类型,无法监视的原因是因为监视的是对象的地址 
        		// obj:function(newV,oldV) {
        		// 	console.log(newV,oldV);
        		// },
        		// key是属于data属性的属性名，value是监视后的行为 fn中的参数（新值，旧值）
        		msg:function (newV,oldV) {
        			console.log(newV,oldV);

        			if (newV==='alex') {
        				console.log('sb');
        			}
        		},
                // 深度监视 ：object ||array
        		stus:{
        			deep:true,//深度监视
        			handler:function (newV,oldV) {
        				console.log(newV[0].name)
        			}
        		}

小结：基本数据类型简单监视，复杂数据类型深度监视

(13).计算属性computed

computed 同时监视多个属性

默认computed只有getter方法

(14).获取DOM元素

救命稻草, document.querySelector
1: 在template中标识元素 ref=“xxxx”
2: 在要获取的时候, this.$refs.xxxx 获取元素
- 创建组件,装载DOM,用户点击按钮
ref在DOM上获取的是原生DOM对象
ref在组件上获取的是组件对象
- $el 是拿其DOM
- 这个对象就相当于我们平时玩的this,也可以直接调用函数\

-特殊情况

// 需求：input输入框 获取焦点
var App = {
		data: function() {
		    return {
		    	isShow : false
		    }
		},
        template: `
				<div class='app'>
					<input type="text"  v-show = 'isShow' ref = 'input'/>
				</div>
			`,
        mounted: function() {
        	 this.isShow = true;
        	 console.log(this.$refs.input);

        	 // $nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOM
        	 this.$nextTick(function() {
        	 	// 更新之后的DOM
        	 	 this.$refs.input.focus();
        	 })
       
        }
    }
    new Vue({
        el: '#app',
        data: function() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    });