基础实例
<!--挂载点,模板,实例之间的关系--> <h1></h1> <script> new Vue(//实例 { el:'h1',//挂载点 template:'<span>{{msg}}</span>',//模板 data:{ msg:'Hello World!' } } ) </script>
注意:template 模板需要根节点,否则会报错。Component template requires a root element, rather than just text. (found in <Root>)
<h1>{{number}}}</h1> //插值表达式 (声明式渲染_官网说法) <h1 v-text="number"></h1> //指令 会进行转义 <h1 v-html="number"></h1> //指令 不进行转义
事件绑定
<div id="root" v-on:click="handleClick">{{msg}}</div> //v-on:click 指令绑定点击事件 @click (简写) <script> new Vue( { el: '#root', data: { msg: 'Hello World!' }, methods: { handleClick:function () { this.msg=this.msg.split('').reverse().join(''); } } } ) </script>
属性绑定
<div id="root" v-bind:title="'this is '+ msg">hello world</div> <!--相当于 title="Hello World!" v-bind: 可以简写为 :--> <!--指令=后面跟的是js表达式,没有引号的为Vue实例data中的变量--> <script> new Vue( { el: '#root', data: { msg: 'Hello World!' } } ) </script>
双向绑定
<div id="root"> <input v-model="msg" type="text"> <!--v-model 来实现双向绑定--> <div>{{msg}}</div> </div> <script> new Vue( { el: '#root', data: { msg: 'Hello World!' }, methods: { handleClick:function () { this.msg=this.msg.split('').reverse().join(''); } } } ) </script>