一、内容绑定，事件绑定

1、v.text-设置标签的文本值

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v.text</title>
</head>
<body><div id="app">
<!--       默认输出message和info--><h2 v-text="message"></h2><h2 v-text="info"></h2>
<!--       差值输出 message和info--><h2 >{{message}}：差值部分</h2>
<!--       拼接符号输出--><h2 v-text="message+'拼接部分'"></h2><h2 >{{message+'拼接部分'}} ：差值部分</h2><h2 >{{message}}+ {{info}}</h2></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data:{message:"我和vue有个约会！",info:"我和js有个约会"}})
</script>
</body>
</html>

运行结果：

总结：

a、v-text指令的作用是设置标签的内容text content

b、默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容

c、使用拼接符“+”，可以将内容进行拼接

2、v.htm-设置标签的innerhtml

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-html指令</title>
</head>
<body><div id="app"><p v-html="content"></p><p v-text="content"></p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data:{content:"<a href='https://www.baidu.com/'>百度一下</a>"}})
</script>
</body>
</html>

运行结果：

总结：

a、v-html指令的作用是：设置元素的innerhtml

b、内容中有html结构会被解析为标签

c、 v-text指令无论内容是什么，只会解析为文本

3、v.on基础-为元素绑定事件

例1-单击双击事件

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-on指令基础</title>
</head>
<body><div id="app">
<!--       单击、双击事件--><input type="button" value="v-on指令-单击" v-on:click="doIt"><input type="button" value="v-on指令-简写" @click="doIt"><input type="button" value="v-on指令-双击" @dblclick="doIt"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',methods:{doIt:function(){alert("去做吧！");}}})
</script></body>
</html>

运行结果：

例2-this关键字可以访问定义在data中数据

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-on指令基础</title>
</head>
<body><div id="app"><h2 @click = "changeFood">{{food}}</h2></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var app = new Vue({el: '#app',data:{food:"西红柿炒蛋"},methods:{changeFood:function (){console.log(this.food); // 控制台输出日志this.food+=" 非常美味！"     }},})
</script>
</body>
</html>

运行结果：

初始展示、点击3次后展示

总结：

a、v-on指令的作用是：为元素绑定事件

b、事件名不需要写on

c、指令可以简写为@

d、绑定的方法定义在methods属性中

e、方法内部通过this关键字可以访问定义在data中数据

二、例-计数器

<!--本地应用-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo-计数器</title>
</head>
<body><div id="app">
<!--       计数器功能区域--><div class="input-num">
<!--           4、使用v-on将add、sub分别绑定给+、-按钮--><button @click="sub"> - </button>
<!--           3、使用v-text 将num设置给span标签--><span>{{num}}</span>
<!--           同4、--><button @click="add"> + </button></div></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>// 创建vue实例var app = new Vue( {el:"#app",//1、data中定义数据num，并赋初值1data:{num:1  },//2、methods中添加2个方法：add递增、sub递减methods:{//add方法判断num是否到达最大值，未到递增，到了弹出弹框提示add:function (){if(this.num<10){this.num++;}else{  alert('已达到最大值'); }   },//sub方法判断num是否到达最大值，未到递减，到了弹出弹框提示sub:function (){if (this.num>0){this.num--;}else { alert('已达到最小值'); }  }}    }    )
</script>
</body>
</html>

运行结果：

初始：

点击到最小：

点击到最大：

总结：

总结

a、创建vue示例时：el挂载点、data数据、methods方法

b、v-on指令的作用是绑定事件，简写为@

c、方法中通过this，关键字获取data中的数据

d、v-text指令的作用是：设置元素的文本值，简写为{{} }

e、v-html指令的作用是：设置元素的innerHtml

vue2.1-本地应用-内容绑定，事件绑定相关推荐

spinbox 上下箭头事件_[React] 3 - 自动绑定 (事件绑定)
1. 自动绑定 (事件绑定) 绑定this: React为什么要这么做? 是js中this绑定方式决定的,和react工作方式无关. 函数处理, 是作为回调传递的,这样就会丢失了上下文, 所以this ...
【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
angular移除事件绑定事件绑定_002-js的三种事件绑定方式
不说太多虚的,这次要聊的,是JavaScript的三种事件绑定方式. 方法1:直接在HTML中指定,称为"内嵌"会不会更合适一点? (1)直接在HTML的属性里写代码示例代码: ...
为元素绑定多个相同事件绑定事件的另一种方式复习介绍元素的事件绑定
为元素绑定多个相同事件 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
【JavaScript】事件绑定、事件解绑、常见事件类型、事件对象
文章目录事件认识事件事件绑定 - DOM 0级事件 - DOM 2级事件(事件侦听器事件监听) 事件解绑解绑dom0级事件解绑dom2级事件常见的事件类型 1. 鼠标事件 click ...
js基础（七）{事件的分类绑定事件函数中的this 字符串函数的传参规则严格模式}
JS中的常用事件什么叫做事件所谓的事件,是浏览器监听用户行为的一种机制. 比如,当用户使用鼠标 "点击" 一个按钮,会触发该按钮的"点击"事件如果此时我们 ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
设置log缓存_全局变量、事件绑定、缓存爆炸？Node.js内存泄漏问题分析
作者:elvinpeng,腾讯 WXG 前端开发工程师 Node.js 使用的是 V8 引擎,会自动进行垃圾回收(Garbage Collection,GC),因而写代码的时候不需要像 C/C++ 一 ...
微信小程序学习4：小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等.当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效 ...

vue2.1-本地应用-内容绑定，事件绑定

一、内容绑定，事件绑定

1、v.text-设置标签的文本值

2、v.htm-设置标签的innerhtml

3、v.on基础-为元素绑定事件

二、例-计数器

vue2.1-本地应用-内容绑定，事件绑定相关推荐

最新文章

热门文章