谷粒商城 day7 前端vue

最新推荐文章于 2024-07-21 19:21:16 发布

be_lxx1

最新推荐文章于 2024-07-21 19:21:16 发布

阅读量513

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/be_lxx1/article/details/123345071

版权

本文介绍了Vue.js的MVVM思想，通过实例展示了声明式渲染和双向数据绑定功能。讲解了v-model、v-on等指令的使用，以及v-html、v-bind等特性。还提到了Vue的组件化开发、生命周期以及使用Vue脚手架进行模块化开发的方法。同时，文章涵盖了Element-UI的运用，展示了如何在实际项目中应用Vue技术。

摘要由CSDN通过智能技术生成

MVVM思想

VUE

声明式渲染功能实例

只要说明vue管控的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id ="app">
        <h1>{{name}},这是不是真的VUE呀</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"李某"
            }
        });
    </script>
</body>
</html>

双向绑定：模型变视图变；视图变模型跟着变

事件绑定

v-xx：指令

1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的指令来简化对dom的一些操作

2、声明方法来做更复杂的操作

</head>
<body>
    <div id ="app">
        <input type="text" v-model="num">
        <button v-on:click="cancel">good</button>
        <h1>{{name}},这是不是真的VUE呀,有{{num}}个人相信</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name:"李某",
                num:108
            },
            methods:{
                cancel(){
                    this.num--;
                }
            }
        });
    </script>
</body>

v-html：