Vue
作者QQ:67065435 QQ群:821635552
本站内容全部为作者原创,转载请注明出处!
本文内容以Vue2.6.12为例进行介绍
基本语法1
<!DOCTYPE html> <html> <head> <title>Vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!--<script src="https://note.so1234.top/vue/vue.js"></script>--> <style>*{margin:0;padding:0;}</style> </head> <body> <!--属性绑定--> <div id="app1"> <input type="text" v-bind:placeholder="msg"> </div> <script> var app1 = new Vue({ el: '#app1', data: { msg: '属性绑定' } }) </script> <!--内容绑定--> <div id="app2"> <p></p> </div> <script> var app2 = new Vue({ el: '#app2', data: { msg: '内容绑定' } }) </script> <!--显示隐藏--> <div id="app3"> <p v-if="display">显示隐藏</p> </div> <script> var app3 = new Vue({ el: '#app3', data: { display: true } }) </script> <!--循环打印--> <div id="app4"> <p v-for="msg in msgs"></p> </div> <script> var app4 = new Vue({ el: '#app4', data: { msgs: [ {ctt: '循环打印1'}, {ctt: '循环打印2'} ] } }) </script> <!--事件处理--> <div id="app5"> <p v-on:click="func1"></p> </div> <script> var app5 = new Vue({ el: '#app5', data: { msg: '事件处理' }, methods: { func1: function () { this.msg = this.msg.split('').reverse().join(''); } } }) </script> <!--双向绑定--> <div id="app6"> <input v-model="msg"> <p></p> </div> <script> var app6 = new Vue({ el: '#app6', data: { msg: '双向绑定' } }) </script> <!--组件构建--> <div id="app7"> <tool1 v-for="msg in msgs" v-bind:msg="msg" v-bind:key="msg.ctt"></tool1> <tool2 v-for="book in books" v-bind:book="book" v-bind:key="book.ctt"></tool2> </div> <script> Vue.component('tool1', { props: ['msg'], template: '<p></p>' }); Vue.component('tool2', { props: ['book'], template: '<p></p>' }); var app7 = new Vue({ el: '#app7', data: { msgs: [ {ctt: '组件构建1-1'}, {ctt: '组件构建1-2'} ], books: [ {ctt: '组件构建2-1'}, {ctt: '组件构建2-2'} ] } }) </script> </body> </html>