Vue 起步简单了解_template: '#-优快云博客

简单了解 Vue ：

vue.js中有两个核心功能：响应式数据绑定，组件系统。主流的mvc框架都实现了单向数据绑定，而双向绑定无非是在单向绑定基础上给可输入元素添加了change事件，从而动态地修改model和view。

主要看code：

案例一：（直接使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
</head>
<body>
<div id="app">
    <input v-model="test1"/>{{test1}} <br/>
	<input v-model="test"/>{{test}} <br/>
	<button v-on:click="show">点喔</button> <br/>
	<a v-on:click="run">开始</a>
</div>
<div v-bind:class="{'red':true}"></div>
<div :href="url"></div>
<script>
    new Vue({   //创建一个Vue的实例  
        el: "#app", //挂载点是id="app"的地方
        data: {     //数据
            test: "" ,
			test1:"" //变量test
        },
		methods:{
			show:function(){
				alert("run......")
			},
			run:function(){
				console.info("run1.....这是一个a标签")
			}
		}
    })
</script>
</body>
</html>

在这里插入图片描述

一、vue实例

创建根实例，所有的内容都应该包含在根实例中

new Vue({
		el: '#app',
        data: {//数据放这里
            message: 'Hello world'
        },
        methods:{//方法放这里
            show:function(){alert("run...")}
        }
    })

二、模板语法

文本：文本绑定数据的方式

<p>{{ message }}</p>

属性：html属性绑定数据的方式

<div v-bind:class="{'red': true}">
<div :href="url">//简写格式

指令：html没有的属性即是vue的指令，以v-xxx的格式:如v-for、v-if···

数据绑定：前面的可以算是单向的数据绑定，而双向数据绑定需要用到v-model指令

<input v-model="message"/>

事件：

<!-- 完整语法 -->
<a v-on:click="show"></a>
<!-- 缩写 -->
<a @click="show"></a>

三、组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
</head>
<body>
    <div id="app">
        <p>父组件说：{{message}}</p>
        <!--使用组件-->
        <my-component></my-component>
    </div>
<!--定义模板-->
<template id="childComp">
    <p>子组件说：{{message}}</p>
</template>
<script>
    var child= {
        template: '#childComp',//必须绑定一个模板
        data:function(){
            return {
                message:"我是子组件"
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'my-component': child
        },
        data:{
            message:"我是父组件"
        }
    })
</script>
</body>
</html>

在这里插入图片描述
组件必须绑定一个模板，而模板必须为template标签。其他的用法和vue实例很相似，因为vue实例本身也可以算是一个组件。需要注意的是，在使用组件时，data必须是一个函数，该函数返回data数据，如下：

data:function(){
    return {
         message:"我是子组件"
    }
}

在这里，大家发现我在父组件和子组件中都定义了message，但是显示的是不同的结果。因为在vue.js中组件的作用域是独立的，即使是父子组件也不能继承作用域。而要传递数据就必须借助prop和事件传参，prop往下传，事件往上传。

2.子组件通过prop获取父组件参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
</head>
<body>
    <div id="app">
        <p>父组件说：{{message}}</p>
        <!--使用组件，传递参数**************-->
        <my-component :message="fu"></my-component>
    </div>
<!--定义模板-->
<template id="childComp">
    <p>子组件说：{{message}}</p>
</template>
<script>
    var child= {
        //声明参数*********************
        props:["fu","message"],
        template: '#childComp',
        data:function(){
            return {
                message:"我是子组件",
                zi:"子组件内容"
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'my-component': child
        },
        data:{
            message:"我是父组件",
            fu:"父组件内容"
        }
    })
</script>
</body>
</html>

在这里插入图片描述
可以看到，父组件的fu传递到了子组件，并赋值给了message

3.子组件通过事件向父组件传递参数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DEMO</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>父组件说：{{message}}</p>
        <!--自定义increment事件用以传递参数**************-->
        <my-component :message="fu" @increment="get"></my-component>
    </div>
<!--定义模板-->
<template id="childComp">
    <div>
        <p>子组件说：{{message}}</p>
        <button @click="send">传参</button>
    </div>
</template>
<script>
    var child= {
        props:["fu","message"],
        template: '#childComp',
        data:function(){
            return {
                message:"我是子组件",
                zi:"子组件内容"
            }
        },
        methods:{
            send:function(){
                //触发increment事件，并传递参数**************
                this.$emit("increment",{mes:this.zi});
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'my-component': child
        },
        data:{
            message:"我是父组件",
            fu:"父组件内容"
        },
        methods:{
            //在事件处理函数中接收参数并赋值给message*************
            get:function(opt){
                this.message = opt.mes;
            }
        }
    })
</script>
</html>