Vue_Share_Mol

目录

• Vue_Share_Mol
  • 按照惯例，扯闲篇
    • 伟大的jQuery
    • 坑
    • 以arttemplate说明
  • 进入Vue
    • 引言
    • 入门须要注意的重点
    • 深刻mvc
  • 总结

Vue_Share_Mol

@(个人分享)[Vue]

按照惯例，扯闲篇

本次分享创建在一个假设为前提，假设大家都已经熟练地使用jquery。

伟大的jQuery

 不得不认可，jquery是一个很是伟大的发明，jquery有很是强大的选择器，比起getelementById来，不知道要好用多少，并且它还为开发人员作了不少浏览器兼容方面的工做，最明显的例子就是jQuery.Ajax()。有了这个ajax方法，你不用再云根据浏览器内核的不一样而建立不一样的对象发送请求。
 jQuery是基于DOM来操做的。也就是说，咱们在操做页面的时候，必定是先获取到了某个dom元素，再对这个dom进行操做。好比我想找到页面上一个id为"mollable"的label元素，并修改的显示文字为“修改后的文字”，我须要这样作：

$('label#mollable').html('修改后的文字');

 这样看起来很好，目的明确、操做清晰。

坑

 有不少时候，咱们须要把数据从服务端获取过来，再加载到前端。这个时候，咱们就须要大量的拼接HTML。好比，我须要在ul上面新增一条名为“《大话代码架构》”的记录。
 原始HTML以下：

<ul>
    <li>《春风八百里，不如碰见你》</li>
    <li>《ASP.net入门很简单》</li>
</ul>

 我要的js代码看起来像是这样：

$('<li>《大话代码架构》</li>').apendTo($('ul'));

 这是比较简单的代码。在不少时候，咱们要增长的dom元素远远没有这么简单。那么，html拼接的过程就极有可能出错。 这时，出现了“模板引擎”，我之前经常使用的模板引擎是arttemplate。固然，也有其它很是优秀的引擎框架。

以arttemplate说明

 所谓模板引擎，你们必定据说过，像C#里面有伟大的NVelocity，或者大家使用过的一些CMS模板也能够算是模板引擎。模板引擎的思想，就是先搞一个模板，而后再这个模板上挖坑，最后用数据来填坑。下面，我将以arttemplate来讲明.
 假设我有这样一个页面，这个页面上要展现人员的信息，人员信息包含姓名、性别、年龄。

<div id="container">
    <ul id="ulPersonList">
        <li>
            <div>
                <img src="头像" />
                <label>姓名</label>
                <label>性别</label>
                <label>年龄</label>
            </div>
        </li>
    </ul>
</div>

 接下来，我要根据这个页面来挖坑了，挖坑的原则很简单，就是把变化地的方都找出来，用“占位符”来代替。好比上面代码中的头像、姓名、性别、年龄这几个地方都是会变的，因此我就把他们用用占位符来表示，以下：

<script id="test" type="text/html">
    <li>
        <div>
            <img src="{{headImg}}" />
            <label>{{name}}</label>
            <label>{{gender}}</label>
            <label>{{age}}</label>
        </div>
    </li>
</script>

 第三步，我要把数据填充到模板中的“占位符”上。

// 定义一个数据
var data = {
    headImg:"/img/1.jpg",
    name:"testName",
    gender:"男",
    age:32
    };
// 调用arttemplate的template方法，传入数据、模板，获得结果字符串
var html = template('test', data);
// 将获得的字符串拼接到ul中
$(html).appentTo($('ul'));

 到这里为止，模板引擎的示例就演示完了。能够看到，核心代码是

// 调用arttemplate的template方法，传入数据、模板，获得结果字符串
var html = template('test', data);

 这句话的目的是获得一个字符串，这个字符串就好像咱们本身写字符串拼接代码同样。只不过有了arttemplate的帮助，咱们能够借助模板来获得目的字符串。但，本质仍是要获得一个字符串，让后面的代码把获得的字符串拼接到dom元素上。

进入Vue

引言

 上面咱们提到了jquery的dom操做和模板引擎。若是程序员使用jquery或模板引擎来绘制页面，那你必须同时关心前端页面元素和后台数据。有没有一种技术，让咱们像asp.net mvc同样，只须要进行数据绑定，就能够进行页面显示了。

PS:这里个人描述不太清晰，个人目的是这样的，我在cs文件中定义一个对象ViewBag.Num=1，我以页面中能够经过@ViewBag的形式将数字1显示在页面上。这就是我想表述的内容。

 这就是一种mvc思想，也有人叫mvvm，可是我不想解释得那么复杂（主要是我不会）。让数据的变化反应到页面上，也让页面的变化反应到数据上。

eg.

<div id="el">
    <input type="number" v-model="fir" />+
    <input type="number" v-model="sec" />=
    <label>{{parseInt( this.fir)+ parseInt( this.sec)}}</label>
</div>  
<script>
// 建立一个Vue对象 它的构造函数是之样的：new Vue(参数)
// 只不过参数是一个对象而以。
new Vue({
            el:"#el",// 指示Vue容器是一个id为el的标签
            data:{fir:0,sec:0,result:0}// vue中用到的数据。
        });
</script>

运行效果：

们把js代码中data看作是mvc中的Model。把<div id='el'></div>当作是视图，这样就完成了“双向绑定”。

 这就是一个简单的vue示例,有没有发现，咱们已经不用再使用“先获取dom元素，再进行数据绑定”的方式来显示数据了。
 若是咱们把页面切分红两部分。第一部分是<div id="el"></div>。第二部分是data:{...}。那么，完成能够由两个不一样的人来未完成这两个部分。它们之间没有太多的耦合。烈军属data的人，只负责提供数据，不须要关心页面展现。而写页面的人，只须要把“字段”展现到界面上，不须要关心这些字段是怎么来的。
 mvc中，还有一个很重要的部分，叫controller，在vue中，对应于methods和cumputed。
 先来看metchods。

