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 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

创建根实例  new Vue({ el: '#app' })

data 用于定义属性

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

v-html指令：用于输出

v-bind指令： 主要用于属性绑定

v-on指令：用来绑定事件的

v-model指令：用于表单数据的双向绑定

v-if 指令：用于表达式的判断

v-else指令：给 v-if 添加一个 "else" 块

v-for指令：用于循环和渲染数据

除了数据属性，Vue 还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来

Vue 核心指令

默认( v-model 和 v-show )

钩子函数

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数的参数

el: 指令所绑定的元素，可以用来直接操作 DOM 。

binding: 一个对象，包含以下属性：

                        name: 指令名，不包括 v- 前缀。

                        value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。

                        oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

                        expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

                        arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

                        modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }

vnode: Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

操作：

第一步：新建一个基于WebForms的应用程序或MVC应用程序

我这是基于WebForms的应用程序

新建好应用程序再建类库Model层和DAL层

在Model层搭建一个ADO.NET实体数据模型，来自数据库的Code First 选好你要用到的库导入表

第二步：搭建约束和Nuget包

             DAL   

                         引用：

                                   Model

                      程序集：

                                    System.Configuration

                                    System.Xml

                                    System.Xml.Linq

          应用程序

                         引用：

                                   Model

                                   DAL

                     Nuget包：

                                    Newtonsoft.Json

第三步：导入Vue.js

                        

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

DBbase

using Model;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DAL
{
    public class DBbase
    {
        //读取配置文件，连接数据库语句
        public static string strCon = System.Configuration.ConfigurationManager.ConnectionStrings["Family"].ConnectionString;

        //实例化连接对象 con  
        SqlConnection con = new SqlConnection(strCon);

        //检测连接是否打开  
        public void Connection()
        {
            if (this.con.State == ConnectionState.Closed)
            {
                this.con.Open();
            }
        }
        //根据提供的strSQL语句 访问数据库，返回List集合
        public List<User> GetDataSet(string strSQL)
        {
            Connection();
            try
            {
                SqlDataAdapter da = new SqlDataAdapter(strSQL, con);
                DataSet ds = new DataSet();
                da.Fill(ds);
                List<User> list = new List<User>();
                if (ds.Tables.Count > 0)
                {
                    for (int i = 0; i < ds.Tables.Count; i++)
                    {
                        foreach (DataRow dr in ds.Tables[i].Rows)
                        {
                            User obj = new User();
                            if (ds.Tables[i].Columns.Contains("UserID")) obj.UserID = Convert.ToString(dr["UserID"]);
                            if (ds.Tables[i].Columns.Contains("UserName")) obj.UserName = Convert.ToString(dr["UserName"]);
                            if (ds.Tables[i].Columns.Contains("UserSet")) obj.UserSet = Convert.ToString(dr["UserSet"]);
                            if (ds.Tables[i].Columns.Contains("Userphone")) obj.Userphone = Convert.ToString(dr["Userphone"]);
                            if (ds.Tables[i].Columns.Contains("UserworkType")) obj.UserworkType = Convert.ToString(dr["UserworkType"]);
                            if (ds.Tables[i].Columns.Contains("WorkDetailsSituation")) obj.WorkDetailsSituation = Convert.ToString(dr["WorkDetailsSituation"]);
                            if (ds.Tables[i].Columns.Contains("UserleverlType")) obj.UserleverlType = Convert.ToString(dr["UserleverlType"]);
                            if (ds.Tables[i].Columns.Contains("UserType")) obj.UserType = Convert.ToString(dr["UserType"]);
                            if (ds.Tables[i].Columns.Contains("UserCreationtime")) obj.UserCreationtime = Convert.ToDateTime(dr["UserCreationtime"]);
                            if (ds.Tables[i].Columns.Contains("Userhobby")) obj.Userhobby = Convert.ToString(dr["Userhobby"]);
                            list.Add(obj);
                        }
                    }
                }
                return list;
            }
            catch (Exception)
            {

                throw;
            }
        }
    }
}

Family

using Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DAL
{
   public class Family
    {
        //实例化一个DBbase对象
        static DBbase db = new DBbase();

        //查询用户数据 
        public static List<User> User()
        {
            //通过实体中的属性访问 拼接一个你需要的SQL语句
            StringBuilder strSQL = new StringBuilder();
            strSQL.Append("Select Theserialnumber, UserID, UserName, UserSet, Userphone, work.UserworkType,Details.WorkDetailsSituation,[level].UserleverlType,[type].UserType, UserCreationtime, hobby.Userhobby from [User]  ");
            strSQL.Append("inner join Work on Work.UserworkID=[User].UserworkID  ");
            strSQL.Append("inner join [level] on [level].UserlevelID=[user].UserlevelID  ");
            strSQL.Append("inner join UserType as [type] on [type].UserTypeID=[USER].UserTypeID  ");
            strSQL.Append("inner join WorkDetails as Details on Details.WorkDetailsID=Work.WorkDetailsID  ");
            strSQL.Append("inner join Userhobby as hobby on hobby.UserhobbyID=[user].UserhobbyID");
            return db.GetDataSet(strSQL.ToString());
        }
    }
}

HomePage

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HomePage.aspx.cs" Inherits="Vue.Page.HomePage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Vue application</title>
    <style type="text/css">
        span {
            color: red;
        }

        table {
            border: 1px solid #808080;
            text-align: center;
             80%;
            margin-left: 10%;
        }

        .tr_Color {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>Data Binding：<span>{{ binding }}</span></p>
        <p>UserName：<span>{{ user.UserName }}</span></p>
        <p>UserSet：<span>{{ user.UserSet }}</span></p>
        <hr />
        <table>
            <thead>
                <tr>
                    <td>用户编号</td>
                    <td>用户姓名</td>
                    <td>用户性别</td>
                    <td>用户电话</td>
                    <td>工作类型</td>
                    <td>工作详情</td>
                    <td>用户权限</td>
                    <td>用户类型</td>
                    <td>入户时间</td>
                    <td>用户性趣</td>
                </tr>
            </thead>
            <tbody v-for="list in User">
                <tr class="tr_Color">
                    <td>{{ list.UserID }}</td>
                    <td>{{ list.UserName }}</td>
                    <td>{{ list.UserSet }}</td>
                    <td>{{ list.Userphone }}</td>
                    <td>{{ list.UserworkType }}</td>
                    <td>{{ list.WorkDetailsSituation }}</td>
                    <td>{{ list.UserleverlType }}</td>
                    <td>{{ list.UserType }}</td>
                    <td>{{ list.UserCreationtime }}</td>
                    <td>{{ list.Userhobby }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="../scripts/jquery.min.js"></script>
<script src="../scripts/vue.js"></script>
<script src="Home.js"></script>
</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

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using Model;



namespace Vue.Assembled
{
    public partial class LargeCollection : BasePage
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string action = GetQueryString("action");
            string result = string.Empty;
            if (action.Equals("getUser"))
            {
                result = GetUser();
            }
            Response.Clear();
            Response.Write(result);
            Response.End();
        }
        private string GetUser()
        {
            List<User> user = DAL.Family.User();
            String data = JsonConvert.SerializeObject(user);
            return GetResult(true, "", data); ;
        }


    }
}

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);
        }
    }
}

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