vue.js基础

初学vue.js

• 项目搭建：
  通过@vue/cli脚手架创建项目
  如果以前全局安装：npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
  npm config set registry https://npm.taobao.org/mirrors/npm/
  npm install -g vue 全局安装
  npm install -g @vue/cli
  vue --version
  vue create college roletraining
  cd roletraining 进入项目
  npm run serve 运行项目

npm i element-ui -S 下载依赖包，生产依赖dependencies
npm i babel-eslint -D 下载依赖包，开发环境依赖devDependencies

参考文档：https://cn.vuejs.org/v2/guide/custom-directive.html

• MVVM框架：View ViewModel Model, view的变化自动跟新到ViewModel，ViewModel变化自动同步到view，自动同步因为ViewModel中属性实现了Observe，属性变更触发对应操作。

• 数据绑定
  插值：文本插值{{}}，双大括号把里面值当作字符串处理，如果值是HTML片段，用{{{}}}表示。{{}}有闪烁问题，v-cloak解决闪烁问题
  Text:{{text}} 页面加载时不会出现闪烁问题。

  Logo:{{{logo}}}
  logo:ddff

  表达式：
  {{true？1:0}}
  指令，分隔符

• 指令
  内部指令
  v-show,v-else,v-model,v-repeat,v-foe,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if。
  v-if:根据表达式的值在DOM中生成或移除一个元素。运行时条件不太可能改变使用这个较好。
  v-show:显示或隐藏（false）。隐藏是该元素多了style=“display:none”，注：不支持template语法。频繁切换使用较好
  v-model:在input，text，select，checkbox，radio等表单控件元素上创建双向数据绑定，用在用户输入事件中跟新数据。input输入框输入值，span标签内容也会一起改变。 可以添加参数：number，lazy, debounce.
  number:将用户自动输入转为number类型（转换为nan，返回原值）
  lazy:将数据改到change事件中发生， 数据发生变化时
  debounce=“500” 延时同步输入看看的值与数据。

   <form>
      姓名：<input type="text" v-model="data.name" placeholder=""/>
      <span>{{data.name}}</span>
   </form>

	var vm = new Vue({
		el:"#example",
    data:{
     data:{
       name:"",
       sex:""
     }
    }
	})

v-for:
v-text:更新元素的textContent, < span v-text=“msg”>< /span>等价于 < span>{{msg}} </ span> ，这个指令不出现闪烁
v-bind:将属性，或组件prop动态绑定到表达式。可以简写为 ：绑定的属性
绑定prop:prop比较在子组件中声明，
.sync 双向绑定 < my-component :prop.sync=“someThing”></ my-component>
.once 单次绑定
.camel:绑定的特性名字驼峰命名，常用于SVGA特性

<img  v-bind:src="imageSrc"> 
缩写：<img :src="imageSrc">
绑定一个对象:<div v-bind="{id：someprop, 'otherattr':otherprop}"></div>

v-on:绑定事件监听器。事件类型参数指定，监听原生dom事件.
可以添加修饰符：.stop .prevent .capture .self

<button v-on:click="dothis"></button>
可以简写：<button @click="dothis" ></button>
<a href="http://www.baidu.com"  @click.prevent="linkclick">有问题百度</a> 阻止默认行为，点击后不会连接跳转到百度
<div @click="ondiv">
	<button @click.stop="dothis"></button>
</div> 添加stop后只调用dothis，不调用ondiv。正常两个方法都会调用，阻止冒泡行为
<div @click.self="ondiv">
	<button @click="dothis"></button>
</div> .self: 只有点击当前元素时才触发事件处理函数。 冒泡和捕获的不执行,只执行ondiv，不执行dothis函数。

• 自定义指令
  自定义指令：directIve

