Vue2.5入门教程

系统管理员 2022-09-04 13:53 143阅读 0赞

### 文章目录 ###

*   *  1、课程介绍
     *  2、Vue基础语法
     *   *  2-1、创建第一个Vue实例
         *  2-2、挂载点，模板与实例
         *  2-3、Vue实例中的数据，事件和方法
         *  2-4、Vue中属性绑定和双向数据绑定
         *  2-5、Vue中的计算属性和侦听器
         *  2-6、v-if，v-show与v-for指令
     *  3、Vue中的组件
     *   *  3-1、todolist功能开发
         *  3-2、todolist组件拆分
         *  3-3、组件与实例的关系
         *  3-4、实现todolist的删除功能
     *  4、Vue-cli的使用
     *   *  4-1、vue-cli的简介与使用
         *  4-2、使用vue-cli开发TodoList
         *  4-3、全局样式与局部样式

## 1、课程介绍 ##

基础知识 > 案例实践 > TodoList > Vue-cli > TodoList

## 2、Vue基础语法 ##

### 2-1、创建第一个Vue实例 ###

### 2-2、挂载点，模板与实例 ###

### 2-3、Vue实例中的数据，事件和方法 ###

### 2-4、Vue中属性绑定和双向数据绑定 ###

### 2-5、Vue中的计算属性和侦听器 ###

### 2-6、v-if，v-show与v-for指令 ###

## 3、Vue中的组件 ##

### 3-1、todolist功能开发 ###

### 3-2、todolist组件拆分 ###

### 3-3、组件与实例的关系 ###

### 3-4、实现todolist的删除功能 ###

<!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>Vue入门</title>
        <script src="./vue.js"></script>
    </head>
    
    <body>
        <div id='root'>
            <div>
                <input v-model="inputValue" />
                <button @click="handleSubmit">提交</button>
            </div>
            <ul>
                
                
                <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete='handleDelete'>
                </todo-item>
            </ul>
        </div>
        <script> // 子组件 :content就是绑定了content属性 // 父组件给子组件传递content参数，通过属性传递，通过props接收 Vue.component('todo-item', { props: ['content', 'index'], // 接受从外部传入的参数 template: '<li @click="handleClick">{ {content}}</li>', methods: { handleClick: function () { // console.log('handleClick',1); // 子组件数据要删除，必须在父组件里面对应渲染子组件那条数据删除 // 子组件和父组件通信，发布订阅模式 // 这是子组件向外部（发布一个事件）父组件传递数据 this.$emit('delete', this.index) } } }) // 父组件 new Vue({ el: '#root', data: { inputValue: '', list: [] }, methods: { handleSubmit: function () { this.list.push(this.inputValue) this.inputValue = '' }, // @delete='handleDelete' 监听子组件的变化 handleDelete: function (e) { console.log('handleDelete', e); this.list.splice(e, 1); } }, }) </script>
    </body>
    
    </html>

## 4、Vue-cli的使用 ##

### 4-1、vue-cli的简介与使用 ###

`脚手架`

`npm run serve`

App.vue
    <template>
        <div id="app">
            
            <HelloWorld msg="Welcome to Your Vue.js App" />
            <div>
                <el-button>el-button</el-button>
            </div>
        </div>
    </template>
    
    <script>
        import HelloWorld from './components/HelloWorld.vue'
    
        export default {
            name: 'app',
            components: {
                HelloWorld
            }
        }
    </script>
    
    <style>
      
    </style>

HelloWorld.vue
    <template>
      <div>
        <h1>{
       { msg }}</h1>
        <p>
          For a guide and recipes on how to configure / customize this project,<br>
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      // props: ['msg'],  // 这个是可行的
      props: { // 接收父组件传递数据参数
        msg: String  
      }
      // 跟上一节的形式不一样
    	// props: ['content', 'index'], 接受从外部传入的参数
    }
    </script>
    
    <style scoped>
    
    </style>

### 4-2、使用vue-cli开发TodoList ###

App.vue
    <template>
        <div id="app">
            <div>
                <el-button>el-button</el-button>
            </div>
            
            <TodoList msg="Welcome to Your Vue.js App" />
    
        </div>
    </template>
    
    <script>
        // 注册组件
        import TodoList from './components/TodoList.vue'
    
        export default {
            name: 'app',
            components: {
                TodoList
            }
        }
    </script>
    
    <style>
        #app {
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
    </style>

TodoList.vue
    <template>
        <div>
            <h1>{
       { msg }}</h1>
            <div>
                <input v-model='inputValue' type="text" name="" id="">
                <button @click='handleSubmit'>提交</button>
            </div>
            <div>
                <ul>
                    <TodoItem v-for='(item,index) of list' :key='index' :content='item' :index='index'
                        @delete='handleDelete'>
                    </TodoItem>
                </ul>
            </div>
        </div>
    </template>
    
    <script>
        // 注册组件
        import TodoItem from './TodoItem.vue'
    
        export default {
            name: 'TodoList',
            components: {
                TodoItem
            },
            data() {
                return {
                    inputValue: '',
                    list: []
                }
            },
            methods: {
                handleSubmit() {
                    this.list.push(this.inputValue);
                    this.inputValue = ''
                },
                handleDelete(index) {
                    this.list.splice(index, 1)
                }
            },
            // props: ['msg'],  // 这个是可行的
            props: { // 接收父组件传递数据参数
                msg: String
            }
            // 跟上一节的形式不一样
            // props: ['content', 'index'], 接受从外部传入的参数
        }
    </script>
    
    <style scoped>
        ul {
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
    </style>

TodoItem.vue
    <template>
        <div>
            <span @click='handleDelete'>{
       {content}}</span>
        </div>
    </template>
    
    <script>
        export default {
            name: 'TodoItem',
            props: ['content', 'index'],
            methods: {
                handleDelete() {
                    this.$emit('delete', this.index)
                }
            },
        }
    </script>
    
    <style scoped>
        span{
            background-color: #ff4f00;
        }
    </style>

### 4-3、全局样式与局部样式 ###

`scoped`