H__D  

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>
    复制代码

  效果如下:
  

 

posted on   H__D  阅读(123)  评论(0编辑  收藏  举报
努力加载评论中...
 
点击右上角即可分享
微信分享提示