vue全套教程(实操)-1

发布于 2021-4-29 13:20
浏览
0收藏

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


一、MVVM模式和第一个Vue程序

 

1.什么是 MVVM

    该层向上与视图层进行双向数据绑定
    向下与 Model 层通过接口请求进行数据交互
vue全套教程(实操)-1-开源基础软件社区
    Vue的安装方式:

 

  1.1 使用CDN方法(初学者使用)
  也可以直接使用CDN的方式引入,代码如下:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

   

  1.2Vue-cli脚手架
  利用Vue-cli 脚手架构建Vue项目,在后面第七点详细讲解。(中大型项目中推荐使用)。
2.第一个Vue程序

 1、创建一个 HTML 文件

 2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

   

完整示例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view视图-->
 <div id="app">
     <input type="text" v-model="message"/>
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model数据*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>

 

演示效果:(视图驱动数据,数据驱动视图)

vue全套教程(实操)-1-开源基础软件社区

————————————————
作者:贝西奇谈

标签
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