(第一季)Vue2.0-内部指令

github地址

案例地址
github

vue2.0起步

介绍

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

下载

vue2.0官网

下载.png

引入到页面

<script type="text/javascript" src="/js/vue.js"></script>

安装web服务器

npm install -g live-server
启动服务:live-server

live-server.png

第一个vue程序(声明式渲染)


    <div id="app">
            {{message}}
    </div>

    <script type="text/javascript">
        var app=new Vue({
             //绑定id为app的元素-实例与html元素绑定
            el:'#app',
            //数据源
            data:{
                //数据源里的对象
                message:'Hello Vue!'
            }

        })
    </script>

条件渲染(v-if v-else-if v-else v-show)

v-if v-else-if


    <div id="app">
        //v-if绑定isLogin数据源，数据源为true时，页面显示选中的复选框
        <div v-if="isLogin">
                <input type="checkbox"  checked>记住密码
        </div>
         //为false时显示不选中的复选框
        <div v-else >
                 <input type="checkbox" >记住密码 
        </div>
          
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isLogin:true
            }
        })
    </script>

v-else-if 2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

        //判断条件
       <div v-if="isEn== 'A' ">
            A
        </div>
        <div v-else-if="isEn== 'B'">
            B
        </div>
        <div v-else-if="isEn== 'C'">
           C
        </div>
        <div v-else>
           D
        </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isEn:'A'
            }
        })
    </script>

v-show

    <div id="app">
        //true显示false不显示但与if不同的是，v-show无论true还是false，都已经加载了,但v-if是无预加载的.
        <div v-show="isDisplay">
                <input type="button" value="登陆">
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                isDisplay:true
            }
        })
    </script>

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if与v-show的区别？
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表循环(v-for)

简单的数组循环

<div id="app">
        <ul>
            <!--v-for放到要循环的标签上面-->
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>
    </div>
    
  <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                //数组对象
                items:[5,6,8,2,9]
            }
        })
  </script>

排序

    <div id="app">
        <ul>
            <!--换成新命名的sortItems-->
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
    </div>
    
    <script type="text/javascript">
        var app= new Vue({
            el:'#app',
            data:{
                items:[51,61,81,21,91,3]
            },
            computed:{
                //从新命名不能与items冲突
                sortItems:function(){
                    return this.items.sort(function(a,b){
                        return a-b;
                    })
                }
            }
        })

对象循环输出

<div id="app">
     <table>
            <tr><th>姓名</th><th>年龄</th></tr>
            <tr v-for="student in students">
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
            </tr>
  </table>
</div>
    
 <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'张三',age:30},
                    {name:'李四',age:20},
                    {name:'王五',age:10}
                ]
            }
        })
 </script>

输出索引序号

<div id="app">
<table>
            <tr><th>序号</th><th>姓名</th><th>年龄</th></tr>
            <tr v-for="(student,index) in students">
                <td>{{index+1}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
            </tr>
        </table>
</div>
    
 <script type="text/javascript">
        var app=new new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'张三',age:30},
                    {name:'李四',age:20},
                    {name:'王五',age:10}
                ]
            }
        })
 </script>

对象排序

<div id="app">
     <table>
            <tr><th>姓名</th><th>年龄</th></tr>
            <tr v-for="student in sortStudents">
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
            </tr>
  </table>
</div>
    
 <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                students:[
                    {name:'张三',age:30},
                    {name:'李四',age:20},
                    {name:'王五',age:10}
                ]
            },
            computed:{
                sortStudents:function(){
                  return sortByKey(this.students,'age');
                }
            }
        })

        //数组对象方法排序:
        function sortByKey(array,key){
                return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
 </script>

v-for迭代对象

<div id="app">
      <ul>
            <li v-for='animal in animals'>
                {{animal}}
            </li>
        </ul>
</div>
    
 <script type="text/javascript">
        var app= new Vue({
            el:'#app',
            data:{
               animals:{
                    name:'狗',
                    cry:'汪汪'
                }
            }
        })
 </script>

键名键值索引显示

<div id="app">
     <ul>
            <li v-for="(value,key,index) in animals">
                {{index}} - {{key}} - {{value}}
            </li>
        </ul>
</div>
    
 <script type="text/javascript">
        var app= new Vue({
            el:'#app',
            data:{
               animals:{
                    name:'狗',
                    cry:'汪汪'
                }
            }
        })
 </script>

v-text&v-html

    <div id="app">
        <span>{{message}}</span>
        <!-- v-text可以 -->
        <span v-text="message"></span>
        <!--v-html 输出HTML标签-->
        <span v-html="link"></span>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                message:'hello world!',
                link:'<a 
            }

        })
    </script>
 </script>

v-on 绑定事件监听

<div id="app">
        本场比赛得分:{{fenshu}}
        <p>
            <button v-on:click="jiafen">加分</button>
            <!--@缩写语法-->
            <button @click="jianfen">减分</button>
        </p>
        <p>
            <!--keyup键盘监听事件当按下enter时触发事件或者写成enter健的值13-->
            <input type="text" v-on:keyup.enter="onEnter" >
           
        </p>
    </div>

    <script type="text/javascript">
        var app= new Vue({
            el:'#app',
            data:{
                fenshu:0
            },
            //可以写多个方法
            methods: {
                jiafen:function(){
                    this.fenshu++;
                },
                jianfen:function(){
                    this.fenshu--;
                },
                onEnter:function(){
                  this.fenshu= this.fenshu+2;
                }
            }
        })
    </script>

全部按键别名

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

按键对应的编码

image.png

v-model 指令

v-model 指令在表单控件元素上创建双向数据绑定。

