<div id="app">{{ greeting }}</div> <script> let oDiv = document.getElementById('app'); oDiv.innerText = 'Hello World'; </script>
代码执行结果：
使用Vue实现上个实例的功能：
<script src='./static/vue.min.js'></script> <div id="app">{{ greeting }}</div> <script> new Vue({ el: '#app', data: { greeting: 'Hello Vue', } }) </script>代码打印结果：
v-text
<script src="./static/vue.min.js"></script> <body> <div id="app" v-text="greeting"></div> <script> // 数据模板引擎 // v-开头的指令是帮助我们渲染数据用的 new Vue({ el: '#app', data: { greeting: 'Hello Vue', } }) </script> </body>代码打印结果：
v-html
<script src="./static/vue.min.js"></script> <body> <div id="app" v-html="greeting"></div> <script> new Vue({ el: '#app', data: { greeting: '<h1>Hello Vue</h1>' } }) </script> </body>代码打印结果：
v-for
<script src="./static/vue.min.js"></script> <body> <div id="app"> <ul> <li v-for="aihao in xxoo">{{aihao}}</li> </ul> <ul> <li v-for="student in students"> 姓名：{{student.name}}, 年龄：{{student.age}}, 爱好：{{student.hobby}} </li> </ul> </div> <script> new Vue({ el: '#app', data: { xxoo: ['吃', '喝', '嫖', '赌'], students: [ { name: '龙达', age: 18, hobby: 'girl', }, { name: '小默', age: 19, hobby: 'younggirl', }, { name: '小小默', age: 20, hobby: 'she', } ] } }) </script> </body>打印结果：
v-if / v-else-if / v - else
<script src="./static/vue.min.js"></script> <body> <div id="app"> <div v-if="role == 'LongDa'"> <h1>男宾一位！！！</h1> </div> <div v-else-if="role == 'XiaoXiaoMo'"> <h1>男宾两位！！！</h1> </div> <div v-else> <h1>滚！！！</h1> </div> </div> <script> let vm = new Vue({ el: '#app', data: { role: 'LongDa', } }) </script> </body>打印结果：
v-show
<script src="./static/vue.min.js"></script> <body> <div id="app"> <div v-show="isShow">Hello Vue</div> </div> <script> let vm = new Vue({ el: '#app', data: { isShow: false, } }) </script> </body>具体实现原理是将div标签的display属性值设置为none。
v-bind
<script src="./static/vue.min.js"></script> <style> .active { width: 500px; height: 500px; background-color: lawngreen; } </style> <body> <div id="app"> <a v-bind:href="jingdong">去京东</a> <div :class="[isActive]"></div> </div> <script> let vm = new Vue({ el: '#app', data: { jingdong: 'https://www.jd.com', isActive: 'active', } }) </script> </body>
打印结果：
v-bind可以省略，直接写：class=['xxoo']
0省略，
转载于:https://www.cnblogs.com/ZN-225/p/9926268.html
相关资源：VUE入门小项目总结