20190217-vue学习第二课

一、显示数据的三种方式：
1、{{}}；
2、v-text;
3、v-html;
三种数据显示方式区别在于，{{}}和v-text变量内容为什么，就显示什么，而v-html则会对变量内容进行解析，显示为解析后的内容；
如图：变量值都设定为h1测试/h1，只有v-html对变量值进行了解析，显示为大标题测试，而{{}}和v-text则把h1/h1也显示出来了。

代码：

二、button单双击：click事件：
1、v-on:click：单击事件；
2、v-on:dblclick：双击事件；
首先要在script下的export default中的data中定义变量，然后在methods中进行单双击事件的函数编写。
如图：在data中定义变量test_sxbd后，在methods中编写单击函数click_button、双击函数dbclick_button。

在template中的部分如图：

前台显示：

三、属性绑定与双向属性绑定：
1、属性绑定：v-bind
代码如下：

前台显示：

2、双向属性绑定：v-model
双向属性绑定和属性绑定的不同在于，创建一个文本框使用双向属性绑定，在修改文本框显示值后，会对变量原值修改，属性绑定则不会。
代码如下：

前台显示：

在这里，我定义的文本框显示变量原值为：双向绑定测试，在下方我添加了一个变量值的显示方便看到效果，如图中所示：在我修改文本框内容后，下方显示变量值也发生了变化。
四、调试命令：console.log
在创建函数的时候加上console.log命令，可以在浏览器控制台中显示变量值，方便开发人员进行调试。
代码如下：

前台显示：