Vue框架开发WebDemo

一、Vue简介

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计

vue官网 https://cn.vuejs.org

二、使用步骤

1.传统下载导入使用

在这里插入图片描述
gitub上下载 解压
在这里插入图片描述

在这里插入图片描述
直接放入项目中应用
在这里插入图片描述
代码如下(示例):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    
    <div id="app">
        {
    
    {
    
     message }}    
        <input v-model="message" placeholder="edit me"> 
    </div>

    <script>
        //创建一个vue实例对象
        var app = new Vue({
    
    
            //告诉Vue的实例对象,将来要控制界面上的哪个区域
            el: '#app',
            //告诉Vue实例对象,被控制区域的数据是什么
            data: {
    
    
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

效果如下:
在这里插入图片描述
附:安装vue调测插件
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_35911309/article/details/110393473