new Vue(
{
    el:'#el',
    data:{fir:0,sec:0,result:0},
    // 我定义了methods中包含元素,注意，methods不是我创造的，而是vue规定的
    methods:{
        // 定义一个名为clickAdd的函数，这个函数用来把Model中的fir和sec相加，
        // 并把结果赋给Model中的result
        clickAdd:function(){this.result=this.fir+this.sec},
    }
}
);

 methods是一个元素，这个元素被定义在构造函数的输入参数中。methods这个元素是一个对象，这个对象能够包含0个或多个函数。像上面的代码就包含了一个函数。接下来看看这个methods怎么用。
 按照上面所说的，咱们再写一个页面

<div id='el'>
<input type="number" v-model="fir" />+
    <input type="number" v-model="sec" />
    <button type='button' onclick='showResult()'>=</button>
    <label>{{result}}</label>
</div>

 这样写完之后，浏览器会告诉你，showResult没有定义。这里须要注意，你写在vue块（我把<div id='el'></div>所包含的代码块叫“vue块“）中的属性或值，必定要符合vue的风格。幸亏，咱们只须要记住两种风格就能够。

风格1-内容

 一般来讲，咱们指定一个label的内容会是这样：

<label>{{字段}}</label>

 能够看到，语法结构就是两个大括号包含的一个字段名，这个字段必定要在data属性中定义好。

new Vue({
el:'#el',
data:{字段：'mol'}
});

风格2-属性

 若是我要指定一个属性，如点击事件的属性，我应该这样作：

<label v-on:click="myClick()"></label>

 固然，你非要使用onclick属性来定义单击事件的话，也无可厚非，只不过这样的话，你就不能操做vue内部的对象了。

注意,v-on:click="myClick()"中的myClick这个函数必定要在methods中定义。

new Vue({
el:"#el",
data:{},
methods:{
    myClick:function(){
        这里是你要作的动做
    }
}
});

入门须要注意的重点

v-show和dislay属性

  咱们都知道，控制一个元素是否显示，能够设计这个元素的style="display:值"，值为block时，显示；值为none时，元素不显示。而在vue中，有一个属性叫v-show，它也是控制元素是否显示的。也就是说，下面两句代码的效果看起来是同样的。

<div style="display:none;">我要想被隐藏</div>
<div v-show="false">我也想要被隐藏</div>

 之因此是“看起来是同样的”，是由于：display:none的做用是，将dom元素的可见属性设置为none;而v-show="false"是根本不绘制这个dom元素。能够经过查看网页源码来验证我说的是否正确。

if & for

 if和for就不用我解释他们是干什么的了，直接上代码：

<div v-if="myage<12">小学</div>
<div v-else-if="myage<16">初中</div>
<div  v-else-if="myage<19">高中</div>
<div v-else-if="myage<23">大学</div>
<div v-else="">工做</div>
<hr>
<ul>
    <li v-for="p in team">
        姓名：{{p.name}}<br>
        年龄：{{p.age}}
    </li>
</ul>
<script>
var vueNode=new Vue({
            el:"#app",
            data:{
            myage:32,
            team:[{name:'mol',age:32},{name:'李老板',age:33},{name:'嚣张哥',age:34}]}
        });
</scrit>

深刻mvc

 能够看到，vue的属性都是以v-开头。接下来，咱们体验一下，vue的mvc思想及双向绑定。
 前面咱们已经经过for循环来展现了一个列表，它看起来像是这样：

加li，应该怎么作。
 熟悉jquery的你，必定会说，先获取到ul，再进行元素的添加，它看起来像是这样：

$('ul').append('<li>姓名：小曾，年龄：奔三</li>');

 这样作彻底没有问题。但这样作有一个问题，就是前端和数据之间是“强耦合”的。咱们更但愿有这样两个程序员，一我的写后端（数据），另外一我的写前端（页面）.而vue就能够达到这样的效果。
步骤1：前端人员写页面

<div id='el'>
    <ul>
        <li v-for="p in team">
            姓名：{{p.name}}<br>
            年龄：{{p.age}}
        </li>
    </ul>
    <!--下面是让用户动态输入信息的地方-->
    姓名：<input type="text" v-model="newName" />
    <br>
    年龄：<input type="number" v-model="newAge" />
    <br>
    <button v-on:click="addUser">添加</button>
</div>

步骤2：后端人员写数据

new Vue({
            el:"#app",
            data:{
                team:[{name:'mol',age:32},{name:'李老板',age:33},{name:'嚣张哥',age:34}],
                newName:'',newAge:''
            },
            methods:{
                addUser:function(){                 this.team.push({name:this.newName,age:this.newAge});
                }
            }
        });

完事了！
 看见木有？后端工程师只须要操做data中定义的数据就能够了。当team数据发生变化时，页面上的展现也相应地发生了变化，看起来像是这样：

总结

 作为一个.net出身的程序员来讲，可能没法理解，作为一个“后端程序员”，怎么可能简单地写几行js就了事？再说了，js不该该是前端工程师的责任吗？  首先，前端工程师的js广泛没有程序员的好；其次，js是一种很牛X的开发语言。如今有不少网站或应用均可以直接使用js来开发。我打算下次分享一个叫electro的技术。它就是用js来编写应用的一种技术。