Vue基础操作

axbhealj

已于 2023-05-20 10:04:36 修改

阅读量688

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-05-20 10:03:10 首次发布

本文链接：https://blog.csdn.net/axbhealj/article/details/130778045

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、常用指令

事件绑定预知：

v-on 也可以简写，使用"@"替代。

v-bind 简写 “:”

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h2>插值</h2>
    <input type="text" v-model="msg">
    <span v-once>Message: {{ msg }}</span>

    <p>{{message}}</p>
    <p><span v-html="message"></span></p>

    <h2>数据绑定-- 双大括号语法不能作用在 html 的属性上面  遇到这种情况应该使用 v-bind 指令</h2>

    <div class="c">div1</div>
    <div v-bind:class="c">div2</div> <%--v-bind 把 vue 实例的 c 属性值 赋值给 这个div 标签的class 属性--%>


    <div v-bind:id="dynamicId">1</div>
    <div :class="c">1</div>   <%--简写  v-bind:  --%>


    <button :disabled="isDisabled">Button</button>
    <a v-bind:href="url">百度</a>
    <a :href="url">百度2</a>


    <h2>js表达式</h2>
    <p>{{number+1}}</p>
    <p>{{ ok ? 'YES' : 'NO' }}</p>
    <p>{{ message2.split(' ').reverse().join(',') }}</p>

    <p v-if="see">看得到吗？</p>
    <h2>事件绑定</h2>

    <button v-on:click="doSomething">按钮</button>
    <button @click="doSomething">按钮2</button>


    <h2>总结</h2>
    <pre>
        指令： 指令 (Directives) 是带有 v- 前缀的特殊 attribute。
        指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。
        指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
        指令：
        v-model="vuedata"     数据双向绑定
        v-bind:htmlattr="vuedata"    属性动态赋值
        v-bind的简写       :htmlattr="vuedata"
        v-on:htmlevent="vuemethods"    事件动态绑定
        v-on的简写       @htmlevent = "vuemethods"
        v-html : 可以解析 html 标签
        v-once : 一次性的插值
        v-if="vuedata"  v-if 指令将根据表达式 vuedata 的值的真假来插入/移除 x 元素。
    </pre>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',    //  接管 app 这个 dom
        data: {
            msg: 'Hello Vue!',
            message:'<font color="red">hello</font>',
            c:'c',
            dynamicId:'5',
            isDisabled:false,
            url:"https://www.baidu.com",
            number:2,
            ok:true,
            message2:"ni hao ma",
            see:false

        },
        methods:{
            doSomething(){
                alert("点我干嘛");
            }
        }
    })
    //app.ok = false;
</script>

<style type="text/css">
    .c{
        border: 1px solid black;
    }
    .c2{
        border: 1px solid red;
    }
</style>
</body>
</html>

1.1 条件渲染v-if

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>-->
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <h2>v-if</h2>
        <h1 v-if="awesome">Vue is awesome!</h1>
        <h1 v-else>Oh no </h1>
        <h2>v-if in template</h2>
        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>

        <h2>v-else</h2>
        <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>

        <h2>v-else-if</h2>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>

        <H2>用 key 管理可复用的元素</H2>
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>

        <BUTTON @click="toggle">toggle</BUTTON>

        <h2>v-show</h2>
        <h1 v-show="ok">Hello! v-show</h1>

        <h2>不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。</h2>
    </div>
    <h2>总结</h2>
    <pre>
       v-if 用于条件性的渲染一块内容
       在template 上使用 v-if  条件渲染分组   最终的渲染结果是不包含template
        v-else   表示   v-if 的else 块
        v-else-f     表示    v-if 的 else -if   可以连续使用  多分枝
        用key 管理 服用的元素
        v-show 只是简单的切换元素的  display
    </pre>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            awesome:false,
            ok:false,
            type:'B',
            loginType:'username'
        },
        methods:{
            toggle(){
                this.loginType= this.loginType=='username'?'email':'username'
            }
        }
    });
</script>
</body>
</html>

