vue.js 入门

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>vuetitle>
    script src="vue.js">script>
head>



body>
    div id="test1">
        div :title="title" @click="handleClick">{{title}}div>

        input v-model="content"/>
        div>{{content}}div>

        姓：input v-model="FirstName"/>
        名：input v-model="LastName"/>
        div>{{FullName}}div>

        div>计数:{{count}}div>

        div v-if="show">hellow word【点击隐藏显示】div>
        div v-show="show">hellow word【点击隐藏显示】div>
        button @click="showClick">togglebutton>

        ul>
            li v-for="(item,index) of list" :key="index">{{item}}li>
        ul>

        input v-model="inputValue" />
        button @click="todoList">提交button>
        ul>
            li v-for="(item, index) of todolist" :key="index">{{item}}li>
        ul>
    div>

    script>
        new Vue({
            el: "#test1",
            data: {
                content: "嘿嘿",
                title: "This is hellow word",
                FirstName: "",
                LastName: "",
                count: 0,
                show: true,
                list: [1,2,3,4,5],
                inputValue: "",
                todolist: [],
            },
            methods: {      //函数定义属性
                handleClick: function () {
                    this.content = "哈哈"     //点击改变content数据
                },
                showClick: function () {
                    this.show = !this.show
                },
                todoList: function () {
                    this.todolist.push(this.inputValue),    //将获取到的值加入列表
                    this.inputValue = ""
                }
            },
            computed: {     //计算属性
                FullName: function () {
                    return this.FirstName + ‘ ‘ + this.LastName
                }
            },
            watch: {    //侦听器
                FullName: function () {
                    this.count ++
                }
            }
        })
    script>
body>
html>