Vue.js 学习（一）

　　

基础实例

<!--挂载点，模板，实例之间的关系-->
<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>