1.2 列表渲染v-for

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>用 v-for 把一个数组对应为一组元素</h2>
        <p>我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，
            其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名</p>

        <ul>
            <!--<li>星期一</li>
            <li>星期二</li>
            <li>星期三</li>-->
            <li v-for="item in items">{{item.date}}</li>
        </ul>

        <h2> 在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。 可以不看</h2>
        <ul>
            <li v-for="(item,index) in items" v-bind:key="index" v-bind:title="item.id">
                {{parentMessage}}--{{item.date}}--{{index}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in myitems2.items2" v-bind:key="item.id" >
                {{parentMessage}}--{{item.date}}--{{index}}
            </li>
        </ul>

        <h2>在 v-for 里使用对象</h2>
        <ul>
            <li v-for="(value,name,index) in student">
               {{name}}--{{value}}--{{index}}
            </li>
        </ul>

        <pre>
            注意
            为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
            &lt;div v-for="item in items" v-bind:key="item.id"&gt;
            <!-- 内容 -->
            &lt;/div&gt;
            建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
            不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
        </pre>

        <hr>
        <table style="border: 1px solid black">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>联系方式</th>
            </tr>
            <tr v-for="(stu,index) in students" v-bind:key="index">
                <td>{{stu.name}}</td>
                <td>{{stu.age}}</td>
                <td>{{stu.phone}}</td>
            </tr>
        </table>


    </div>
<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            parentMessage: 'Parent',

            items:[
                {
                    date:"星期1",
                    id:1
                },
                {
                    date:"星期2",
                    id:2
                },
                {
                    date:"星期3",
                    id:3
                }
            ],
            myitems2:{
                parentMessage2:'Parent2',
                items2:[
                    {
                        date:"星期1111"
                    },
                    {
                        date:"星期2222"
                    },
                    {
                        date:"星期3333"
                    }
                ]
            },
            student:{
                name:'zs',
                age:18,
                phone:'136'
            },
            students:[
                {
                    name:'zs',
                    age:18,
                    phone:'111'
                },
                {
                    name:'ls',
                    age:18,
                    phone:'222'
                },{
                    name:'ww',
                    age:18,
                    phone:'333'
                }
            ]
        }
    });

    vue.students.push({name:'zl',age:19,phone:'444'})
</script>
</body>
</html>

1.3 计算属性 computed

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>
       计算属性
    </h2>
    <pre>
         模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
        &lt;div id="example"&gt;
            {{ message.split('').reverse().join('') }}
        &lt;/div&gt;
        在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。
        当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
        所以，对于任何复杂逻辑，你都应当使用计算属性。
        vue  computed 属性  用于计算复杂业务逻辑    把复杂业务逻辑抽取 实现维护方便
    </pre>

</div>
<hr>
<p>例子</p>
<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <button @click="change()">change</button>

    <h2>计算属性 setter</h2>
    <p>Computed reversed info: "{{ reversedInfo }}"</p>
    <button @click="change2()">change2</button>

    <h2>计算属性缓存 vs 方法</h2>
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Computed reversed message: "{{ reversedMessage2() }}"</p>
    <p>Computed reversed message: "{{ reversedMessage2() }}"</p>
</div>
<script type="text/javascript">
    var count = 1;
    new Vue({
        el: '#example',
        data:{
            message:'Hello',
            info:'Hello2'
        },
        computed:{
            // 计算属性的 getter
            reversedMessage() {
                // `this` 指向 vm 实例
                count++;
                console.log('---调用了message get');
                console.log(count);
                return this.message.split('').reverse().join('')
            },
            reversedInfo:{
                get(){
                    console.log('调用了info  get')
                    return this.info.split('').reverse().join('')
                },
                set(newValue){
                    console.log('调用了info  set');
                    console.log(newValue);
                    this.info = newValue;
                }
            }
        },
        methods:{
            change(){
                this.message="springcloud"
            },
            change2(){
                this.reversedInfo="springboot"
            },
            reversedMessage2 () {
                count++;
                console.log('---222');
                console.log(count);
                return this.message.split('').reverse().join('')
            }
        }
    });

</script>
</body>
</html>

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的 计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；

1.3.1 计算属性与方法的区别

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局篇 计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

<div id="vue">
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

说明：

methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化

注意：methods 和 computed 里不能重名

