20190216VUE学习第二节

一，三种变量显示方法

 

1. {{msg1}}  两个双括号显示，在前台显示括号内的值，例如：变量为<h1>test<h1>，前台显示为：<h1>test<h1>；
2. v-text="msg1"  例如：变量为<h1>test<h1>,前台显示为：<h1>test<h1>；
3. v-html="msg1" v-html可以解析变量内容取值。例如：变量为<h1>test<h1>，前台显示为：test；

代码：

前台：

 

二，v-bing属性绑定

 

如图在新建div中绑定title属性，"title_name"变量在data中定义为：燃烧我的卡路里

前台显示为：

三，双向绑定

 

新建两个div，在第二个div中加上input文本框，文本框内容为输入值"张三的歌"

第三个div中v-text动态显示"张三的歌"，同时在上一步第一个div 中title注释也为"张三的歌"

 

四，button双击单击事件

 

在script中data定义参数test1，test2，

在methods中新建函数mybutton1，mybutton2，函数里title_name（双向绑定）为上一步文本框输入内容

在vue代码中两个div中放入两个button分别为单击按钮，双击按钮。

test1，test2参数作为button的名字，单击事件为：v-on:click="mybutton1"

双击事件为v-on:cblclick="mybutton2"

前台单击按钮效果为：

前台双击按钮效果为：

五，js中的console.log() 调试命令

 

console.log能够在浏览器控制台中输入值，以便开发者调试。

 

如图所示，‘张三的歌’为上一步调试单击事件显示的内容，在单击事件中加入console.log后，F12在控制台中能看到调试的结果。