VueJs入门练习
开始阅读Vue官方文档,学习Vue开发。Vue可以让前端数据绑定和渲染更为方便,但要做出一套漂亮的界面,还是需要使用CSS相关的框架。0. 预备,官方建议:刚开始上手不宜直接使用vue-cli工具,还是使用最简单的Vue引入方式:src="https://unpkg.com/vue">1. Vue声明式渲染数据html>lang="en">chars
·
开始阅读Vue官方文档,学习Vue开发。Vue可以让前端数据绑定和渲染更为方便,但要做出一套漂亮的界面,还是需要使用CSS相关的框架。
0. 预备,官方建议:刚开始上手不宜直接使用vue-cli工具,还是使用最简单的Vue引入方式:
<script src="https://unpkg.com/vue"></script>
1. Vue声明式渲染数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Study</title> <script src="https://unpkg.com/vue"></script> </head> <body> <!-- 1. 文本插入 --> <div id="app">{{message}}</div><br/> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message : 'Hello Vue!' } }); </script> </body> </html>效果:
2. 绑定元素(使用v-bind指令)
<div id="app-2" v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </div> <script type="text/javascript"> var app2 = new Vue({ el: '#app-2', data:{ message: 'Hello Vue,' + new Date().toLocaleString() } }); </script> </body>效果:
3. 条件指令(使用v-if进行条件渲染)
<div id="app-3"> <div v-if="show">被显示了吗?</div> </div> <script type="text/javascript"> var app3 = new Vue({ el: '#app-3', data: { show: true } }) </script>效果:
[注]在Console中,使用app3.show的方式动态修改变量值,可以观察div是否被显示,当v-if=false的时候,改div不会被显示。
4. 循环指令(使用v-for实现数据循环)
<div id="app-4"> <ol> <li v-for="item in fruits">{{item.content}}</li> </ol> <p v-for="item in cities">{{item.name}}</p> </div> <script type="text/javascript"> var app4 = new Vue({ el: '#app-4', data: { fruits: [ {id: 0, content: 'Apple'}, {id: 1, content: 'Orange'}, {id: 2, content: '西瓜'} ], cities: [ {name: '北、上、广、深'}, {name: '杭、武、成、南'} ] } }) </script>效果:
5. 实现事件绑定(Vue使用v-on进行用户事件绑定)
<div id="app-5"> <div>{{message}}</div> <button v-on:click="reverseWord">点击翻转</button> </div> <script type="text/javascript"> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue!' }, methods: { reverseWord: function() { this.message = this.message.split('').reverse().join('') } } }) </script>效果:
6. 处理用户的输入(Vue使用v-model来实现输入)
<div id="app-6"> <p>{{message}}</p> <input v-model="message"/> </div> <script type="text/javascript"> var app6 = new Vue({ el: '#app-6', data :{ message: 'Hello Vue!' } }) </script>效果:
7. Vue可以很方便的定义一个组件:
<div id="app-7"> <my-component></my-component> </div> <script type="text/javascript"> Vue.component('myComponent', { template: '<p>一个自定义组件</p>' }) var app7 = new Vue({ el: '#app-7' }) </script>效果:
8. 要使得组件内部显示动态内容,可以使用:
<div id="app-7"> <ol> <comp-item v-for="item in phones" v-bind:comp="item" v-bind:key="item.id"> </comp-item> </ol> </div> <script type="text/javascript"> Vue.component('comp-item', { props: ['comp'], template: "<li>{{ comp.text}}</li>" }); var app7 = new Vue({ el: '#app-7', data: { phones:[ {id: 0, text: 'Apple'}, {id: 1, text: 'Huawei'}, {id: 2, text: 'Xiaomi'} ] } }) </script>效果:
[附]Vue官方文档:
https://cn.vuejs.org/v2/guide/ssr.html
更多推荐
已为社区贡献1条内容
所有评论(0)