Using VueJS to Interact with the DOM笔记

在vue中，通过new Vue实例，所有的变量、相应事件的函数，都通过js的构造函数就设置好的，（怎么实现的呢？）

而且，在vue模板中，如果需要打印变量的值，或者函数的返回结果，直接用`{{ xxx } }` 直接调用，而不用加this 。但是在vue的method中，如果要引用data的属性，则需要加上this.。看上去特别像C++这样的语言，然而你如果去细扣其中的语法，又完全解释不通？vue.js是怎么做到的呢？也许他如何做到的，对于现在的我来说压根就不重要。

v-bind 数据绑定

`{{ dataMember }}` 两个大括号的用法可以用在HTML中，但是没法用在HTML元素的属性中，属性的值不会被VUE自动替换。所以这个时候就需要vue的指令v-bind , 简写就是`:`

<div id='app'>
	<p> {{ sayHello() }} - <a v-bind:href='link'>Google</a> </p>
</div>
<script>
  new Vue({
  	el:'#app',
  	data: {
      title: "Hello World", 
      link: "http://google.com",
  	},
  	methods: {
  	  sayHello:function(){
        return this.title;
  	  }
  	}
  });
</script>

如上这样去写就能把a标签的href属性，通过v-bind指令和Vue实例中的link变量绑定到一起，他的链接地址永远和link的值是一致的。

v-html指令

`{{ } }` 这种形式只会被vue替换为html的文本，他不能放入到html元素的属性中，同时他会将HTML转义为普通文本。如果想把某段代码直接转为HTML，需要在html元素标签上加上v-html指令，比如：

<p v-html=' finishedLink'> </p>

v-on 事件绑定

通过v-bind可以把vue的数据传送到页面上展示出来，而v-on指令则可以监听HTML事件，并进行对应的逻辑处理。比如：<button v-on:click='increase'>Click me</button>, 这里的·increase就是定义在vue实例中methods的一个事件处理函数，并且通过 v-on指令绑定在button元素的点击事件上了。当button被点击，increase函数就会被调用。v-on可以用@符号简写。

v-on指定还支持modifier，可以实现stop，prevent或者键盘事件中，支持.enter判断等等

v-model 数据双向绑定

对于input这样控件，当使用v-model和某个data域中的属性进行双向绑定后，input输入变化时，变量值自动跟着变，并且会同步到所有地方。

Computed 特性

有些变量之间会有依赖关系，当有多个函数需要修改A时，必须在函数对B进行修改。在不同函数中也许修改A的逻辑不变但修改B逻辑可能是相同的。在Vue中，可以把B变成一个methods，通过函数来计算，但是如果变量C、D变化时，也许计算一遍B，因为B是通过methods实现。为了节省计算资源，Vue的实例中有一个computed选项，引用这里的变量可以和data中的一样，直接引用即可，而且他比methods的好处在于，只在修改的依赖变量时，才会重新计算。

watch特性

除了computed, 还可以使用watch针对变量值变化，进行相应逻辑处理。watch是需要指定对某个变量进行监听，并且且内部逻辑可以异步执行，可以通过闭包方式，实现比较复杂逻辑

vue操作CSS

前端的逻辑主要是展示数据，响应用户操作，和修改样式。vue通过v-bind, v-on能够帮我们实现DOM数据和事件监听。而且vue通过绑定class和style两个属性，可以很便捷的修改HTML元素的样式。这两个属性，既可以直接绑定data里面的变量，也可以通过对象的形式，还能用数组的方式实现多个值共同起作用。class的多个值，表示要多个类的样式，style的多个值，表示要设置多个css属性的值。