三、基本语法

一、helloworld

 <div id="app">
        {{msg}}
        <p v-for="item of arr">{{item}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world",
                arr:[1,2,3]
            }
        }).$mount("#app")
    </script>

二、for-key

<div id="app">
        <!-- key 元素的标识符，遍历数据渲染 -->
        <p v-for="(item,index) of arr" :key="item.id"><input type="checkbox"/>{{item.name}}{{index}}</p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return {
                    arr:[
                        {id:001,name:"晓星尘"},
                        {id:002,name:"宋子琛"},
                        {id:003,name:"薛洋"},
                    ]
                }
            }
        })
</script>

三、v-if

<!-- v-if  v-show v-html-->
    <div id="app">
        <p v-if="flag">显示隐藏</p>
        <p v-show="isShow">显示隐藏</p>
        <div v-html="msg"></div>
    </div> 
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    flag:true,
                    isShow:true,
                    msg:"<h1>hello world</h1>"
                }
            }
        })
    </script>

四、input

 <!-- v-model 可以实现双向数据绑定 
    @keyup.enter  可以触发enter-->
    <div id="app">
        <input type="text" v-model="keyword" @keyup.enter="handleUp">
        {{keyword}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    keyword:"成都"
                }
            },
            methods: {
                handleUp(e){
                    console.log(this.keyword)
                }
            }
        })
    </script>

五、watch

 <div id="app">
        {{total}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    firstName:1,
                    lastName:2,
                    total:3
                }
            },
            /* 监听data中的值，只要值改变，函数就会触发 */
            watch: {
                firstName(){
                    this.total = this.firstName + this.lastName
                },
                lastName(){
                    this.total = this.firstName + this.lastName
                }
            },
        })
    </script>

六、class

<div id="app">
        <p :class="{active:isActive}">hello world</p>
        <p :class='["one",flag?"two":""]'></p>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    isActive:true,
                    flag:true
                }
            }
        })
    </script>

七、方法

 <div id="app">
        <p>{{msg}}</p>
        <button @click="hanldeClick">toggle</button>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data(){
                return{
                    msg:"hello world"
                }
            },
            methods: {
                hanldeClick(){
                    this.msg = "good"
                }
            },
        })
    </script>

八、计算属性

<div id="app">
        {{total}}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data(){
                return{
                    firstName:"zhang",
                    lastName:"san"
                }
            },
            /* 当参与计算的值发生改变时，总值会改变   */
            computed: {
                total(){
                    return this.firstName + this.lastName
                }
            },
        })
    </script>

九、toduList

<div id="app">
        <div>
            姓名：<input type="text" v-model="name">
            年龄：<input type="text" v-model="age">
            <button @click="handleAdd">添加</button>
        </div>
        <div>
            <p v-for="item of arr">{{item.name}}:{{item.age}}<button @click="handleDet(item.name)">删除</button></p>
        </div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return {
                    arr:[
                        {name:"yang",age:18}
                    ],
                    name:"",
                    age:""
                }
            },
            methods: {
                handleAdd(){
                    if(this.name && this.age){
                        this.arr.push({
                            name:this.name,
                            age:this.age
                        })
                        this.name="";
                        this.age=""
                    }
                },
                handleDet(name){
                    var index = this.arr.findIndex(item>=item.name == name)
                    console.log(index)
                }
            },
        })
    </script>