VUE实战项目开发--vue起步-蒲公英云

VUE实战项目开发--vue起步

蔚落 2022-05-24 02:51 347阅读 0赞

一个vue的Hello World实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">{
   {content}}</div>
    <script>
      // var dom = document.getElementById('app');
      // dom.innerHTML = 'hello world'
      var app = new Vue({
          el: '#app',
          data: {
              content: 'hello world'
          }
      })
    </script>
</body>
</html>
var app = new Vue({
          el: '#app',
          data: {
              content: 'hello world'
          }
      })

上面的这段代码：new出一个实例，el表示实例负责管理的范围，让这个实例接管id=app这个标签里的所有内容。

定义了一个data数据，再通过插值表达式{ {}}把data里的content数据插入进去。

一个简单的TodoList

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TodoList</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: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

上面的代码使用了三个指令：v-for、v-model、v-on

分别代表的作用如下：

v-for：遍历list数组
v-model：双向数据绑定，data里的inputValue与input标签里的inputValue变化是一致的
v-on：绑定事件，在这里是绑定了一个click点击事件

注意：MVVM模式的讲解：

M层：model数据层
V层：视图层
VM层：通过vue实现对M层和V层的控制，通过VM层的各种操作可以改变数据层(model层)，然后再映射到视图层(view层)。面向数据编程，减少了对DOM的操作。

组件化的开发-

组件化开发：每一个组件就是页面上的一个区域。

通过组件化的思想对TodoList进行修改：

<!--** 使用组件化思想的TodoList-->
<!--** component: 创建全局组件的方法-->
<!--** props: 接受父组件的数据-->
<!--** template: 子组件的模板-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TodoList</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <button @click="handleBtnClick">提交</button>
        <ul>
            <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>"
//        })
        //局部组件的使用,还需要在app这个实例中注册
        var TodoItem={
            props: ['content'],
            template:"<li>{
   {content}}</li>"
        }
        var app = new Vue({
            el: '#app',
            //局部组件的注册
            components: {
                TodoItem: TodoItem
            },
            data: {
                list: [],
                inputValue: ''
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                }
            }
        })
    </script>
</body>
</html>

简单的组件传值

v-bind: 父组件向子组件传值（可以省略为 : ）
props: 接受父组件的数据
template: 子组件的模板
@delete=”handleItemDelete”：监听子组件delete这个事件，一旦删除就会执行父组件中的handleItemDelete方法
$emit：子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TodoList</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item v-bind:content="item"
                       v-bind:index="index"
                       v-for="(item, index) in list"
                       @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>
    <script>
        //局部组件的使用,还需要在app这个实例中注册
        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: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
                handleItemDelete: function (index) {
                    this.list.splice(index,1);
                }
            }
        })
    </script>
</body>
</html>