1.4侦听属性 watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n"> 的平方是：{{result}}    {{result2()}}
    </div>

    <div id="app2">
        <input type="text" v-model="n2"> 的平方是：{{result2}}
    </div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            n:1,
           // result:1
        },
        computed:{   //  计算属性
            result(){
                return this.n * this.n;
            }
        },
        methods:{
            result2(){
                return this.n*this.n;
            }
        }
    });

    let vm = new Vue({
        el:"#app2",
        data:{
            n2:1,
            result2:1
        },
        watch:{
            n2(newN,oldN){
                console.log(newN,oldN);
                this.result2= newN*newN;
            }
        }
    });
    //也会有下面的写法
    //vm.$watch('n2',function(newN,oldN){
    //     console.log(newN,oldN);
    //     this.result2= newN*newN;
    //})
</script>
</body>
</html>

1.5 class与style绑定

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <pre>
        操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，
        所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
        不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
        表达式结果的类型除了字符串之外，还可以是对象或数组。
    </pre>
    <h2>绑定 HTML Class</h2>
    <div id="app">
        <h3>对象语法</h3>
        <div :class="{ active: isActive }"></div>
        <hr>
        <div class="static"
                :class="{ active: isActive, 'text-danger': hasError }"
        >123</div>

        <hr>
        <div :class="classObject"
        >123</div>

        <hr>
        <h2>数组语法</h2>

        <div v-bind:class="[activeClass, errorClass]"></div>


        <h2>绑定内联样式  v-bind:style</h2>
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div>
        <div v-bind:style="styleObject">222</div>
    </div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            isActive:true,
            hasError: true,
            classObject:{
                active: true,
                'text-danger': false
            },
            activeClass: 'active',
            errorClass: 'text-danger',
            activeColor: 'red',
            fontSize: 30,
            styleObject: {
                color: 'red',
                fontSize: '13px'
            }
        }
    });
</script>

    <style type="text/css">
        .active{
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }
        .static{
            background-color: aquamarine;
        }
        .text-danger{
            color: red;
        }
    </style>
</body>
</html>

1.6 事件处理

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <h2>可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。</h2>
    <div id="app">
        <button @click="counter+=1">Add 1</button>
        <p>The button above has been clicked {{ counter }} times.</p>
    </div>
    <hr>
    <h2>事件处理方法</h2>
    <div id="example-2">
        <!-- `greet` 是在下面定义的方法名 -->
        <button @click="greet">Greet</button>
    </div>
    <h2>内联处理器中的方法</h2>
    <div id="example-3">
        <button @click="say('hi')">Say hi</button>

        <p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：</p>
        <a  @click="warn('Form cannot be submitted yet.', $event)" href="https://www.baidu.com">
            Submit
        </a>
    </div>

    <h2>事件修饰符</h2>
    <pre>在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
        尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
    为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
        .stop
        .prevent
        .capture
        .self
        .once
        .passive
    </pre>
    <div id="example-4">
        <a @click.prevent="doThis" href="https://www.baidu.com">
            百度
        </a>
        <hr>
        <div @click = "doDivClick" style="width: 100px;height: 100px;border: 1px solid black">
            <a @click.stop="doThis" href="https://www.baidu.com">
                百度
            </a>
        </div>

    </div>

    <h2>按键修饰符</h2>
    <div id="example-5">
        <input type="text" v-model="name" @keyup.enter="submit">
    </div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            counter:0
        }
    });
   var vue2 = new Vue({
        el:"#example-2",
        data:{
            name:'zs'
        },
        methods:{
            greet(event){

                // `event` 是原生 DOM 事件
                //alert(event.target.tagName);
            }
        }
    });
    new Vue({
        el:"#example-3",
        data:{
            name:'zs'
        },
        methods:{
            say(mess){
                alert(mess);
                // `event` 是原生 DOM 事件
                //alert(event.target.tagName);
            },
            warn(mess,event){

                // 现在我们可以访问原生事件对象
                if (event) {
                    event.preventDefault()
                }
                alert(mess);
            }
        }
    });

    new Vue({
        el:"#example-4",
        methods:{
            doThis(){
                alert("执行到了a的click");
            },
            doDivClick(){
                alert("执行到了div的click");
            }
        }
    });
    new Vue({
        el:"#example-5",
        data:{
            name:'zs'
        },
        methods:{
            submit(){
                alert(this.name);
            }
        }
    });
    //alert(vue2.name);

    //vue2.greet();

