What is the best tool for syntax highlighting with Vue.js?

Looking for guidance on syntax highlighting with Vue.js. I've included the code snippet below, but for some reason the message "This is a test" isn't appearing as expected. Can someone please point out what mistake I may be making?

<html>
<head>

</head>
<body>
<div id ="app">
  <h1>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e1e2f2d7a5b9a2b9a6a0">[email protected]</a>/dist/vue.js"> </script>
<script type="text/javascript">
new Vue({
    e1:'#app',
    data:{
        message:'This is a test'
    }

})

</script>
</body>
</html>

Answer №1

The reason for the issue is a simple typo in your code:

e1:'#app',

You should actually have:

el:'#app',

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding real-time value to AngularJS directives without triggering reassessment

Seeking guidance on utilizing an AngularJS directive as an HTML element, with the intention to provide it two values. One will be fetched by iterating through a collection, while the other will be derived from that value: <mydirective myval="val" mymag ...

Ways to ensure the axios call is completed before proceeding with the codeexecution

I need to use axios to send a request and retrieve some data that I want to pass as a prop to a React Component. Here's my render function: render() { boards = this.fetchBoardList(); return ( <div className="app-wrapper"> ...

Angular unable to register service worker

Looking to implement push notifications in my Angular app using vanilla JavaScript instead of the Angular service worker or @angular/pwa. In angular.json, I've specified the path to the js file under the script option. However, when the service worke ...

Display a helpful tooltip when hovering over elements with the use of d3-tip.js

Is it possible to display a tooltip when hovering over existing SVG elements? In this example, the elements are created during data binding. However, in my case, the circles already exist in the DOM and I need to select them right after selectedElms.enter ...

Organizing and recycling React styled-components and native elements

As a backend engineer transitioning to frontend development, I am currently learning React and exploring styled-components for styling components. However, I am facing challenges in using styled-components with native React components and updating them in ...

Implement various actions when the window is resized

The carousel code I have found returns a different number of items to display based on screen size. You can check it out here. $(function() { var mini = 1000; var big = 1280; if (window.screen.availWidth < mini) { $('#carousel1').jsCar ...

Organizing dates with Javascript

Is there a way to convert a string from this format : 2014-06-12T23:00:00 To another format using JavaScript, like so : 12/06/2014 23:00 ...

The input '{ data: InvitedUser[]; "": any; }' does not match the expected type 'Element'

I'm currently facing a typescript dilemma that requires some assistance. In my project, I have a parent component that passes an array of results to a child component for mapping and displaying the information. Parent Component: import { Table } fr ...

Refresh the HTML table following each AJAX request

Each time my AJAX requests are made, new rows keep getting added to my HTML table. I need the table to be updated with fresh data on each call, without appending. This is my current code: var data = $('#data_input').val(); var tableRef = docume ...

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

JkMegaMenu drop-down menus in Chrome are shifting to the left when the window is resized

Currently, I am utilizing the JKmegamenu plugin to incorporate a megamenu into a website that is currently under development. The megamenu functions properly and has an attractive appearance. However, there seems to be an issue where the drop-down divs shi ...

Issue with IE due to jQuery/JavaScript conflict

After selecting one of the two radio buttons, I want to increment the total by $10. If the other option is selected, I want to revert back to the original total price. The jQuery function I am currently using is as follows: function check_ceu() { var ...

Creating a sequence of dependent HTTP requests in Angular

Is it possible to execute multiple http get requests sequentially in Angular, where the endpoint URL for the second request depends on the response of the first request? I attempted to nest the requests using the following code snippet: this.http.get(end ...

Updating an Element in an Array with Mongoose

Is there a more efficient way to update an existing element in an array without fetching the database multiple times? If you have any suggestions, I would greatly appreciate it. Thank you! const updateStock = async (symbol, webApiData) => { try { ...

Updating state based on input from a different component

I am attempting to modify the state of the page index in index.js from the Pagination component, Here is my index.js code: import useSWR from 'swr'; import { useState } from 'react'; const Index = ({ data }) => { const ini ...

Using the same ID to both assign and retrieve a value

Currently, I'm utilizing the x-editable library for jQuery, which is an in-place editor. Below is a snippet of my working code: <?php $num_rows = 1; // Fetching records from the "tblstudent" table and storing them in $row while ($row = ...

Discover the #ID and apply AddClass through the URL in the Navigation Jquery

I am currently in the process of developing a website and I am looking to navigate from one link to another using IDs. Here is an example of what I am trying to achieve: Page Name: index.html <a href= "collection.html#rings">Rings</a> Page N ...

Exposing a Hidden Division with a Link via jQuery

I currently have a jQuery Panel set up to open when clicking a button. Now, I am looking to add a second link at the bottom of the page that will also open the same panel. Can anyone provide guidance on how to accomplish this? You can view my JSFiddle a ...

What techniques can be used to ensure an element remains visible within the viewport

I am currently working with an HTML element that is displayed when a button is clicked, similar to a popup. My goal is to determine if the element is within the browser's viewport and then position it accordingly inside the viewport. Is there a proper ...

Interceptors in axios do not trigger when making requests through a PHP proxy

I am currently working on a React app that will be interacting with services hosted on a remote server. During development on my local machine using the react-scripts server at localhost:3000, I disable CORS in the browser and have no issues with axios f ...