导语

第一步需要导入vuejs文件到页面
<script src="https://vuejs.org/js/vue.js" type="text/javascript"></script>

修改定界符
delimiters: ['[%', '%]']

双向数据绑定

<div id="app">
    <input type="text" v-model="message"/>
    <h2>[% message %]</h2>
</div>

<script>
new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //保存数据
    data:{
        message:""
    }
});
</script>

v-show

<div id="app">
    <div class="error" v-show="!content">请输入内容：</div>
        <textarea v-model="content"></textarea>
    <input type="button" v-show="content" value="提交"/>
</div>

<script>
new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //保存数据
    data:{
        content:""
    }
});
</script>

事件绑定

<div id="app">
    <form action="demo.html" 
        v-on:submit="submitForm">
            <input type="submit" value="提交">
    </form>
</div>

<script>
new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //写所有的方法
    methods:{
        submitForm: function(e){
            //废除默认行为
            e.preventDefault();
            alert("点我做啥？");
        }
    }
});

</script>

v-on:submit="submitForm" 可以简写成 @submit="submitForm"
e.preventDefault(); 这是取消默认事件的方法，也可以写到HTML中
修改后 @submit.prevent="submitForm" 这样写，在function中就不需要写 e.preventDefault(); 这个方法了

组件开发

<div id="app">
    <counter heading="喜欢"></counter>    
    <counter heading="不喜欢"></counter> 
</div>
 
<!-- 模板 默认是不解析的 -->
<template id="counter-template">
    <div>
        <h1>[% heading %]</h1>
        <button
        @click="count += 1"
        >[% count %]</button>
    </div>
</template>


<script>

//自定义的组件
Vue.component('counter',{
    //修改定界符
    delimiters: ['[%', '%]'],
    //指定模板
    template:'#counter-template',
    //指定外界传入的参数
    props:["heading","color"],
    //指定变量
    data : function(){
        return { count : 0 };
    }
});

//实例化vue
new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app'
}

</script>

computed

翻译过来就是计算后的属性

computed使用场景：用于处理需要处理后的属性

<div id="app">
    <input type="text" v-model="fistName"/>
    [% username %]
</div>

new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //保存数据
    data:{
        fistName:"li",
        lastName:"si",
    },
    //计算后的属性
    computed:{
        username:function(){
            return this.fistName+" "+this.lastName;
        }
    }
});

处理列表数据

<div id="app">
    <ul>
        <li v-for="task in tasks">
            [% task.body %]
        </li>
    </ul>
</div>

new Vue({
    // 修改定界符
    delimiters: ['[%', '%]'],
    //指定绑定的节点
    el:'#app',
    //保存数据
    data:{
        tasks:[
            {body:"go to movie1",completed:true},
            {body:"go to movie2",completed:true},
            {body:"go to movie3",completed:false},
            {body:"go to movie4",completed:true},
            {body:"go to movie5",completed:true},
        ]
    }
});