20190217-vue学习第二课

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命令，可以在浏览器控制台中显示变量值，方便开发人员进行调试。

代码如下：

前台显示：