Vue语法

hello Vue

<body>
    <div id="app">{{ msg }}</div>
</body>
<script>
    var vm  = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
        }
    })
</script>

单向绑定和双向绑定

v-bind单向绑定，v-model双向绑定

<body>
    <div id="app">
        单向绑定：
        <input type="text" :value="inputValueSingle">
        {{inputValueSingle}}
        <br>

        双向绑定：
        <input type="text" v-model:value="inputVaueDouble">
        {{inputVaueDouble}}
    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            inputValueSingle: "单向绑定的数据",
            inputVaueDouble: "双向绑定的数据"
        }
    })
</script>

结果

`v-on`绑定事件

<body>
    <div id="app">
        <!-- <input type="button" value="确定" v-on:click="show"> -->
        <input type="button" value="确定" @click="show">
    </div>
    <script>
        var vm  = new Vue({
            el: "#app",
            methods: {
                show() {
                    alert("hello vue")
                }
            },
        })
    </script>
</body>

事件修饰符

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件监听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发回调

.once 事件只触发一次

<body>
    <div id="app">
        <div @click="outDiv">
            <!-- 阻止事件冒泡，只弹出inNpt,不触发外部的outDiv事件 -->
            <input type="button" value="确定" @click.stop="inNpt">
        </div>

        <!-- 阻止默认行为，只触发事件，不跳转到百度 -->
        <a href="http://www.baidu.com" @click.prevent="linkHandle">去百度</a>
    </div>
    <script>
        var vm  = new Vue({
            el: "#app",
            methods: {
                outDiv() {
                    alert("outDiv")
                },
                inNpt() {
                    alert("inNpt")
                },
                linkHandle() {
                    alert("去百度事件")
                }
            },
        })
    </script>
</body>

`v-if`条件渲染

当v-if的表达式的值为true时，才会渲染

    <div id="app">
        <h1 v-if="awesome">vue is awesome</h1>
        <h1 v-else>oh no</h1>
    </div>

<script>
    let vm  = new Vue({
        el: "#app",
        data: {
            awesome: false
        }
    })
</script>

`v-for`列表渲染

    <ul id="app">
        <li v-for="(item,index) in items" :key="item.message">
            值：{{item.message}} 
            索引：{{index}}
        </li>
    </ul>

<script>
    let vm  = new Vue({
        el: "#app",
        data: {
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })
</script>

组件

私有组件

<body>
    <div id="app">
        <login></login>
    </div>
    <script>
        var vm  = new Vue({
            el: "#app",
            // 创建私有组件
            components: {
                // 组件名称
                login: {
                    template: "<h3>这是私有组件，组件名称是login</h3>"
                }
            }
        })
    </script>
</body>

全局组件

定义全局组件

Vue.component("Navbar", {
template: "<ul><li>首页</li><li>学员管理</li></ul>"
})

在其他文件中引用这个组件

    <div id="app">
        <Navbar></Navbar>
    </div>

<!-- 全局组件的js文件 -->
<script src="./a.js"></script>
<script>
    let vm  = new Vue({
        el: "#app",
    })
</script>

父子组件间传值-todolist

<body>
    <div id="app">
        <input type="text" v-model="todoValue">
        <input type="button" value="提交" @click="handleBtnClick">  
        <ul>
            <todo-item :content="item" :index="index" v-for="(item, index) in list"  @deletefa="handleItemDelete">
                <!-- {{ item }} -->
            </todo-item>
        </ul>
    </div>
    <script>
        // 全局组件
        // Vue.component("TodoItem", {
        //     props: ["content"],
        //     template: "<li>{{ content }}</li>"
        // })

        var vm  = new Vue({
            el: "#app",
            data: {
                todoValue: "",
                list: [],
            },
            methods: {
                handleBtnClick() {
                    if (this.todoValue != "") {
                        this.list.push(this.todoValue)
                    }
                    this.todoValue = ""
                },
                handleItemDelete(index) {
                    this.list.splice(index, 1)
                },
            },
            // 局部组件
            components: {
                TodoItem: {
                    // 父组件向子组件传值
                    props: ["content", "index"],
                    template: '<li @click="handleDelete">{{ content }}</li>',
                    methods: {
                        handleDelete() {
                            // 子组件向父组件传值
                            this.$emit("deletefa", this.index)
                        }
                    },
                }
            }
        })
    </script>
</body>

生命周期

<script>
    let vm  = new Vue({
        el: "#app",
        created() {
            // 页面渲染之前执行
            console.log("created")
        },
        mounted() {
            // 页面渲染完成之后执行
            console.log("mounted")
        }
    })
</script>

路由

    <div id="app">
        <router-link to="/">首页</router-link>
        <router-link to="/student">学生管理</router-link></router-link>
        <router-link to="/teacher">老师管理</router-link></router-link>

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>

<script src="./vue-router.js"></script>
<script>
    // 1. 定义路由组件
    const Welcome = { template: '<div>欢迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定义路由
    const routes = [
        { path: '/', redirect: '/welcome' }, //设置默认指向的路径
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 创建router实例，然后传routes配置
    const router = new VueRouter({
        routes // （缩写）相当于 routes: routes
    })

    // 4. 创建和挂载根实例
    let vm  = new Vue({
        el: "#app",
        router
    })
</script>

结果

posted @ 2020-10-11 21:11 lovy11111 阅读(192) 评论(0) 收藏举报

刷新页面返回顶部