zoukankan      html  css  js  c++  java
  • Vue框架的两种使用方式

    1、单页面应用:使用Vue CLI工具生成脚手架,这是最常见的使用方式,简单用模板生成一个HelloWorld Demo,可以学习Vue的SPA项目结构

    2、传统多页面应用:通过script引入Vue.js,详细如下:这里搭配Mint-ui

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    </head>
    <body>
      <div id="app">
        <mt-button @click.native="handleClick">按钮</mt-button>
      </div>
    </body>
      <!-- 先引入 Vue -->
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      <!-- 引入组件库 -->
      <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
      <script>
        var vm=new Vue({
          el: '#app',
          methods: {
            handleClick: function() {
              this.$toast('Hello world!')
            }
          }
        })
      </script>
    </html>

    如果要通过js原生代码或者jQuery设置vue里的变量和方法,那么利用vm,打印它的结构,通过点来取属性赋值即可 

    那么,如何将SPA 转成传统多页面应用?

    1、加头加尾,DOM的基本结构要有

    2、script引入Vue.js等库,注意Vue放在第一位置引入

    3、将xxx.vue文件template内所有 复制到新页面中,并用id为app的div包裹

    4、有样式的,迁移到新页面头部的style中

    5、在底部new一个Vue实例,并传入变量和方法,例如

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          username: '',
          password: ''
        },
        methods: {
          Login() {
            console.log("登录成功", "用户名", this.username, "密码", this.password)       
          }
    
        }
      })
    
    </script>
  • 相关阅读:
    python-logging配置
    python-装饰器
    python字符串操作
    python集合
    python-列表和元组
    Python 3开发网络爬虫(四): 登录
    python3中No module named 'commands'
    Python 爬虫 (三)
    零基础自学Python 3开发网络爬虫(二): 用到的数据结构简介以及爬虫Ver1.0 alpha
    零基础自学用Python 3开发网络爬虫(一)
  • 原文地址:https://www.cnblogs.com/ww01/p/9626799.html
Copyright © 2011-2022 走看看