vue入门（一）数据绑定

一、如何使用Vue

1、CDN方式

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、NPM方式（构建大型应用时）

$ npm install vue

二、Vue实例中的属性

1、el：   element，需要获取的元素， 是HTML中的根容器元素，“里面填写元素选择器”

2、data：数据的存储

数据也可以以对象的形式存在，当使用Object.freeze()时，数据的修改并不会响应到实例中。

要使用数据的响应式，需要在data中声明数据，后面新添加的并不会响应。

3、methods：方法，在HTML中使用时需加（），也可通过（）传值。

new Vue({
    el:"#vue-app",
    data:{
       name:"Mr.Wu"，
       url:"http://www.baidu.com"
}),
    methods:{
        greet:function(time){
            return 'Good Morning!'+this.name;}
        }
    }
})

注：若 methods中有一个方法被触发，那么methods中其他所有的方法也会被触发执行一次。

所以在用于搜索，计算大量、耗时时一般用computed计算属性，而一般事件触发还是用methods。

4、computed：计算属性

在computed中，触发其结果重新计算的是：computed中包含的本实例中的属性（依赖）发生变化，则computed重新计算。

一个对象有两个方法，分别是set和get，如下：

写入computed里的方法，在html文档中不能加括号

computed:{
	url:{
			get: function(){
				return this.first+'//'+this.second;
			}
			set:function(val){
				var tmp = val.split('//');
				if(tmp.length>1){
					this.first = tmp[0];
					this.second = tmp[1];
					}
			}
		}
}

5、watch：监听属性

watch能够监听属性值的变化，监听哪一个属性就命名为相同的名字。

（1）回调函数的形式

watch：{
	first: function(newvalue,oldvalue){
	console.log('newvaule is:'+newvalue)
	console.log('oldvalue is:'+oldvalue)
	}
}，

（2）对象的形式 

    在对象的形式中，有handler（函数句柄），immediate（立即以表达式的当前值触发回调）

watch{
	first: {
	immediate:true,
	handler:function(newvalue,oldvalue){
	console.log('newvaule:'+newvalue)
	},
 }
}

    当监听的是一个对象时，改变对象的属性并不会触发监听，其newvalue值不会改变。此时如果想要当对象的属性改变，也执行监听时，就将deep参数设置为true，即添加一行deep:true。

（3）在new Vue构造函数外面配置watch

提供了一个 .$watch('被监听的属性'，执行的回调函数，配置对象)方法，其中有三个参数，如

var unwatch = vm.$watch('first',function(newvalue,oldvalue){console.log('newvalue is:'+newvalue)},{
immediate:true,
deep:true})

此时会返回一个函数，即销毁侦听器的方法，只要执行此函数，如unwatch()，此侦听器即可销毁。

（4）debounce函数

debounce函数所做的事情就是，强制一个函数在某个连续时间段内只执行一次，哪怕它本来会被调用多次。

它接收两个参数，第一个是要“去弹跳”的回调函数 fn，第二个是延迟的时间 delay。如

this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)

三、将Vue中的内容插入到HTML中：

1、v-text：单向文本绑定

单向绑定即在HTML中修改text并不会修改到Vue实例中，v-text用于操作纯文本，它会替代显示对应的data对象上的值。

①在标签特性中使用v-text

②简写{{ }}：将数据原原本本插入HTML中，{{  }}内还支持JS单个表达式，如{{ message.split('').reverse().join('') }}

<p v-text="name"></p>     //显示Mr.Wu
<p>Name:{{ name }}</p>    //显示Mr.Wu

{{此中可写：①data  ②methods()}}

③当使用v-once指令时，一次性地插值，当数据改变时，插值处的内容不会更新。 

2、v-html：能够向HTML中插入HTML语言

3、v-bind：将data引入HTML标签特性中,使用v-bind:(缩写：)实现数据绑定

①属性绑定

<a v-bind:href="url">baidu</a>

②方法绑定，在调用时，多次调用多次执行。

<a v-bind:href="getURL()">baidu</a>

4、v-on：绑定事件

    事件常用于调用方法，v-on:（简写@）可直接写事件处理函数，也可写需要调用的方法名称（可以省略（）)。

<button v-on:click="greet">Greet</button>

四、样式绑定

    表达式结果的类型可以是字符串，对象或者数组

1、class动态改变

将动态的样式绑定到class上，而静态的样式则直接用常规CSS实现。

<a href="url" class="link" :class="classObj">{{ url }}</a>

data:{
    classObj:{
        active:true,
        'text-danger':flase
    }
}

此例中，class为静态CSS，:class为动态绑定，this.isActive是判断条件，当条件设置为true时，active样式则添加到<a>中。

<div class="static" :class="{ active:isActive,'text-danger':hasError}"></div>

data{
	isActive:true,
	hasError:flase
}

此例中，渲染结果为<div class="static active"></div>

也可以绑定数据、计算属性、数组、对象等。

<div v-bind:class="[activeClass, errorClass]"></div>

当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。

2、动态绑定style

<a href="url" :style="[styleObj,isActive ? activeStyleObj:'']">{{ url }}</a>
    data:{
        styleObj:{color:'red',font-size:14px},
        activeStyleObj:{color:'blue'}    }  }

    :style是一个数组，接收多种样式，其中styleObj为静态的样式，当isActive为true时，使用activeStyleObj样式，为false时返回空字符串。绑定可以是对象、数组。

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

一个属性中可以有包含多个值的数组，常用于提供多个带前缀的值，这样写只会渲染数组中最后一个被浏览器支持的值。

五、Vue的实例属性与方法

    实例的属性和方法都有前缀$，如

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
vm.$watch('a', function (newValue, oldValue) {
  // 监听，这个回调将在 `vm.a` 改变后调用
})