</script>
</body>
</html>

1.7 表单处理

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>文本</h2>
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <p style="white-space: pre-line;">{{ message }}</p>
        <br>
        <h2>文本域</h2>
        <textarea v-model="message" placeholder="add multiple lines"></textarea>
        <h2>复选框</h2>
        <input type="checkbox" id="checkbox"  v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <h2>多个复选框，绑定到同一个数组：</h2>
        <div >
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
        <h2>单选按钮</h2>
        <div >
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>

        <h2>选择框</h2>
        <div >
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
        <H2>多选选择框</H2>
        <div >
            <select v-model="selecteds" multiple style="width: 50px;">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <br>
            <span>Selected: {{ selecteds }}</span>
        </div>

        <h2>用 v-for 渲染的动态选项：</h2>
        <select v-model="selected">
            <option v-for="option in options" :value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>

        <h2>值绑定</h2>
        <pre>对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：</pre>
        <!-- 当选中时，`picked` 为字符串 "a" -->
        <input type="radio" v-model="picked" value="a">  {{picked}}

        <!-- `toggle` 为 true 或 false -->
        <input type="checkbox" v-model="toggle" true-value="yes">   {{toggle}}

        <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
        <select v-model="selected">
            <option value="abc">ABC</option>
        </select>
        {{selected}}

        <h2>单选按钮</h2>
        <input type="radio" v-model="pick" v-bind:value="a">  {{pick}}

        <h2>选择框的选项</h2>
        <select v-model="selectedobj">
            <!-- 内联对象字面量 -->
            <option v-bind:value="{ number: 123 }">123</option>
        </select>
        {{selectedobj.number}}

        <h2>修饰符</h2>
        <!-- 在“change”时而非“input”时更新 -->
        <input v-model.lazy="msg" >  {{msg}}
        <!--如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：-->
        <input v-model.number="age" type="number">

        <%--如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：--%>
        <input v-model.trim="msg">
    </div>

<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            message:"",
            checked:'',
            checkedNames: [],
            picked:'',
            selected: 'B',
            selecteds:[],
            options:[
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ],
            toggle:'',
            a:'xxx',
            pick:'ooo',
            selectedobj:{},
            msg:''

        }
    });

</script>
</body>
</html>

二、组件基础

什么是“组件化”

Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，在Vue中，万物皆组件。

也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。

要想实现组件化，需要在页面中注册组件：关于注册的方式有两种，分别是全局注册和本地注册。

vue的全局注册，也就意味着在页面的任意一个被vue绑定过的div中，都可以使用全局注册了的vue组件。

但是，如果是对vue组件进行本地注册，那么在其他被vue绑定的div中，不能使用该组件。

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button-counter :title="msg" @event="fun1">
            <p>这是一个p</p>
        </button-counter>
       <button-counter :title2="msg2"></button-counter>
        <button-counter></button-counter>

    </div>

<script type="text/javascript">
    Vue.component('button-counter',{   //  创建一个全局组件  组件的名字是  button-counter
        //props:['title'],      /*父组件向子组件传值*/

        props:{
          title:{
              type:String,
              default:'默认值'
          },
            title2:{
                type:String,
                default:''
            },
        },
        data:function () {
            return {
                count:0
            }
        },
        methods:{
            clickFun(){
                this.count++;
                this.$emit('event',this.count);  // 触发   父组件的事件
            }
        },
        template:'<div><h1>h1...</h1><slot></slot><button @click="clickFun">{{title}}You clicked me {{ count }} times.{{title2}}</button><slot></slot></div>'
    });
    new Vue({
        el:"#app",
        data:{
            msg:'标题1',
            msg2:'标题2'
        },
        methods:{
            fun1(count){
                console.log('子组件向父组件传参'+count);
            }
        }
    });

    /*
    * 组件的概念
    * 如何创建全局组件
    * 组件的模板只能有一个根元素
    * props   取值   赋值（父组件向子组件赋值）
    * */
