【Vue】Vue 快速入门（一）

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>

　　效果如下：
　　