Vue.js入门（基础 第二章）

一、vue指令

        v-html：可以解析html标签
        v-text：显示文本

        v-show
        v-if

v-show和v-if的区别：
            v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
            v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
            相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
            一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
            因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

        v-else
        v-else-if
        v-for
            <div v-for="(item, index) in items"></div>
            <div v-for="(val, key) in object"></div>
            <div v-for="(val, name, index) in object"></div>
            <div v-for="item in items" :key="item.id"> //唯一标识
              {{ item.text }}
            </div>
            
        v-bind：绑定元素的属性
        v-model：在表单控件或者组件上创建双向绑定

二、生命周期（vue实例的生命周期）

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

        钩子函数：
        beforeCreate：创建前
        created：创建后，相当于dom中的window.load
        beforeMount：挂载前
        mounted：挂载后
        beforeUpdate：更新前
        updated：更新后
        beforeDestory：销毁前
        destoryed：销毁后

        示例：

<script src="js/vue.js"></script>
		<script type="text/javascript">
			var myVue = new Vue({
				el: "#app",
				data: {
					a: "Vue.js"
				},
				beforeCreate: function() {

					console.log("创建前")
					console.log(this.a)
					console.log(this.$el)
				},
				created: function() {
					console.log("创建之后");
					console.log(this.a)
					console.log(this.$el)
				},
				beforeMount: function() {
					console.log("mount之前")
					console.log(this.a)
					console.log(this.$el)
				},
				mounted: function() {
					console.log("mount之后")
					console.log(this.a)
					console.log(this.$el)
				},
				beforeUpdate: function() {
					console.log("更新前");
					console.log(this.a)
					console.log(this.$el)
				},
				updated: function() {
					console.log("更新完成");
					console.log(this.a);
					console.log(this.$el)
				},
				beforeDestroy: function() {
					console.log("销毁前");
					console.log(this.a)
					console.log(this.$el)
					console.log(this.$el)
				},
				destroyed: function() {
					console.log("已销毁");
					console.log(this.a)
					console.log(this.$el)
				}
			});
		</script>

三、vue事件绑定

        v-on：简写为@；事件对象使用$event 

//如给按钮绑定点击事件

<button v-on:click="login">登录</button>

<button @click="login">登录</button>

//两种写法效果相同

        修饰符： 

            .stop - 调用 event.stopPropagation()。
            .prevent - 调用 event.preventDefault()。
            .capture - 添加事件侦听器时使用 capture 模式。
            .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
            .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
            .native - 监听组件根元素的原生事件。
            .once - 只触发一次回调。
            .left - (2.2.0) 只当点击鼠标左键时触发。
            .right - (2.2.0) 只当点击鼠标右键时触发。
            .middle - (2.2.0) 只当点击鼠标中键时触发。
            .passive - (2.3.0) 以 { passive: true } 模式添加侦听器                  

四、过滤器

过滤器本质是函数，函数有参数且有返回值

语法：

        filters:{
            函数
        }

使用方法：html中在绑定的属性后面加| 要使用的函数

示例：返回日期

        在js中

var vm = new Vue({
  el: '#app',
  data: {
  
  },
  filters:{
					DisplayDateString:function (value){
						var d = new Date(value);
						// return d.toLocaleDateString().replace(/\//g,"-");
						var month = (d.getMonth()+1).toString().length==2?d.getMonth()+1:
							"0"+(d.getMonth()+1);
						var day = (d.getDate()+1).toString().length==2?d.getDate()+1:
							"0"+(d.getDate()+1);
						return d.getFullYear()+"-"+month+"-"+day;
					}
				}
   }

        在html中

<div id="app">
<div> {{ new Date() | quanDate }} </div>
</div>

五、计算属性

本质是个方法，要求有返回值，当模板中展示在页面中的变量需要计算时使用

语法：computed:{
        
        }

使用：调用时作为属性,{{方法名}}

实例：

        当data中的num需要加10并且在页面中展示时

<div id="example">
  <span>计算结果：{{result}}</span>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    num:5
  },
  computed: {
   
    result () {
      // `this` 指向 vm 实例
      return this.num+10
    }
  }
})

效果：

        计算结果：15

 六、自定义指令 direactives

        1.direactives是什么

                注册自定义的指令

        2.directives有什么作用

                对普通dom元素进行底层操作，就会用到自定义指令

        3.使用

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

                全局指令：

	// 注册一个全局自定义指令 `v-focus`
			Vue.directive('focus', {
			  // 当被绑定的元素插入到 DOM 中时……
			  inserted: function (el) {
				// 聚焦元素
				el.focus()
			  }
			})

                局部指令：

directives: {
			  focus: {
				// 指令的定义
				inserted: function (el) {
				  el.focus()
				}
			  }
			}

七、set方法

        向响应式对象中添加一个property，并确保这个新property同样是响应式的，且触发视图更新
        
        语法：

        Vue.set(target,propertyName/index,value)
         或 this.$set(target, propertyName/index, value );

        参数1： 要修改的对象
        参数2： 属性名 | 下标
        参数3： 属性的值
        返回值：已经修改好的值

         情况： data里的数据修改成功, 视图没有更新
                   通过set来修改( )

        示例1：

this.$set(this.linshi[this.index],"name",this.linName);
this.$set(this.linshi[this.index],"price",this.price);

        示例2：

this.$set(this.$data,"linshi",newlinshi);