新建一个vue页面

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

第一步，新建一个文件夹/tmp/learn

第二步，进入该文件夹 cd /tmp/learn/

第三步，在此处新建一个js文件夹

第四步，去vue官网下载一个vue.js完整版本，放在该文件夹下。vue.js下载地址

第五步，在/tmp/learn/文件夹下新建一个index.html

index.html的内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引用vue.js  -->
    <script src="./js/vue.js"></script>
</head>
<body>
    <div >
        <input type="button" value="button1" v-on:click="show()"/>
        <input type="button" value="button1" @click="show2(33)"/>
        <h3>{{word}}</h3>
    </div>
    <script>
        //Module
        var m = {
            word: 'Hello,World! I am a Vue'
        }
        //ViewModel
        var vm = new Vue({
            el:'#app',//挂载点
            data: m,//数据
            //方法
            methods:{
                show(){
                    console.log("hello,world");
                    this.word='test';
                },
                show2(x){
                    console.log("test"+x);
                }
            }
        })
    </script>
</body>
</html>

这里推荐VS code作为日常开发工具，推荐安装open with live server。在vs code中搜索live server即可下载安装。

以上是 新建一个vue页面 的全部内容， 来源链接： utcz.com/z/380114.html

回到顶部