Vue is used in projects

序：Our goal is to apply the Vue to the project to implement the application functionality。

       Individuals say that using Vue for functionality in a project is a great option。

       Vue is really easy to use。

 

Vue.js using template-based HTML syntax allows developers to declaratively Vue DOM instance bound to the underlying data.

The core Vue.js is a template that allows you using simple declarative syntax of the data into the DOM rendering system.

When combined response system, changes in the application state, Vue intelligently re-calculate a minimum cost and render component applied to the DOM operations.

 

Create a root instance new Vue ({el: '#app'})

data for defining properties

methods of defining the function, the function may return values ​​return.

{{}} For outputting object attributes and function return values.

 

v-html instructions: to output

v-bind instructions: mainly used for binding properties

v-on instruction: to bind events

v-model instructions: form data for two-way binding

v-if instructions: for determining the expression

v-else instruction: add an "else" blocks to the v-if

v-for instructions: data for cycle and rendering

 

In addition to data attributes, Vue also provides some examples of useful properties and methods. They have a $ prefix, so that the user defined attributes distinguish

 

Vue core instruction

Default (v-model and v-show)

 

Hook function

bind: Only called once, the first time is bound to the command element is invoked with this hook can define a function that executes once initialization operation when binding.

inserted: Call (there is a parent node can call, do not exist in the document) is inserted into the parent binding element.

update: Binding element is updated template where the call, regardless of whether the binding value changes. By comparing the binding values ​​before and after the update, you can ignore unnecessary template update (hook function parameters detailed below).

componentUpdated: Where the template is called when a bound element to complete the update cycle.

unbind: Only called once, when the call instruction and tie element solution.

 

Hook function parameters

el: instruction bound element, can be used to directly operate DOM.

binding: an object that contains the following properties:

                        name: the name of the instruction, not including  v- the prefix.

                        value: bound value instructions, such as:  v-my-directive="1 + 1"The value value is  2.

                        oldValue: previous value of command binding, only in  update and  componentUpdated available hooks. Regardless of whether the value change are available.

                        expression: expression or variable name binding value. For example  v-my-directive="1 + 1" , the value of expression is  "1 + 1".

                        arg: instructions passed parameters. For example  v-my-directive:foo, arg value is  "foo".

                        modifiers: a modifier of the object contains. For example:  v-my-directive.foo.barthe value of the object modifiers modifier is { foo: true, bar: true }

vnode: Vue compiler-generated virtual node.

oldVnode: a virtual node only  update and  componentUpdated available hooks.

 

Operation :

Step one: Create a new application based WebForms or MVC application

This is based on my WebForms applications

New applications to build a good library Model layer and the DAL

Build a data model ADO.NET Entity Model layer, Code First selected from a database library you use to import table

Step two: build a package constraints and 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);
        }
    }
}

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