VueJs入门练习
来源：互联网 发布：软件测试工程师的出路 编辑：程序博客网 时间：2024/06/05 13:21
开始阅读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
阅读全文