</script>
</body>
</html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
    <div id="blog-post-demo">
        <!--<blog-post title="My journey with Vue" content="content..."></blog-post>
        <blog-post title="Blogging with Vue"></blog-post>
        <blog-post title="Why Vue is so fun"></blog-post>-->
        <hr>
           <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post @enlarge-text="onEnlargeText"
                v-for="post in posts"
                v-bind:key="post.id"
                v-bind:title="post.title"
                v-bind:content="post.content"
                v-bind:post="post"
        ></blog-post>
           </div>

           <hr>
           <custom-input
                   v-bind:value="searchText"
                   v-on:input="searchText = $event"
                   v-model="searchText"
           ></custom-input>


           <hr>
           <component-a title="这是局部组件"></component-a>

    </div>

<script type="text/javascript">
    Vue.component('blog-post', {
        //props: ['title','content'],
        props: ['post'],
        template: '<div class="blog-post"><h3>{{ post.title }}</h3>' +
            '<button @click="clickFun">Enlarge text</button><div v-html="post.content"></div><div v-html="post.comments"></div></div>'
        ,methods:{
            clickFun(){
                this.$emit('enlarge-text',0.1);
            }
        }
    })

    Vue.component('custom-input', {
        props: ['value'],
        template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)">`
    })

    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [
                { id: 1, title: 'My journey with Vue' ,content:'content1',comments:'评论1'},
                { id: 2, title: 'Blogging with Vue' ,content:'content2',comments:'评论2'},
                { id: 3, title: 'Why Vue is so fun' ,content:'content3',comments:'评论3'}
            ],
            postFontSize: 1,
            searchText:''
        },
        methods:{
            onEnlargeText(enlargeAmount) {
                this.postFontSize += enlargeAmount;
            }
        },
        components:{
            'component-a':{
                props: ['title'],
                template: '<div ><h2>{{title}}</h2></div>'
            }
        }
    })

</script>

<style type="text/css">
    .blog-post{
        border: 1px solid black;
    }
</style>
</body>
</html>

一个完整的Vue组件。该组件包含了三个部分：template（html视图层内容）、script（Model层）、style（CSS样式）。这样封装好的组件可以被复用，也可以作为其他组件的组成部分而被封装——Java的面向对象再次体现。

特点1： template标签内，必须有且只能有一个根标签。
特点2： componet中注册的组件中的data，必须是函数的形式。

这里是个VsCode的Vue模板

{
	    "生成vue模板": {
	        "prefix": "vue",
	        "body": [
	            "<template>",
	            "<div></div>",
	            "</template>",
	            "",
	            "<script>",
	            "//这里可以导入其他文件（比如：组件，工具js,第三方插件js,json文件，图片文件等等）",
	            "//例如： import <<组件名称>> from '<<组件路径>>' ; ",
	            "",
	            "export default {",
	            "//import 引入的组件需要注入到对象中才能使用",
	            "components: {},",
	            "props: [],",
	            "data() {",
	            "//这里存放数据",
	            "return {",
	            "",
	            "};",
	            "},",
	            "//计算属性 类似于data概念",
	            "computed: {},",
	            "//监控data 中的数据变化",
	            "watch: {},",
	            "//方法集合",
	            "methods: {",
	            "",
	            "},",
	            "//生命周期 -创建完成 （可以访问当前this 实例）",
	            "created() {",
	            "",
	            "},",
	            "//生命周期-挂载完成（可以访问DOM 元素）",
	            "mounted() {",
	            "",
	            "},",
	            "beforeCreate() {}, //生命周期 -创建之前",
	            "beforeMount() {}, //生命周期 - 挂载之前",
	            "beforeUpdate() {}, // 生命周期 - 更新之前",
	            "updated() {}, // 生命周期 -更新之后",
	            "beforeDestroy() {}, //声明周期 - 销毁之前",
	            "destroyed() {}, // 生命周期 - 销毁完成",
	            "activated() {}, // 如果页面有keep-alive 缓存功能 这个函数会触发 ",
	            "}",
	            "</script>",
	            "<style scoped>",
	            "/* //@import url($3);引入公共css类 */",
	            "$4",
	            "</style>"
	       
		],
	        "description": "生成vue模板"
	   
	}
}