Php 未检测到Vuejs_Php_Css_Html_Vue.js_Bootstrap 4

Php 未检测到Vuejs

php css html vue.js bootstrap-4

Php 未检测到Vuejs,php,css,html,vue.js,bootstrap-4,Php,Css,Html,Vue.js,Bootstrap 4,大家好，帮帮我！在我的页面上未检测到Vue js。我不知道为什么。我在过去构建了很多vueapps，以前从未遇到过问题。我想知道bootstrap js是否与vuejs冲突？我加载了页面，当我尝试进入chrome开发工具时，它说没有检测到vuejs。难以置信！有什么想法吗 <?php ob_start(); session_start(); if (isset($_SESSION['activated'])) { $activated = $_SESSION['activated

大家好，帮帮我！在我的页面上未检测到Vue js。我不知道为什么。我在过去构建了很多vueapps，以前从未遇到过问题。我想知道bootstrap js是否与vuejs冲突？我加载了页面，当我尝试进入chrome开发工具时，它说没有检测到vuejs。难以置信！有什么想法吗

 <?php ob_start(); session_start();
if (isset($_SESSION['activated'])) {
    $activated = $_SESSION['activated'];
  }

  if (isset($activated) && $activated == 0) {
    echo '<script type="text/javascript">';
    echo 'alert("Please activate your account before signing in. ");';
    echo 'window.location.href = "resendoptions.php?userName=' . $_SESSION[username] . '";';
    echo '</script>';
  }

  if (isset($_SESSION['success']) and $_SESSION['success'] == 1) {
    $success = 1;
  }
  else {
    $success = 0;
  }

?>
<html>
<head>
    <style>
        nav a{
            color: white
        }
        nav {background-color: #1c71b9; }
        .navbar-toggle{border: 3px solid white;}
        .icon-bar{background-color: white;}
        .navbar-brand:hover{background-color: white;
        color: #1c71b9;
        }
        body{margin-top: 50px;}
        h1, h2, h3, h4, h5, h6, p{
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        .row + .row{margin-top: 20px;}
        .itemHeading{font-weight: bold;}
        .icon{display: block; max-width: 100%; margin-top: 10px;}
        .descriptionHeading{margin-top: 20px; text-align: center;}
        .descriptionSection{background-color: lightgray;}
        .mainDescriptionHeading{text-align: center;}
        .descriptionParagraph{text-align: center;}
        .centerDescriptionButton{padding-bottom: 20px;}
        .first-slide video{width: 100%;}
        .second-slide video{width: 100%;}
        .third-slide video{width: 100%;}
        .first-slide{width: 100%;}
        .second-slide{width: 100%;}
        .third-slide{width: 100%;}
        #myCarousel{margin-top: 50px;}
        .card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px;}
        .card video{width:100%;}
        .card-title{font-weight: bold;}

        .error{color: red;}
          .success{color: green;}
          .tooltip {
            position: relative;
            display: inline-block;
            padding-right: 5px;
            font-size: 20px;
          }
          .tooltip .tooltiptext {
              visibility: hidden;
              width: 240px;
              background-color: red;
              color: white;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;
              font-size: 15px;
              /* Position the tooltip */
              position: absolute;
              z-index: 1;
              top: -5px;
              left: 105%;
          }

          .tooltip:hover .tooltiptext {
              visibility: visible;
          }
          blue{color: darkblue; background-color: darkblue;}

    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="app">
 <nav class="navbar navbar-fixed-top">
    <div class="container">
     <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
         <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="index.php">My Site</a>
        </div><!--end .navbar-header-->
        <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li v-show="admin==1"><a href="adminMenu.php">Admin</a></li>
            <li><a href="#">Subscriptions</a></li>
            <li><a href="#">Templates</a></li>
            <li><a href="#">Stock</a></li>
            <li v-show="sesloggedin==0"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a></li>
            <li v-show="sesloggedin==1"><a href="logout.php">Logout</a></li>
            <li><a href="#">Signup</a></li>
            </ul>
        </div><!--end #navbar-->
     </div><!--end container-->
    </nav>
     <div class="container">
      <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
            <!--modal header-->
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h2 class="modal-title">Login</h2>
                </div>
                <!--modal body-->
                <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="username">Username/Email</label>
                        <input v-on:click="error=0; loginsub=0;" v-model="userName" type="text" class="form-control" placeholder="Username/Email" id="username" name="userName">
                        <a href="#">Forgot Username</a>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                    <input v-on:click="error=0; loginsub=0;" v-model="password" type="password" class="form-control" placeholder="Password" name="password" id="password">
                        <a href="#">Forgot Password</a>
                    </div>
                    <div v-show="error==1 || userName.length<=7 && loginsub==1 || password.length<=7 && loginsub==1"><small class="error">Username/Email or password was incorrect...Try again</small>
                    </div>
                    </form>
                </div>
                <!--modal footer-->
                <div class="modal-footer">
                <button v-on:click="submit();" class="btn btn-primary btn-block">Login</button>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
        <script>
  var app = new Vue({
    el: '#app',
    data: {
      userName: '',
      password: '',
      success: '<?php echo $success;?>',
      error: '',
      showPopUp: '',
      loginsub: '',
      response: [],
      sesusername: '<?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];}?>',
      sesemail: '<?php if (isset($_SESSION['email'])) { echo $_SESSION['email'];}?>',
      sesloggedin: '<?php if (isset($_SESSION['loggedin'])) {echo $_SESSION['loggedin'];}?>',
      sesfirstname: '<?php if (isset($_SESSION['firstname'])) {echo $_SESSION['firstname'];}?>',
      seslastname: '<?php if (isset($_SESSION['lastname'])) {echo $_SESSION['lastname'];}?>',
      sesphone: '<?php if (isset($_SESSION['phonenumber'])) {echo $_SESSION['phonenumber'];}?>',
      sescompanyname: '<?php  if (isset($_SESSION['companyname'])) {echo $_SESSION['companyname'];}?>',
      admin: '<?php if (isset($_SESSION['admin'])) {echo $_SESSION['admin'];}?>'
    },
    created: function() {
      this.showPopUp = "<?php if(isset($_GET['showLoginForm']) and $_GET['showLoginForm']==1){echo true;} else{echo false;}?>";
      this.loginsub = 0;
    },
    methods: {
      popUp: function() {
        this.showPopUp = !this.showPopUp;
      },
      submit: function() {
        this.loginsub = 1
        if (this.userName.length >= 8 && this.password.length >= 8) {
          var jsonString = JSON.stringify({
            userName: this.userName,
            password: this.password
          });
          $.ajax({
            url: "login.php",
            method: "POST",
            dataType: "JSON",
            data: jsonString,
            success: function(data) {
              var vueapp = this;
              vueapp.response = data;
              vueapp.error = data.error;
              if(data.showPopUp==false){
                  $('#loginModal').modal('hide');
              }
              if (data.success == 1) {
                window.location = window.location.href.split("?")[0];
              }
              console.log(data);
            }.bind(this)
          });
        }
      }
    }
  });
</script>


导航a{
颜色：白色
}
导航{背景色：#1c71b9；}
.navbar切换{边框：3px纯白；}
.图标栏{背景色：白色；}
.navbar品牌：hover{背景色：白色；
颜色：#1c71b9；
}
正文{页边距顶部：50px；}
h1，h2，h3，h4，h5，h6，p{
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
}
.row+.row{页边距顶端：20px；}
.itemHeading{font-weight:bold；}
.icon{显示：块；最大宽度：100%；页边距顶部：10px；}
.description标题{页边距顶部：20px；文本对齐：中间；}
.description节{背景颜色：浅灰色；}
.main说明标题{文本对齐：居中；}
.description段落{文本对齐：居中；}
.centerDescriptionButton{填充底部：20px；}
.第一张幻灯片视频{宽度：100%；}
.第二张幻灯片视频{宽度：100%；}
.第三张幻灯片视频{宽度：100%；}
.第一张幻灯片{宽度：100%；}
.第二张幻灯片{宽度：100%；}
.第三张幻灯片{宽度：100%；}
#myCarousel{页边顶部：50px；}
.card{宽度：100%；边距底部：30px；框阴影：05px；填充：15px；}
.card视频{宽度：100%；}
.card title{字体大小：粗体；}
.错误{颜色：红色；}
.success{颜色：绿色；}
.工具提示{
位置：相对位置；
显示：内联块；
右侧填充：5px；
字体大小：20px；
}
.tooltip.tooltiptext{
可见性：隐藏；
宽度：240px；
背景色：红色；
颜色：白色；
文本对齐：居中；
边界半径：6px；
填充：5px0；
字体大小：15px；
/*定位工具提示*/
位置：绝对位置；
z指数：1；
顶部：-5px；
左：105%；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}
蓝色{颜色：暗蓝色；背景色：暗蓝色；}
切换导航









X
登录
用户名/电子邮件
暗语
用户名/电子邮件或密码不正确…请重试
登录
var app=新的Vue({
el:“#应用程序”，
数据：{
用户名：“”，
密码：“”，
成功：''，
错误：“”，
显示弹出窗口：“”，
登录B:“”，
答复：[]，
用户名：“”，
电子邮件：''，
sesloggedin:“”，
第一个名字：''，
selastname:“”，
电话：''，
sescompanyname:“”，
管理员：“”
},
已创建：函数（）{
this.showPopUp=“”；
this.loginsub=0；
},
方法：{
弹出：函数（）{
this.showPopUp=！this.showPopUp；
},
提交：函数（）{
this.loginsub=1
如果（this.userName.length>=8&&this.password.length>=8）{
var jsonString=JSON.stringify({
用户名：this.userName，
密码：这个是密码
});
$.ajax({
url:“login.php”，
方法：“张贴”，
数据类型：“JSON”，
资料来源：jsonString，
成功：功能（数据）{
var vueapp=此；
vueapp.response=数据；
vueapp.error=data.error；
if（data.showPopUp==false）{
$（'#loginModal'）.modal（'hide'）；
}
如果（data.success==1）{
window.location=window.location.href.split（“？”[0]；
}
控制台日志（数据）；
}.绑定（此）
});
}
}
}
});

要使vue开发工具正常工作，页面上至少应有一个vue实例

因为您的数据存在转义问题。永远不会创建您的Vue实例

皈依

 sesusername: '<?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];}?>',

ses用户名：“”，

到

ses用户名：“”，

您使用的是vue开发工具吗？是的，我使用的是vue开发工具看着这段代码，您似乎根本不需要Vuejs。是的，我使用v-on:click=“submit（）；”我想使用Vuejs，我能做到吗？希望奥基夫先生永远不会注册。。

 sesusername: '<?php if (isset($_SESSION["username"])) {echo $_SESSION["username"];}?>',