vue快速入门知识点（一）

最新推荐文章于 2021-11-22 15:24:07 发布

iswka

最新推荐文章于 2021-11-22 15:24:07 发布

阅读量555

点赞数 1

分类专栏： vue 文章标签： vue-js vue

本文链接：https://blog.csdn.net/iswka0833/article/details/70256934

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <my-footer></my-footer>
            <my-footer></my-footer>
            <my-footer></my-footer>
            {{ message }}
        </div>

        <hr/>

        <div id="app2">
            <span>声明周期</span>
        </div>

        <hr/>

        <div id="app3">
            <ol>
                <hello v-for="item in arr" v-bind:todo="item"></hello>
            </ol>
        </div>

        <hr/>

        <div id="app4">
            {{ text }}
            {{ 6 + 6 }}
            <!-- 把属性值渲染到标签内部 -->
            <p v-text="text"></p>
            <!-- 把属性值为标签字符串解析成标签，并渲染 -->
            <div v-html="html"></div>
        </div>

        <hr/>

        <div id="app5">
            {{ message }}
            <button v-on:click="reverseMessage">反转效果</button>
        </div>

        <hr/>

        <div id="app6">
            {{ text }}
            <input type="text" name="" id="" v-model="text">
        </div>

        <hr/>

        <div id="app7">
            {{ 2 + 2 }}
            <br/>
            Tom, what do you want eat for dinner? {{ eat ? 'Pize' : 'Chiken' }}

        </div>

        <hr/>

        <div id="app8">
            <p v-if="isShow">See you tomorrow</p>
            <button v-on:click="isShow = !isShow">Goodbye</button>
        </div>

        <hr/>

        <script src="vue2.js"></script>
        <script>

            /**
             * v-if
             * 判断指令
             * 一般用于对DOM的增删
             * */
            new Vue({
                el: '#app8',
                data: {
                    isShow: true
                }
            });
            /**
             * vue的表达式
             * 支持运算符的操作
             * 支持三目运算符
             * 不支持语句和控制流
             * */
            new Vue({
                el: '#app7',
                data: {
                    eat: false
                }
            });

            /**
             * v-model
             * 数据的双向绑定
             * */
            new Vue({
                el: '#app6',
                data: {
                    text: 'I am Tom'
                }
            });


            /**
             * 事件绑定
             * v-on 绑定事件监听器
             * */
            new Vue({
                el: '#app5',
                data: {
                    message: 'hello world'
                },
                methods: {
                    reverseMessage: function () {
                        this.message = this.message.split('').reverse().join('')
                    }
                }
            });


            /**
             * 模板渲染
             * data 可以通过模板渲染，使用{{}}渲染
             * */
            new Vue({
                el: '#app4',
                data: {
                    text: '你好啊',
                    html: '<h5>HTML的h5</h5>'
                }
            });

            /**
             * 组件的注册，分为全局注册和局部注册
             * 组件中的属性data必须使用函数，避免被引用赋值
             * */
            // 全局注册

            Vue.component('hello', {
                props: ['todo'],
                template: '<li>My name is {{ name }}, I like {{ todo.text }}</li>',
                data: function () {
                    return {
                        name: 'Tom'
                    };
                }
            });

            // 局部注册

            var MyFooterChild = {
                template: '<h4>我是底部的h1里面的h4</h4>'
            }

            var MyFooter = {
                template: '<h1>我是底部的h1</h1>',
                // 组件的底部的嵌套
                components: {
                    'my-footer-child': MyFooterChild
                }
            }

            /**
             * v-for
             * 循环遍历data中提供的数组，渲染DOM
             * 一般用于制作列表
             * */
            new Vue({
                el: '#app3',
                data: {
                    arr: [
                        {text: '电影'},
                        {text: '游泳'},
                        {text: '玩游戏'}
                    ]
                }
            });


            /**
             * 声明周期
             * */
            var app2 = new Vue({
                el: '#app2',
                created: function () {
                    console.log('已创建');
                },
                mounted: function () {
                    console.log('已挂载');
                }
            });


            /**
             * 基本结构
             * */

            var app = new Vue({
                el: '#app',
                data: {
                    message: 'hello world'
                },

    //            template: '<h1>我是h1</h1>',
                components: {
                    'my-footer': MyFooter
                }
            });




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