Vue中所有指令在调用时以v-开头， 在自定义时指令名称不加v-，调用要加v-前缀.全局的

	Vue.directive("focus",{
	bind:function(el,binding){  //只调用一次，指令第一次绑定到元素， 指令绑定到元素上时会立即执行bind函数，
		//注意，每个函数中，第一个参数是el，表示被绑定了指令的那个元素，el参数是原生的JS对象
		// 在元素绑定指令时，还没有插入到DOM去，调用focus方法没有作用
		
		el.style.color=binding.name  //样式相关的操作
	inserted:function(el){//表示元素插入到DOM中时候执行
		el.focus()  //一个元素只有插入到DOM之后，才能获取焦点。行为相关的操作在这里，防止行为不生效
	},
	update:function(){//绑定值变化时调用 当Vmode更新时候会执行，执行一次
	},
	unbind:function(){//调用一次，指令解绑时调用
	}
})
模板中调用：<input type="text" id="search" v-focus v-color="'blue'">
el:指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
    name：指令名，不包括 v- 前缀。
    value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2
 私有定义：
 directives:{
 	‘fontsize’:{
		bind:function(el,binding){
			el.style.fontSize=binding.value
		}
	}
}
简写：bind 和 update 两个钩子函数 可以是一下简写
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

• 计算属性
  计算属性介绍
• 表单控件绑定
• 过滤器
  形式：过滤器本质是函数，作用是用户输入数据进行处理并返回数据结果。任何表达式的地方和绑定指令的表达式后调用。过滤器接受参数，在名称后，参数之间以空格分隔. 过滤器在{{}},v-bind指令中使用
  {{message | filterFction ‘arg1’ arg2}} message作为第一个参数，字符串’arg1’第二个参数 计算后的arg2第三个参数
  内置过滤器：
  字母操作： capitalize :首字符转为大写, uppercase :所有字母大写 , loweracse :所有字母小写。
  json过滤器： 是JSON.stringify(). json 可以接受Number类型参数，用于标识缩减，默认为2. < pre>{{didi | json 4}} < /pre> 以4个缩印空格打印didi对象， 是JSON格式
  限制： limitBy filterBy orederBy
  currency 将数字值转换为货币显示输出，默认美元 符号。
  {{amount | currency ‘$’ 3}} 小数点为3位 12345 输出为：￥12,345.000
  自定义过滤器： 全局函数Vue.filter用于构造过滤器

  Vue.filter('reverse' , function(value){
  	return value.split('').reverse().join('')
  )  名为reverse过滤器名
  双向过滤器：
  Vue.flter(id,{
  	read:function(){},
  	write:function(newValoldVal){}
  })
  

私有过滤器：两个条件【过滤器名称和处理函数】
var vm =new Vue({
el:"#app",
filters:{
msgFormate:function(){}
}
全局过滤器：整个Vue实例都可以调用的
过滤器调用时采用就近原则，私有和全局同名时，优先调用私有过滤器
padStart(2,“0”): 字符串的填充函数，共2位，以0填充。
})
```

• class和style的绑定

对象语法：
<div v-bind:class="{'didi-orange':isRipe,'didi-green':isnotRipe} "></div>
data:{
isRipe:true,
isnotRipe:false
} 根据data中isRipe，isnotRipe 的值为true时对应class会生效，（
数组语法：
<div v-bind:class="[ 'didi-Hand' , 'sdid-ibeaut' ] "></div>   didiHand  sdidibeaut 是两个类样式
<div v-bind:class="[didiHand,sdidibeaut ] "></div> 
data:{
didiHand: 'didi-Hand',
sdidibeaut: 'sdid-ibeaut'
} 
<div v-bind:class="[didiHand,{'didi-orange':isRipe,'didi-green':isnotRipe} ] "></div>  数组 加对象
Styel内敛样式：
<div v-bind:style="{color:didicolor,fontSize:fontsize} "></div>  css属性名用驼峰
data:{
didicolor:red,
fontSize:'20px'
}

<div v-bind:style="{ddff} "></div>
data:{
ddff:{ 
didicolor:red,
fontSize:'20px'
}
}
<div v-bind:style="[ddfe,ddft] "></div> 

• methods属性

var vm = new Vue({
el:("#app"),
methods:{
	green:function(event){
		//方法类 this指向vm   this始终指向创建的Vue实例
		//event 是原生DOM事件  与事件绑定的方法参数支持event，原生DOM事件传入
		alert(event.target.tagName)
	}
}
})
通过$event 变量传入方法中
<button v-on:click="say('hello',$event)" ></button>

按键修饰符
.enter .tab .delete .esc .space .right .left .up
Vue.config.keyCodes.f2=113 自定义按键，113是键盘码值 （1.x）自定义

-Vue的生命周期：

beformCreate(){
            //遇到的第一个生命周期函数，表示实例被完全创建出来之前，会执行
            //注意：在beformCreate生命周期执行函数时，data,methods中的数据都还没有初始化
        },
        create(){//遇到的第二个生命周期函数
            //        在created中，data和methods都已经初始化好了，调用methods和操作data数据，最早在created中操作
        },
        beformMount(){//这是遇到的第三个生命周期函数，表示 模板已经在内存中编辑完成，但尚未把模板渲染早页面中
            //在执行的时候，页面中的元素还没有被替换过来，只是写的模板字符串  挂载前
        },
        mounted(){//这是遇到的第三个生命周期函数,表示内存中的模板，已经真实的挂载到了页面中，用户可以看已经渲染好的页面
            //是实例创建的最后一个生命周期函数，执行完mounted 就表示实例已经完全创建好，如果没有其它操作，这个实例就在内存中不动
        },
        beforeUpdate(){//这时候表示界面还没有被更新，但数据肯定被跟新了
            //当执行  的时候页面中显示的数据是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步 
        },
        update(){
            //update事件执行的时候，页面和数据已经保持同步，都是最新的，
        }