文章/答案/技术大牛

发布

社区首页 >专栏 >(第一季)Vue2.0-内部指令

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

楠楠

发布于 2018-09-11 03:49:02

83310

代码可运行

文章被收录于专栏：郭少华郭少华

运行总次数：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>