慕课网Vue-去哪了1~ 2

根据vue去哪了教程，本教程直接采用<script>标签引入vue库的方式，进行vuejs的编码学习。

官网下载开发版本，因为它可以提供完整的代码提示和报错。

一实现最简单的helloworld

原生js实现

<body>
    <div id="app"></div>
    <script>
        var app = document.getElementById('app');
        app.innerHTML = 'hello world';
    </script>
</body>

vue实现

<div id="app">{{content}}</div>
<script>
        var app = new Vue({
            el:'#app',
            data:{
                content: 'hello world1'
            }
        })  
</script>

间隔两秒变化数据

<script>
        var app = document.getElementById('app');
        app.innerHTML = 'hello world';
        setTimeout(function(){
            app.innerHTML = 'hello';
        },2000)
</script>

vue

<script>
        var app = new Vue({
            el:'#app',
            data:{
                content: 'hello world1'
            }
        })
        setTimeout(function(){
            app.$data.content = 'hello2';
        },2000)
        
</script>

本节源码

<!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>
    <script src= './vue.js'></script>
</head>
<body>
    <div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                content: 'hello world1'
            }
        })
        setTimeout(function(){
            app.$data.content = 'hello2';
        },2000)
        
    </script>
    <!-- <script>
        var app = document.getElementById('app');
        app.innerHTML = 'hello world';
        setTimeout(function(){
            app.innerHTML = 'hello';
        },2000)
    </script> -->
</body>
</html>

View Code

二 vue 实现简单的tudolist功能

1.了解标签指令 v-for，用以循环数据，模板指令v-on用以绑定事件，v-model实现数据的双向绑定，一般用来获取和修改标签内容。最后用puth方法添加数组元素。

<!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>todolidt</title>
    <script src= './vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inputValue' />
        <button v-on:click='handleBtnClick'>提交</button>
        <ul>
            <li v-for='item in list'>{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:['第一课的内容','第二课的内容'],
                inputValue:''
            },
            methods:{
                handleBtnClick(){
                    this.list.push(this.inputValue),
                    this.inputValue = ''
                }
            }
        })
        
    </script>
</body>
</html>

View Code

实现：input输入内容，点击提交，将数据动态存放到下面li中。

2.Vue使用的MVVM设计模式

① 回顾传统的前端开发使用的mvp设计模式

model：数据 / 模型层。 ajax

presenter：控制层。处理函数

view：视图层。html里面的dom元素

解释：当dom元素发生改变（点击按钮），控制器里的代码就会去执行。

控制器负责所有的业务逻辑，控制器可以去调模型层，发ajax请求。

控制层处理业务逻辑之后，会通过dom去改变视图view。

交互：视图层发出事件交给控制器，控制器要么去调用ajax获取数据，要么直接操作dom元素去改变视图

当使用mvp设计模式进行编程时，大量的代码都在presenter里面，这些代码中很大部分都是在进行dom操作

mvvm设计模式：

model：存储数据，view：显示数据，它没有p层，取而代之的是vm层。而vm层并不需要自己来编写，它是vue自带的。

当我们使用mvvm编写代码时，不需要关注vm是怎么实现的，它是vue内置的。所以我们编码的重点在视图层和模型层。

回到项目，我们所写的模板标签就是v层，在script写的数据就是m层，并没有进行任何的dom操作。

我们写的代码都是在对数据进行操作，而数据变化，页面v层就会自动发生变化，这样的实现就是vm层操作的。

vm层是vue自带的，vue会监听到数据变化，去改变视图层。也会监听视图层的事件触发,然后通过vm层调用你的逻辑代码。通过这些代码改变m层数据，当数据发生变化，vm层又会自动把数据映射到视图层。

优点：当我们使用mvvm开发时，我们只需要关注m层开发就可以，我们把数据做了修改，页面会自动变化；同时页面上的变化vue实例

也能感知到，可以更方便操作数据。

所以：

jQuery开发代码：面向dom开发

vue开发：面向数据编程。且mvvm开发代码量会显著减少（因为极大的简化了dom操作）

3. 前端组件化

解：把页面由原来的整体，切分成一个一个部分，每个部分就称之为一个组件

自我理解：认为前端组件化就是把一个主页面分成多个子页面。

每个组件就是页面上的一个区域

4.使用组件化修改之前的todolist

①全局组件的使用

Vue.component ：vue提供的创建全局组件的方法。

v-bind：向子组件传递一个绑定值

props：从父组件接收内容

