• 新建一个vue页面


    新建一个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 id="app">
            <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即可下载安装。

  • 相关阅读:
    django--orm操作
    路由
    django ----视图和路由
    DJango 前三天小结
    JQuery----操作01
    前端---JQuery初识
    前端----jsDOM
    前端---js02
    前端-----js
    面向对象
  • 原文地址:https://www.cnblogs.com/lukairui/p/14437418.html
Copyright © 2020-2023  润新知