(第一季)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 href="http://www.baidu.com">百度</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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏hightopo

基于HTML5和WebGL的碰撞测试

1272
来自专栏用户2442861的专栏

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

1061
来自专栏一“技”之长

Bootstrap响应式前端框架笔记三——代码与表格

    在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下:

1053
来自专栏CDA数据分析师

如何使用python进行web抓取?

本文摘要自Web Scraping with Python – 2015 书籍下载地址:https://bitbucket.org/xurongzhong/py...

2328
来自专栏技术墨客

React 状态、事件与动态渲染

例子中使用map方法将每个元素的值*2,最后得到的数组为:[2, 4, 6, 8, 10]。在React中,处理组件数组的方式与之类似。

810
来自专栏葡萄城控件技术团队

CSS变量(自定义属性)实践指南

Sass和Less这样的预处理器,让我们的CSS代码保持良好的结构和可维护性。像变量、混合(mixins)、循环控制等特性,增强了动态编写CSS的能力,从而减少...

981
来自专栏大前端_Web

前端开发常用函数及小技巧(持续更新)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1863
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么?先从一棵树说起。下面是一棵树,由,根部、枝干、叶构成,通过根部可以访问到任何一个叶节点。

692
来自专栏Android群英传

从数字滚动动画看自定义View的绘制思路

2002
来自专栏全沾开发(huā)

总结CSS3新特性(选择器篇)

总结CSS3新特性(选择器篇) CSS3新增了 ? 嗯- -21个选择器,脚本通过控制台在这里运...

2904

扫码关注云+社区