<!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>todolidt</title>
    <script src= './vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inputValue' />
        <button v-on:click='handleBtnClick'>提交</button>
        <ul>
            <!-- <li v-for='item in list'>{{item}}</li> -->
            <todo-item v-bind:content="item" v-for='item in list' ></todo-item>
        </ul>
    </div>
    <script>
        Vue.component("TodoItem",{
            props:['content'],
            template:"<li>{{content}}</li>"
        })
        var app = new Vue({
            el:'#app',
            data:{
                list:['第一课的内容','第二课的内容'],
                inputValue:''
            },
            methods:{
                handleBtnClick(){
                    this.list.push(this.inputValue),
                    this.inputValue = ''
                }
            }
        })
        
    </script>
</body>
</html>

View Code

②局部组件使用

定义一个对象，注册到vue实例中。

 var TodoItem = {
           props:['content'],
           template:"<li>{{content}}</li>" 
       }
        var app = new Vue({
            el:'#app',
            components:{
                TodoItem:TodoItem //命名不变
            },
            data:{...

源码：

<!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>todolidt</title>
    <script src= './vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inputValue' />
        <button v-on:click='handleBtnClick'>提交</button>
        <ul>
            <!-- <li v-for='item in list'>{{item}}</li> -->
            <todo-item v-bind:content="item" v-for='item in list' ></todo-item>
        </ul>
    </div>
    <script>
        //Vue.component("TodoItem",{
            //props:['content'],
           // template:"<li>{{content}}</li>"
       // })
       var TodoItem = {
           props:['content'],
           template:"<li>{{content}}</li>" 
       }
        var app = new Vue({
            el:'#app',
            components:{
                TodoItem:TodoItem
            },
            data:{
                list:['第一课的内容','第二课的内容'],
                inputValue:''
            },
            methods:{
                handleBtnClick(){
                    this.list.push(this.inputValue),
                    this.inputValue = ''
                }
            }
        })
        
    </script>
</body>
</html>

View Code

作用：把页面上的内容封装到组件中。

5.组件传值

上一讲了解父组件向子组件传值。

本讲为子组件向父组件传值

例：点击当前li，删除本身。

<!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>todolidt</title>
    <script src= './vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inputValue' />
        <button v-on:click='handleBtnClick'>提交</button>
        <ul>
            <!-- <li v-for='item in list'>{{item}}</li> -->
            <todo-item v-on:delete="handleItemDelete" 
            v-bind:content="item" 
            v-bind:index="index" 
            v-for='(item,index) in list' 
            ></todo-item>
        </ul>
    </div>
    <script>
        //Vue.component("TodoItem",{
            //props:['content'],
           // template:"<li>{{content}}</li>"
       // })
       var TodoItem = {
           props:['content','index'],
           template:"<li @click='handleItemClick'>{{content}}</li>",
           methods:{
               handleItemClick: function(){
                  this.$emit("delete",this.index)
               }
           }
       }
        var app = new Vue({
            el:'#app',
            components:{
                TodoItem:TodoItem
            },
            data:{
                list:['第一课的内容','第二课的内容'],
                inputValue:''
            },
            methods:{
                handleBtnClick(){
                    this.list.push(this.inputValue),
                    this.inputValue = ''
                },
                handleItemDelete(index){
                    this.list.splice(index,1)
                }
            }
        })
        
    </script>
</body>
</html>

View Code

解：v-on: 简写 @

子组件传值需要向父组件触发事件$emit（因为list数组是在父组件中的，所以子组件需要向父组件提交删除的数据，让父组件删除）

this.$emit('delete') //点击子组件时，向外触发delete事件

父组件用@delete监听

@delete="监听事件" //父组件监听到子组件触发的delete去执行监听事件（在父组件模板中，创建子组件的同时，也监听子组件的删除事件，一旦监听触发，则去执行）

总结：

v-bind 父组件向子组件传值（简写：），用props接收值

$emit 向上层触发事件传值，父组件‘@事件名’ 监听，接收传值执行事件

不用组件编码：

<!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>todolidt</title>
    <script src= './vue.js'></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model='inputValue' />
        <button v-on:click='handleBtnClick'>提交</button>
        <ul>
            <li v-for='(item,index) in list' v-on:click='handleBtnDelete(index)'>{{item}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                list:['第一课的内容','第二课的内容'],
                inputValue:''
            },
            methods:{
                handleBtnClick(){
                    this.list.push(this.inputValue),
                    this.inputValue = ''
                },
                handleBtnDelete(index){ //index可改任意值
                  alert(index)
                  this.list.splice(index,1)
                }
            }
        })
        
    </script>
</body>
</html>

View Code

在大型项目中，使用组件化更利于维护。

6.小结

①通过script标签引入vue.js文件，进行基础代码编写

②数据双向绑定

③父子组件传值

posted @ 2022-03-03 14:43 以深阅读(37) 评论(0) 编辑收藏举报

刷新页面返回顶部

以深

有什么话想说吗？不要懒惰。

慕课网Vue-去哪了1~ 2

公告