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

蔚落 2022-05-24 02:51 283阅读 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 ###

上面的代码使用了三个指令：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进行修改：

<!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>