v-model.png

    <div id="app">
        <p>原始文本信息: {{message}} </p>
        <h2>文本框</h2>
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
        <p>v-number:<input type="text" v-model.number="message"></p>
        <p>v-trim:<input type="text" v-model.trim="message"></p>
        <h2>文本域</h2>
        <textarea v-model="message"></textarea>
        <h2>多选框绑定一个值</h2>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
        <h2>多选框绑定一数组</h2>
        <input type="checkbox" id="zs" value="张三" v-model="web_names">
        <label for="zs">张三</label>
        <input type="checkbox" id="ls" value="李四" v-model="web_names">
        <label for="ls">李四</label>
        <input type="checkbox" id="ww" value="王五" v-model="web_names">
        <label for="ww">王五</label>
        <p>{{web_names}}</p>
        <h2>单选框的绑定</h2>
        <input type="radio"  id="one" value="男"  v-model="sex">
        <label for="one">男</label>
        <input type="radio"  id="two" value="女"  v-model="sex">
        <label for="two">女</label>
        <p>你选择的性别是:{{sex}}</p>
        <h2>select列表</h2>
        <select  v-model="selected">
            <option value="">请选择网站</option>
            <option value="www.baidu.com">百度</option>
            <option value="www.google.com">谷歌</option>
        </select>
        <p>你选中的网站是:{{selected}}</p>
    </div>
    <script type="text/javascript">
        var app =  new Vue({
            el:'#app',
            data:{
                message:'hello world',
                isTrue:true,
                web_names:[],
                sex:'男',
                selected:''
            }
        })
    
    </script>

修饰符

.lazy
懒加载每发生变化时输入框的值与数据进行同步变成鼠标离开时

.number
自动将用户的输入值转为数值类

.trim
去掉首尾的空格

v-bind指令标签属性赋值

   <style>
        .classA{
            color: chartreuse
        }
        .classB{
            color: red
        }
        .classC{
            font-size: 10%;
        }
    
  </style>


    <h1>v-bind实例</h1>
    <hr>
    <div id="app">
        <!--v-bind:src动态绑定了src的值-->
        <p><img v-bind:src="imgSrc"  width="200px"></p>
         <!--:href缩写语法-->
        <p><a :href="url" target="_blank" >郭少华</a></p>
        <hr>
        <div :class="className">
            绑定class
        </div>
        <hr>
         <!--判断如果isOK为正确的时候classA样式生效-->
        <input type="radio" value="正确" id="zq" v-model="isOk">
        <label for="zq">正确</label>
        <input type="radio" value="错误" id="cw" v-model="isOk">
        <label for="cw">错误</label>
        
         <div :class="{classA:isOk=='正确' }">
            绑定class中的判断
        </div>
        <hr>
         <!--绑定多个class样式绑定class数组-->        
        <div :class="[ysA,ysC]">
             绑定class数组
        </div>
        <hr>
         <!--三元运算符-->
         <div :class="isOk=='正确'?ysA:ysB">
            class中的三元运算符
        </div>
        <hr>
        <!--color是CSS的写法后面是对应的绑定-->
        <div :style="{color:red,fontSize:font}">
            绑定style
        </div>

         <!--color是CSS的写法后面是对应的绑定-->
         <div :style="styleObject">
                绑定style对象
         </div>

    </div>
    <script type="text/javascript">
        var app =  new Vue({
            el:'#app',
            data:{
                imgSrc:'http://isujin.com/wp-content/uploads/2017/12/wallhaven-594603.jpg',
                url:'http://www.guoshaohua.cn',
                className:'classA',
                isOk:'正确',
                ysA:'classA',
                ysB:'classB',
                ysC:'classC',
                red:'red',
                font:'20px',
                styleObject:{
                    color:'green',
                    fontSize:'40px'
                }
            }
        })
    </script>

其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译,直接输出原始值.在标签中加入v-pre就不会输出vue中的data值了。

<div id="app">
        <!--显示{{message}}原始文本-->
        <div v-pre>
            {{message}}
        </div>
    </div>

    <script type="text/javascript">
        var app =  new Vue({
            el:'#app',
            data:{
                message:'hello world'
            }
        })
    </script>

v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

 <div v-cloak>
    渲染完成之后才显示！
 </div>

v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

 <div id="app">
        <!--v-once只进来渲染一次值一直是hello world-->
        <div v-once>第一次绑定的值:{{message}}</div>
        <input type="text"  v-model="message">
        <div>{{message}}</div>
    </div>

    <script type="text/javascript">
        var app =  new Vue({
            el:'#app',
            data:{
                message:'hello world'
            }
        })
    </script>

最后编辑于：2018.01.29 14:04:39

?著作权归作者所有,转载或内容合作请联系作者

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,172评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,346评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
开封第一讲书人阅读 159,788评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,299评论 1赞 288
?港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,409评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,467评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,476评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,262评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,699评论 1赞 307
?护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,994评论 2赞 328
?白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,167评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,827评论 4赞 337
?日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,499评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,149评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,387评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,028评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,055评论 2赞 352

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

(第一季)Vue2.0-内部指令

(第一季)Vue2.0-内部指令

github地址

vue2.0起步

介绍

下载

安装web服务器

第一个vue程序(声明式渲染)

条件渲染(v-if v-else-if v-else v-show)

v-if v-else-if

v-else-if 2.1.0 新增

v-show

列表循环(v-for)

简单的数组循环

排序

对象循环输出

输出索引序号

对象排序

v-for迭代对象

键名键值索引显示

v-text&v-html

v-on 绑定事件监听

全部按键别名

按键对应的编码

v-model 指令

修饰符

v-bind指令标签属性赋值

其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

v-cloak指令

v-once指令

推荐阅读更多精彩内容