Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Problem:.net does not have. Vue

In the eyes of the front-end developer, the project development mode of separating the front end from the back end is undoubtedly the most convenient, but sometimes everything does not go as expected. At present, all the projects of the department are developed by Visual Studio, so they are basically C#.net projects.

After I graduated last year, I started to work on a new project to develop. At that time, I was preparing to use the unified vUE architecture on the front end. There was no separation of the front and back ends, so no packaging tools like WebPack were used, let alone the Vue CLI.

If you don’t have it, write it in ASPX instead of HTML.

But it didn’t take long to find a new problem, because I had to make some common components, so I just wanted to write components in the.vue way, but then I found a problem, how can.net projects support.vue files? You cannot use
to define a VUE component. Normally, the definition of a VUE component is wrapped in

To solve

Puzzled, when the net also checked. Net for a long time.

Aspx,.ascx, and.ashx.

Here is the key point. Ascx, more formal introduction:

Asp.net user controls are developed as Web pages that encapsulate specific functionality and behavior to be used on the various pages of a Web application. A user control contains HTML, code, and a combination of other Web or user controls and is stored on the Web server in its own file format with the extension *.ascx. The default configuration in ASP.NET does not allow Web clients to access these files through urls, but other pages on the site can integrate the functionality contained in these files.

I can write.ascx as a.vue file, and I’ll write it pretty much the same way.

First create a user control:

You can select from the New item or directly select the Web Form user controls below

Once you’ve created it, the general format is basically the same as.vue

The code on the page looks like this: here the body elements can be wrapped with , but the type is text/template. The other way of writing it is pretty much the same.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="" %>

<! - style -- -- >
<style>
</style>

<! - element -- -- >
<script id="onecatalogs" type="text/template">
	<div class="teaching-catalog"></div>
</script>	

<script>
    / / child component
    var son = {
        template: "#onecatalogs".props: [].data: function () {
            return{}},created: function () {},
        mounted: function () {},
        updated:function(){},
        methods: {},
        filters: {}}</script>
Copy the code

Reference: After creating the ASCX component, you can drag the ASCX component directly to the ASPX page, and then add the component in the VUE components of ASPX.

Example:

  1. into

  1. Component to add

  1. call

This way, even if the front end of the project does not separate, also can write. Vue components. Get a little knowledge every day