Vueがプロジェクトで使用されています

序：私たちの目標は、アプリケーションの機能を実装するプロジェクトにVueのを適用することです。

個人は、プロジェクト内の機能のためのVueを使用して偉大な選択肢であると言います。

Vueが本当に使いやすいです。

テンプレートベースのHTML構文を使用してVue.jsは、基礎となるデータにバインド宣言VueのDOMインスタンスに開発することができます。

コアVue.jsを使用すると、DOMレンダリングシステムへのデータの簡単な宣言構文を使用することができますテンプレートです。

応答システムを組み合わせた場合に、アプリケーションの状態の変化、Vueのインテリジェント最小コストを再計算し、成分をレンダリングするDOM操作に適用されます。

ルート・インスタンスを作成し、新しいヴュー（{EL「#app」}）

プロパティを定義するためのデータ

関数を定義する方法は、関数が値リターンを返すことができます。

{{}}オブジェクトの属性と関数の戻り値を出力します。

V-htmlの説明：出力します

V-バインド説明：主に結合特性のために使用さ

V-に命令：イベントをバインドするには

Vモデルの説明：双方向結合のためのフォームデータ

V-場合の手順：発現を測定するための

V-ELSE命令：V-場合に、「他の」ブロックを追加

V-するための手順：サイクルとレンダリングのためのデータ

データ属性に加えて、Vueのも有用な特性および方法のいくつかの例を提供します。彼らは、ユーザー定義の属性は区別しそうという、$接頭辞を持っています

Vueのコア命令

デフォルト（V-モデルとV-ショー）

フック関数

bind：コマンド要素が初期化動作一度実行が結合という関数を定義することができ、このフックで呼び出されるとのみ呼ば一度、最初の時間を拘束されています。

inserted：コールは、親結合要素に挿入されている（文書には存在しない、呼び出すことができます親ノードがあります）。

update：結合要素にかかわらずかどうかの結合値の変更、テンプレート呼び出し更新されます。更新前と後の結合値を比較することで、不要なテンプレートの更新を（フック関数のパラメータは、詳細は下記）を無視することができます。

componentUpdated：テンプレートが呼び出された場合はバウンド要素は、更新サイクルを完了したとき。

unbind：時のみ呼び出し命令とネクタイ要素ソリューション、一度呼ばれます。

フック関数のパラメータ

エル：命令バインド要素は、直接DOMを操作するために使用することができます。

バインディング：次のプロパティを含むオブジェクトを：

名前：含まない命令の名前、 v- 接頭辞を。

値：次のようなバウンド値命令、 v-my-directive="1 + 1"値がある値 2。

OLDVALUE：コマンドの前の値はのみで、結合 update して componentUpdated 利用できるフック。かどうかに関係なく値の変化を利用できます。

式：式または変数名値バインディング。例えば v-my-directive="1 + 1" 、式の値です "1 + 1"。

引数：命令はパラメータを渡します。例えば v-my-directive:foo、argの値です "foo"。

修飾子：オブジェクトの修飾子が含まれています。たとえば、次の v-my-directive.foo.barオブジェクト修飾子の値は、修飾子 { foo: true, bar: true }

vノード：Vueのコンパイラで生成された仮想ノード。

oldVnode：仮想ノードのみ update と componentUpdated 利用できるフック。

操作：

ステップ1：新しいアプリケーションベースのWebフォームまたはMVCアプリケーションを作成

これは、私のWebフォームアプリケーションに基づいています

良いライブラリモデル層とDALを構築するための新しいアプリケーション

データモデルADO.NETエンティティモデル層を構築し、コードファーストは、インポートテーブルに使用するデータベースライブラリから選択しました

ステップ2：パッケージの制約を構築し、Nuget

DAL

引用：

Model

程序集：

System.Configuration

System.Xml

System.Xml.Linq

应用程序

引用：

Model

DAL

Nuget包：

Newtonsoft.Json

第三步：导入Vue.js

第四步：搭建DBbase,编辑页面需要功能，写业务

DBbase

 1 using Model;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Data;
 5 using System.Data.SqlClient;
 6 using System.Linq;
 7 using System.Text;
 8 using System.Threading.Tasks;
 9 
10 namespace DAL
11 {
12     public class DBbase
13     {
14         //读取配置文件，连接数据库语句
15         public static string strCon = System.Configuration.ConfigurationManager.ConnectionStrings["Family"].ConnectionString;
16 
17         //实例化连接对象 con  
18         SqlConnection con = new SqlConnection(strCon);
19 
20         //检测连接是否打开  
21         public void Connection()
22         {
23             if (this.con.State == ConnectionState.Closed)
24             {
25                 this.con.Open();
26             }
27         }
28         //根据提供的strSQL语句 访问数据库，返回List集合
29         public List<User> GetDataSet(string strSQL)
30         {
31             Connection();
32             try
33             {
34                 SqlDataAdapter da = new SqlDataAdapter(strSQL, con);
35                 DataSet ds = new DataSet();
36                 da.Fill(ds);
37                 List<User> list = new List<User>();
38                 if (ds.Tables.Count > 0)
39                 {
40                     for (int i = 0; i < ds.Tables.Count; i++)
41                     {
42                         foreach (DataRow dr in ds.Tables[i].Rows)
43                         {
44                             User obj = new User();
45                             if (ds.Tables[i].Columns.Contains("UserID")) obj.UserID = Convert.ToString(dr["UserID"]);
46                             if (ds.Tables[i].Columns.Contains("UserName")) obj.UserName = Convert.ToString(dr["UserName"]);
47                             if (ds.Tables[i].Columns.Contains("UserSet")) obj.UserSet = Convert.ToString(dr["UserSet"]);
48                             if (ds.Tables[i].Columns.Contains("Userphone")) obj.Userphone = Convert.ToString(dr["Userphone"]);
49                             if (ds.Tables[i].Columns.Contains("UserworkType")) obj.UserworkType = Convert.ToString(dr["UserworkType"]);
50                             if (ds.Tables[i].Columns.Contains("WorkDetailsSituation")) obj.WorkDetailsSituation = Convert.ToString(dr["WorkDetailsSituation"]);
51                             if (ds.Tables[i].Columns.Contains("UserleverlType")) obj.UserleverlType = Convert.ToString(dr["UserleverlType"]);
52                             if (ds.Tables[i].Columns.Contains("UserType")) obj.UserType = Convert.ToString(dr["UserType"]);
53                             if (ds.Tables[i].Columns.Contains("UserCreationtime")) obj.UserCreationtime = Convert.ToDateTime(dr["UserCreationtime"]);
54                             if (ds.Tables[i].Columns.Contains("Userhobby")) obj.Userhobby = Convert.ToString(dr["Userhobby"]);
55                             list.Add(obj);
56                         }
57                     }
58                 }
59                 return list;
60             }
61             catch (Exception)
62             {
63 
64                 throw;
65             }
66         }
67     }
68 }

Family

 1 using Model;
 2 using System;
 3 using System.Collections.Generic;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Threading.Tasks;
 7 
 8 namespace DAL
 9 {
10    public class Family
11     {
12         //实例化一个DBbase对象
13         static DBbase db = new DBbase();
14 
15         //查询用户数据 
16         public static List<User> User()
17         {
18             //通过实体中的属性访问 拼接一个你需要的SQL语句
19             StringBuilder strSQL = new StringBuilder();
20             strSQL.Append("Select Theserialnumber, UserID, UserName, UserSet, Userphone, work.UserworkType,Details.WorkDetailsSituation,[level].UserleverlType,[type].UserType, UserCreationtime, hobby.Userhobby from [User]  ");
21             strSQL.Append("inner join Work on Work.UserworkID=[User].UserworkID  ");
22             strSQL.Append("inner join [level] on [level].UserlevelID=[user].UserlevelID  ");
23             strSQL.Append("inner join UserType as [type] on [type].UserTypeID=[USER].UserTypeID  ");
24             strSQL.Append("inner join WorkDetails as Details on Details.WorkDetailsID=Work.WorkDetailsID  ");
25             strSQL.Append("inner join Userhobby as hobby on hobby.UserhobbyID=[user].UserhobbyID");
26             return db.GetDataSet(strSQL.ToString());
27         }
28     }
29 }

HomePage

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs" Inherits="Vue.Page.HomePage" %>
 2 
 3 <!DOCTYPE html>
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <title>My Vue application</title>
 8     <style type="text/css">
 9         span {
10             color: red;
11         }
12 
13         table {
14             border: 1px solid #808080;
15             text-align: center;
16             width: 80%;
17             margin-left: 10%;
18         }
19 
20         .tr_Color {
21             color: red;
22         }
23     </style>
24 </head>
25 <body>
26     <div id="app">
27         <p>Data Binding：<span>{{ binding }}</span></p>
28         <p>UserName：<span>{{ user.UserName }}</span></p>
29         <p>UserSet：<span>{{ user.UserSet }}</span></p>
30         <hr />
31         <table>
32             <thead>
33                 <tr>
34                     <td>用户编号</td>
35                     <td>用户姓名</td>
36                     <td>用户性别</td>
37                     <td>用户电话</td>
38                     <td>工作类型</td>
39                     <td>工作详情</td>
40                     <td>用户权限</td>
41                     <td>用户类型</td>
42                     <td>入户时间</td>
43                     <td>用户性趣</td>
44                 </tr>
45             </thead>
46             <tbody v-for="list in User">
47                 <tr class="tr_Color">
48                     <td>{{ list.UserID }}</td>
49                     <td>{{ list.UserName }}</td>
50                     <td>{{ list.UserSet }}</td>
51                     <td>{{ list.Userphone }}</td>
52                     <td>{{ list.UserworkType }}</td>
53                     <td>{{ list.WorkDetailsSituation }}</td>
54                     <td>{{ list.UserleverlType }}</td>
55                     <td>{{ list.UserType }}</td>
56                     <td>{{ list.UserCreationtime }}</td>
57                     <td>{{ list.Userhobby }}</td>
58                 </tr>
59             </tbody>
60         </table>
61     </div>
62 </body>
63 <script src="../scripts/jquery.min.js"></script>
64 <script src="../scripts/vue.js"></script>
65 <script src="Home.js"></script>
66 </html>

Home.js

var vm = new Vue({
    el: "#app",
    data: {
        binding: "The first data",
        user: {
            UserID: "",
            UserName: "Zhang SAN",
            UserSet: "male",
            Userphone: "",
            UserworkType: "",
            WorkDetailsSituation: "",
            UserleverlType: "",
            UserType: "",
            UserCreationtime: "",
            Userhobby: "",
        },
        User: [

        ]
    },
    methods: {
        onGetList: function () {
            var that = this;
            that.User.push({
                "UserID": that.user.UserID,
                "UserName": that.user.UserName,
                "UserSet": that.user.UserSet,
                "Userphone": that.user.Userphone,
                "UserworkType": that.user.UserworkType,
                "WorkDetailsSituation": that.user.WorkDetailsSituation,
                "UserleverlType": that.user.UserleverlType,
                "UserType": that.user.UserType,
                "UserCreationtime": that.user.UserCreationtime,
                "Userhobby": that.user.Userhobby
            });
            $.post("/Assembled/LargeCollection.aspx?action=getUser", {}, function (result) {
                if (result) {
                    if (result.flag) {

                        that.User = $.parseJSON(result.data);
                    }
                    else {
                        alert("获取数据失败");

                    }
                }
            }, "json");
        }
    },
    mounted: function () {
        this.onGetList();
    }
});

我这用的是post访问，所以又给他提供了个aspx界面，如果你用MVC可以直接访问控制器

LargeCollection

 1 using Newtonsoft.Json;
 2 using Newtonsoft.Json.Linq;
 3 using System;
 4 using System.Collections.Generic;
 5 using System.Linq;
 6 using System.Web;
 7 using System.Web.UI;
 8 using System.Web.UI.WebControls;
 9 using System.Data;
10 using System.IO;
11 using Model;
12 
13 
14 
15 namespace Vue.Assembled
16 {
17     public partial class LargeCollection : BasePage
18     {
19         protected void Page_Load(object sender, EventArgs e)
20         {
21             string action = GetQueryString("action");
22             string result = string.Empty;
23             if (action.Equals("getUser"))
24             {
25                 result = GetUser();
26             }
27             Response.Clear();
28             Response.Write(result);
29             Response.End();
30         }
31         private string GetUser()
32         {
33             List<User> user = DAL.Family.User();
34             String data = JsonConvert.SerializeObject(user);
35             return GetResult(true, "", data); ;
36         }
37 
38 
39     }
40 }

BasePage

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;


namespace Vue
{
    public class BasePage : System.Web.UI.Page
    {
        //得到页面通过?传递的参数(字符型),如未传,则为string.Empty
        public string GetQueryString(string key)
        {
            string k = string.Empty;
            if (Request.QueryString[key] != null)
            {
                k = Server.UrlDecode(Request.QueryString[key].ToString());
            }
            if (!Model.CFun.IsSafety(k))
            {
                k = string.Empty;
            }
            return k;
        }

        //获取结果
        protected string GetResult(bool flag, string errorMessage)
        {
            JObject jo = new JObject();
            jo.Add("flag", flag);
            jo.Add("errorMessage", errorMessage);
            return JsonConvert.SerializeObject(jo);
        }

        //获取数据
        protected string GetResult(bool flag, string errorMessage, string data)
        {
            JObject jo = new JObject();
            jo.Add("flag", flag);
            jo.Add("errorMessage", errorMessage);
            jo.Add("data", data);
            return JsonConvert.SerializeObject(jo);
        }
    }
}

第五步：运行看下显示的效果

Vueがプロジェクトで使用されています

おすすめ