发新贴  快速回复

Vue2.0学习“心酸”历程之指令和模板(连载第二篇)

暴龙
2017-04-25 11:01

Hello,我又来啦,经过上一次的发帖,渐渐的也有了一些经验,那么接下来,为大家带来第二篇的更新。
上回,我分享了一些Vue最基础的东西,比如说:Vue是什么、Vue的核心、虚拟DOM、MVVM模式还有声明式渲染,不知道大家看完以后有何感受呢?可以在本帖或者上一篇帖子中留言,我们一起探讨。
这次,还是继续分享Vue中基础的东西,和盖楼一样,地基打的越深,楼才能盖得更高嘛~

 

一、Vue的指令
Vue的指令存在于行间,是一种特殊的自定义行间属性。它负责当表达式的值发生改变时,相应的将某些行为应用到DOM上。在Vue中,指令是以v- 开头的。
具体什么样呢?下面我先列出几个来,不是全部,只是帮助理解一下:

v-bind        动态的绑定数据。简写“:”                          v-on        绑定事件监听。简写“@”
v-text        更新数据,会覆盖已有结构                       v-html        可以解析数据中的html结构
v-show        根据值得真假,切换元素的显示             v-for        基于源数据多次渲染元素或模版块

 

光这么看,肯定不容易懂,那我们来用v-bind举个简单的例子吧 

<!--模版-->
<div id="demo">
    <span cutomId="id">{{message}}</span>
</div>
<script type="text/javascript">
    //数据
    var obj = {
        message:"改变它的cutomId",
        id:"123"
    };
    //vm
    var vue = new Vue({
        el:"#demo",
        data:obj
    })
</script>

这个代码中,实际上我是想把 cutomId 的值变成 id 中的数据“123”,但是结果是什么样呢?

 

 

没有变对不对,这是为什么?因为我们没有动态绑定数据,所以这里就要用到 v-bind,下面我写出正确的用法:

<!--模版-->
<div id="demo">
    <span v-bind:cutomId="id">{{message}}</span>
</div>
<script type="text/javascript">
    //数据
    var obj = {
        message:"改变它的cutomId",
        id:"123"
    };
    //vm
    var vue = new Vue({
        el:"#demo",
        data:obj
    })
</script> 

这样写对不对呢?我们再来看一下页面渲染后的样子

 

 

这里已经从“id”变成了“123”!当初我写这里的时候,心里还有点小激动呢,因为学会Vue的第一个指令,离学会Vue又迈进了一步,嘿嘿。
好啦,关于指令的介绍就先到这里,想知道其他的指令该怎么用,那就继续关注我的帖子支持我吧,之后都会一一分享哒。

二、Vue的模版
1、HTML模版
概念:基于DOM的模版,模版都是可解析的有效的HTML。
什么意思?非常简单,看看上面的代码例子,直接写到HTML中的,就叫HTML模版。

1.1 HTML模版中的插值
a)文本插值:就是例子中的这个“{{ message }}”(双大括号),当obj中message的内容发生改变时,HTML中的内容也随之改变。
b)原生的HTML:双大括号输出的是文本,不会解析html。
这里的意思就是,当数据是html代码的时候,比如“<div></div>”,它会被当成一段字符串输出到页面上,而不会被解析。我就不写实例了,大家可以自己练习着写一下,输出来看看。
但是当时我学到这里时,想的是:可我的数据就是这样的啊,我想解析它该怎么办?结果马上老师就讲了一个新的指令“v-html”,该怎么用呢,请往下看: 

<div id="demo">
    <div v-html="message"></div>
</div>
<script type="text/javascript">
    var obj = {
        message:"<div>我是一个div</div>"
    }
    var vue = new Vue({
        el:"#demo",
        data:obj
    });
</script>

按照上面的代码,你们试着写一下,看看输出的结果,是不是把“<div>我是一个div</div>”解析了呢?

c)属性:使用v-bind进行绑定,可以响应变化。这块儿在上面已经说过了,就不多说了。
d)使用javascript表达式:写简单的表达式。具体什么意思呢,我来写个实例

<div id="demo">
    <span>{{1+2}}</span>
</div>
<script type="text/javascript">
    
    var vue = new Vue({
        el:"#demo"
    });
</script>

这里在页面上显示的是什么呢?“1+2”?不对,是“3”。同样的,三目也是可以的

