vue学习笔记2

v-text实例&&v-html实例

HTML

v-text渲染效果更好

<div id="app"><span>{{message}}</span>=<span v-text="message"></span><br><span>{{dodo}}</span><!-- 安全性差，少用可能引起XXS攻击 --><span v-html="dodo"></span></div>

JavaScript

var app= new Vue({el:'#app',data:{message:"hello world",dodo:"<h2>hello</h2>"}})

结果

v-on实例

on事件的绑定

HTML

<div id="app">比赛得分{{count}}<br><button v-on:click="addcount" >加分</button><button v-on:click="jiancount" >减分</button><br><!-- secondCount数据源，实现按回车键增加文本框输入的大小 --><input type="text"  v-on:keyup.enter="onEnter" v-model="secondCount"></div>

JavaScript

用parseInt（）方法，让输入的string到int的转变

var app =new Vue({el:'#app',data:{count:1,secondCount:1},methods:{addcount:function(){this.count++;},jiancount:function(){this.count--;},onEnter:function(){

//用parseInt（）方法，让输入的string到int的转变     this.count=this.count+parseInt(this.secondCount);}}})