速成Vue01-Vue的概念，优势以及基本语法

Vue

学习一个框架的最好方式是从阅读它的开发文档开始

Vue开发文档

什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的特别之处

MVVM的实现者，从普通的MVC发展而来，增加了一个viewModal层，可以放置数据，实时反馈数据，及时变化（不需要刷新页面），主要起分离视图和模型

为什么要使用MVVM

  • 低耦合：视图可以独立与modal变化和修改，此过程可以互不影响

  • 可复用：将一些视图逻辑放置在ViewModal中可以多次重用

  • 独立开发：开发人员与设计人员可以分离开，前后端分离

  • 可测试：界面要素难以测试，但是如果通过ViewModal测试会比较方便

第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <div id="app">
     {{message}}
 </div>
<script src="../js/vue.js"></script>   
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        }
    })
</script> 
</body>
</html>

Vue基本语法

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <div id="app">
     <span v-bind:title="message">鼠标悬停在此处几秒</span>
 </div>
<script src="../js/vue.js"></script>   
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        }
    })
</script> 
</body>
</html>

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <div id="app">
     <p v-if="seen==='A'">现在你看到我了</p>
     <p v-else-if="seen==='B'">现在你看到我了</p>
     <p v-else>现在你看到我了</p>
 </div>
<script src="../js/vue.js"></script>   
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            seen: 'A'
        }
    })
</script> 
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">

         <ol>
             <li v-for="toto in todos">
                 {{toto.text}}
             </li>
         </ol>
</div>
<script src="../js/vue.js"></script>   
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            todos:[
                {text:'努力'},
                {text:'坚持'},
                {text:'学习'},
                {text:'Vue'}
            ]}
    })
</script> 
</body>
</html>

v-on:click="方法名"

缩写 @click = “方法名”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
<a @click = "first"></a>
</div>
<script src="../js/vue.js"></script>   
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
         	first:function(){
                alert("Hello World!")
            }   
        }
    })
</script> 
</body>
</html>
posted @ 2021-02-04 22:25  2月2日  阅读(97)  评论(0)    收藏  举报