<div id="demo">
    <span>{{true?"yes":"no"}}</span>
</div>
<script type="text/javascript">
    
    var vue = new Vue({
        el:"#demo"
    });
</script> 


这里输出什么都应该知道了吧?没错!是“yes”。
但是要记住,双大括号中,只能写一些简单的表达式,我当时就尝试的用了if和for循环,结果悲催的报错了。后来仔细想了想,可能因为双大括号的智商是有限的,太难了,它理解不了。但是你说,我就是想写些复杂的逻辑怎么办,这里呢,我先卖个小关子,现在就分享这些为时尚早,嘿嘿。

2、字符串模版
template字符串,模版将会替换挂载的元素,挂载元素的所有内容都将被忽略,举个例子:

<div id="demo">
    <span>你好啊</span>
</div>
<script type="text/javascript">
    var obj = {
        message:"hello,vue"
    }
    var str = "<div>我比你厉害</div>";
    var vue = new Vue({
        el:"#demo",
        data:obj,
        template:str
    });
</script> 

按照上面说的,挂载元素的内容将会被字符串模版全部替换,也就是页面上将会显示“我比你厉害”对么?来看结果:

 

 

没错吧,挂载元素已经完全不见了,然后obj也可以在字符中通过双大括号绑定数据,正常写进去就可以,像这样:

var str = "<div>我比你厉害,{{message}}</div>";

输出的内容,就会把message的内容也显示出来:

 

 

这里有一点一定要注意,根节点只能有一个!!切记哈
也就是说如果我这么写:

var str = "<div>我比你厉害,{{message}}</div><div>two</div>";

是错误的,第二个div是不会被渲染出来的,并且Vue会发出警告。
另外还有一种书写的方式,就是将HTML结构写到一个script标签中,并且设置type=”x-template”。

<script type="x-template" id="temp">
    <div>我比你厉害,{{message}}</div>
</script>
<script type="text/javascript">
    var obj = {
        message:"hello,vue"
    }
    var vue = new Vue({
        el:"#demo",
        data:obj,
        template:"#temp"
    });
</script> 

这样写的效果和之前用字符串的方法是一样的,但是建议尽量不要用这种方式去写,因为我们在写项目的时候,js都是外部引用的,这样写的话,复用性不强啊。

3、-render函数
这里是最让我头疼的,非常不好理解,我也是摸索了半天才弄明白,我尽量把我理解的都详细的分享出来,希望你们也能弄明白。
之前说了两种模版,不管怎么写,都脱离不了html结构,而render函数呢,是让我们能自己去创建标签,非常接近编译器。
头疼时候来啦,我先写个例子,对照例子,一一解释吧

<div id="demo"></div>
<script type="text/javascript">
    var obj = {
        message:"hello,vue"
    }
    var vue = new Vue({
        el:"#demo",
        data:obj,
        render(createElement){
            return createElement(
                "ul",
                [
                    createElement("li",1),
                    createElement("li",2),
                    createElement("li",3)
                ]
            )
        }
    });
</script> 

好,我们来仔细看下,有没有发现Vue里多了一个render函数,它的传参就是createrElement(创建元素),之后要把我们创建的结构return出来,再往后就是要通过createrElement来创建结构了。createrElement有这么几个传值,createrElement(标签名,{数据对象},子元素)。
第一个传值“标签名”就不用多说了,第二个传值“数据对象”是可选的,用于绑定一些自定义属性,在例子中没有写出来,但是之后会详细说哒。第三个传值“子元素”,这里可以是文本也可以是数组,例子中已经写得很清楚了哦。
哎呀,写了这么多,忘了给大家打印出来看看了先,哈哈,真不好意思,赶快上图:

 

 

没有错吧,render里写得结构,输出出来就是这个样子嘀。
那么接下来,我们就来好好说说这个数据对象吧。还是老样子,先上例子

render(createElement){
            return createElement(
                "ul",
                {
                    class:{
                        bg:true
                    },
                    style:{
                        fontSize:"30px"
                    },
                    domProps:{
                        innerHTML:"<li>我是HTML</li>"
                    },
                    on:{
                        click:function(){
                            alert(1);
                        }
                    }
                },
                [
                    createElement("li",1),
                    createElement("li",2),
                    createElement("li",3)
                ]
            )
        } 

