Vue 快速入门
Vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官网：https://cn.vuejs.org/
官方文档：https://cn.vuejs.org/v2/guide/index.html
Vue.js库下载
地址：https://cn.vuejs.org/v2/guide/installation.html
Vue.js库的基本使用
vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。
使用请参考官方文档：
- 简单示例代码如下：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>vue - helloworld</title> 6 </head> 7 8 <body> 9 <!-- 10 Vue 的使用 ： 11 1、引入Vue.js 12 2、创建Vue对象 13 1）el：指定根element（选择器） 14 2）data：初始化数据（页面可以访问） 15 3、双向数据绑定：v-model 16 4、显示数据：{{xxx}} 17 5、理解vue的mvvm实现 18 --> 19 <div id="app"> 20 <!-- view --> 21 <input type="text" v-model="message"> 22 <p>Hello {{ message }}</p> 23 </div> 24 <script src="../js/vue.js"></script> 25 <script type="text/javascript"> 26 // 创建Vue实例 27 // const 将变量定义为常量 28 const vm = new Vue({// 配置对象 29 // element：选择器 30 el: '#app', 31 // data 有特殊含义 32 data: { // 数据(model) 33 message: 'Hello Vue.js !', 34 foo: 'end' 35 } 36 }); 37 </script> 38 <!-- 39 MVVM: 40 model：模型，数据对象（data） 41 view：视图，模版页面 42 viewModel：视图模型（vue的实例） 43 --> 44 </body> 45 46 </html>
效果如下：
- 其他功能介绍代码如下：
1 <html> 2 3 <head></head> 4 5 <body> 6 <div id="app"> 7 <input type="text" v-model="message"> 8 <p>hello {{ message }}</p> 9 </div> 10 <div id="app-2"> 11 <span v-bind:title="message"> 12 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 13 </span> 14 </div> 15 <div id="app-3"> 16 <p v-if="seen">现在你看到我了</p> 17 </div> 18 <div id="app-4"> 19 <ol> 20 <li v-for="todo in todos"> 21 {{ todo.text }} 22 </li> 23 </ol> 24 </div> 25 <div id="app-5"> 26 <p>{{ message }}</p> 27 <button v-on:click="reverseMessage">反转消息</button> 28 </div> 29 30 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 31 <script> 32 // 创建vue实例 33 const vm = new Vue({ 34 // element:选择器 35 el: '#app', 36 data: { 37 message: "Vue~~" 38 } 39 }) 40 var app2 = new Vue({ 41 el: '#app-2', 42 data: { 43 message: '页面加载于 ' + new Date().toLocaleString() 44 } 45 }) 46 var app3 = new Vue({ 47 el: '#app-3', 48 data: { 49 seen: true 50 } 51 }) 52 var app4 = new Vue({ 53 el: '#app-4', 54 data: { 55 todos: [ 56 { text: '学习 JavaScript' }, 57 { text: '学习 Vue' }, 58 { text: '整个牛项目' } 59 ] 60 } 61 }) 62 var app5 = new Vue({ 63 el: '#app-5', 64 data: { 65 message: 'Hello Vue.js!' 66 }, 67 methods: { 68 reverseMessage: function () { 69 this.message = this.message.split('').reverse().join('') 70 } 71 } 72 }) 73 </script> 74 </body> 75 76 </html>
效果如下：
