vue快速入门知识点（一）

来源：互联网发布：历年进出口数据查询编辑：程序博客网时间：2024/05/18 00:59
    <!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>
1 0