首先我们先说class和style,这里要注意的是,class和style不是用我们常规的方法去写(class:”bg font”),这么写是错误的,render中绑定class和style是要遵循v-bind:class和v-bind:style的方法,具体的这里不多做说明了,你只要记住,按照例子中的格式去写就好,以后的连载中会具体说道,实在感兴趣的朋友,可以自己先去看下API,或者评论区留言找我来探讨。
之后呢,就是domProps,它是DOM元素的自身属性,比如代码中写到的innerHTML,利用innerHTML可以替换掉DOM元素中的内容,那么不言而喻,例子中ul里的三个li会被“<li>我是HTML</li>”所替换掉。
最后就是on,用来在元素身上绑定事件的,用法非常简单,连我这么个小白都能很轻松理解的,我相信看过例子之后,你肯定能明白。

 

 

其实除了以上提到的这四种数据对象属性之外,还有其他的属性,我来列出几种,这里只要知道就好,还没有必要知道它们该怎么用,因为它们都和组件有关系,将来我会在组件的内容中做详细分享哒。

nativeOn:{}        监听原生事件                       directives:{}        自定义指令
scopedSlots:{}        slot作用域                       slot:{}        定义slot名称
key:”key”        给元素添加唯一标识               ref:”ref”        引用信息


Ok,让我来深深的,深深的吸一口气,大喊一声:终于把render分享完啦!!!这里在我刚开始学的时候,真心有点困难。说实话,纯用文字来把这块儿讲清楚,对我来说还是有点难度的,毕竟这是我第二次发分享内容啊,文笔和表达能力还没完全过关。希望你们有时间也能一起来看看视频,一块儿学习讨论,让我感觉学习的路上不那么孤单哈~

好了,连载第二篇,到此也已经结束了。各位看官,请手下留情,如果有哪里说的不对,尤其是render这块儿,请指点,我会在下次分享时做下更正,如果哪里没有解释清楚或者哪里没明白的,也请给我留言,我会尽自己所能一一解答的。
再次感谢大家的支持,你们的支持,就是对我最大的鼓励,是支撑我继续写下去的动力。好啦,肉麻的话就不多说了,咱们下次分享时再见!

 
低智废物新手

很不错

2017-04-26 10:15  回复本帖
lyj4532556

感谢,写得通俗易懂,我又进步不少咯

2017-05-02 09:04  回复本帖
 
疯子蚁

作者名字竟然没有链接

2017-05-03 16:54  回复本帖
妙味用户808555

lyj4532556 2017-05-02 09:04发表的内容:

感谢,写得通俗易懂,我又进步不少咯

111

2017-05-12 13:35  回复本帖
jean

第二讲就到render函数了啊 可以  这很Vue!

2017-05-12 15:42  回复本帖
暴龙

jean 2017-05-12 15:42发表的内容:

第二讲就到render函数了啊 可以  这很Vue!

下一讲就该出实例啦

2017-05-12 17:40  回复本帖
妙味用户390008

请教一下,实例中任务计划表的list双击后实现编辑功能,我双击在控制台是是成功的,但是那个editing的class的是怎么写的不明白,没法编辑

2017-05-15 13:39  回复本帖
妙味用户910397

看你写的挺欢乐的 自娱自乐有意思没

2017-05-27 23:56  回复本帖
暴龙

妙味用户910397 2017-05-27 23:56发表的内容:

看你写的挺欢乐的 自娱自乐有意思没

我看有不少人看呢 应该不算自娱自乐吧 不过分享知识 确实挺快乐的

2017-05-31 14:30  回复本帖
 
妙味用户748827

感谢你的分享,支持~

看完视频,想要重温的时候来看的这篇。觉得这样复习的效果很好

2017-06-04 02:18  回复本帖
 
小葵Siki

写得很好丫,通俗易懂~👍

2017-06-06 11:19  回复本帖
 
mm395404827

分享的确实不错,有没有更多关于vue的视频啊

2017-06-28 19:38  回复本帖
妙味用户755739

你说的那个视频在哪里看的

2017-07-07 12:37  回复本帖
 
peiliboy

通俗易懂

2017-07-08 15:59  回复本帖
 
peiliboy

加油,继续写啊

2017-07-08 16:00  回复本帖
 
妙味用户605351

感谢分享

2017-07-11 21:40  回复本帖
登录 后才可以发表回复