新手村的试炼,VueJS之内部指令

By admin in 4858美高梅 on 2019年3月30日

 一、前言

引用vue.js文件

Vuejs

源码:

壹 、下载Vue2.0的四个本子:

官方网站:

  • 支付版本:包涵完整的警戒和调节和测试形式
  • 生产版本:删除了警戒,实行了减少

  进入Vue.js的新世界,打怪升级,了解Vue.js的武器系统。菜鸟诞生的第三课,在新手村中熟稔Vue指令~~~

<script src="https://unpkg.com/vue/dist/vue.js"></script>

下载Vue.js

官网:

② 、项目布局搭建

那些部分要摄像中有详尽讲解。

4858美高梅 1

  学习种类目录地址:

Vue.js常用命令

live-server使用

live-server是二个简便的服务器,具有热更新

运用npm实行全局安装

npm install -g live-server

在品种目录中运转

liver-server

三、live-server使用

用npm进行全局安装

1
npm install live-server -g

在品种目录中开辟

1
live-server

 

  仓库储存地址:

  • v-if

个中指令

四 、编写第一个HelloWorld代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Helloworld</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:’#app’,
            data:{
                message:’hello Vue!’
            }
        })
    </script>
</body>
</html>

 


 ② 、打怪升级

v-if指令能够依照表明式的值在DOM中生成或移除成分

v-if & v-else & v-show

1、v-if

v-if 用来判断是还是不是在加载HTML的DOM,比如效仿用户登录

<div v-if="isLogin">你好,XXX</div>
<div v-else>请登录</div>

在Vue里的data定义isLogin的值,当为true时,显示“你好,XXX”,当为false时,显示“请登录”。

2、v-show

v-show是经过调整css的display属性的属性值,来突显和隐身节点,其实在HTML渲染时,已经加载了DOM;

<div v-show="isLogin">哈哈哈</div>

当isLogin为true时,显示“哈哈哈”,当为false时,隐藏。

叁 、两者的区别

v-if:判断是不是加载,能够减轻服务器压力,当要求时在加载

v-show:调整css dispaly属性,能够使客户端操作更是流畅。

第2节:v-if  v-else  v-show 指令

因此上节课的读书,咱们已经搭建好了支付环境,并且写出了1个简易的HelloWorld程序,大家明日重点学习v-if
 v-else 和 v-show。其实我们这一季学习的都以Vue2.0的内部指令。

  1、 v-cloak

<div id="xiu">
    <p v-if="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true
        }
    })
</script>

v-for

1、 v-for

v-for是用来循环data中的数组,来分析重复模板;

贰 、 基本用法
模板:

<ul>
    <li v-for="(item,index) in list">
       {{index}} - {{item}}
    </li>
</ul>

js:

var vm = new Vue({
    ...
    data(){
        return{
            list: [20, 23, 18, 65, 32, 19, 5, 56, 41]
        }
    }
});

模板中的使用情势是v-for=”(item,index) in list”
,当中list是源数据数组,即js中data的list数组,item是数组成分迭代的小名(能够不管起),index是数组元素的目录,能够大致写成v-for=”item
in list”;

3、排序

运用排序,我们供给运用computed属性,在computed里面,重新声美赞臣个sortList对象,为何要重复注脚,是为着不污源数据。

var vm = new Vue({
    ...
    computed:{
        sortList(){
            var list = [];
            for(var i =0;i<this.list.length;i++){
                list.push(this.list[i]);
            }

            return list.sort(sortNumber);
        }
    }
})

function sortNumber(a,b){
    return a-b;
}

④ 、对象循环输出

在实质上项目中,我们运用的最多的正是目的的轮回输出,那什么输出呢?

先是,在js中定义二个对象数组:

var vm =  new Vue({
    ...
    data(){
        return{
            person:[
                {
                    name: 'xhz',
                    age: 22
                },
                {
                    name: 'qws',
                    age: 34
                },
                {
                    name: 'asd',
                    age: 12
                },
                {
                    name: 'xdc',
                    age: 23
                }
            ]
        }
    }
})

下一场,在模板中输出

 <ul>
    <li v-for="(p,index) in person">
        {{index+1}} - {{p.name}} - {{p.age}}
    </li>
</ul>

指标的排序函数:

function sortByKey(arr,key){
    return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return ((x<y)?-1:((x>y)?1:0));
    })
}

一、v-if:

v-if:是vue 的3个里边指令,指令用在我们的html中。

4858美高梅,v-if用来判定是还是不是加载html的DOM,比如我们模拟三个用户登录状态,在用户登录后实际用户名称。

首要代码:

 

1
<div v-if="isLogin">你好,JSPang!</div>

完整html代码:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-if & v-show & v-else</title>
</head>
<body>
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好:JSPang</div>
        <div v-else>请登录后操作</div>
 
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:’#app’,
            data:{
               isLogin:false
            }
        })
    </script>
</body>
</html>

那里大家在vue的data里定义了isLogin的值,当它为true时,网页就会来得:你好:JSPang,倘若为false时,就呈现请登录后操作。

  在使用Vue的历程中,当大家引入了 vue.js
这一个文件从此,浏览器的内部存款和储蓄器中就存在了贰个 vue
对象,此时,我们就足以由此构造函数的主意创立出三个 vue
的对象实例,后边就能够对那个实例举行操作。

  • v-show

v-text & v-html

前方我们使用插值表明式(即{{XXX}})在HTML中输出data,当网速相比慢也许加载javascript出错开上下班时间,会并发三个一点都不小的害处,即揭示大家的{{XXX}};由此,Vue给我们提供v-text指令来消除这一题目:

<div v-text="text"></div>

当数码里须要解析HTML标签的时候,v-text是力不从心输出的,由此,Vue还给我们提供了一个指令:v-html

 <div v-html="html"></div>

亟需专注的是:在生养环境中动态渲染HTML是特别惊险的,因为不难造成XSS攻击。所以只能在可信赖的剧情上选取v-html,永远不要在用户提交和可操作的网页上运用。

2、v-show :

调动css中display属性,DOM已经加载,只是CSS控制没有出示出来。

 

1
<div v-show="isLogin">你好:JSPang</div>

 

  要是在那么些历程中,对于 vue.js
的引用因为某个原因没有加载成功,此时,未编写翻译的 Mustache
标签就无法正常呈现。例如,在底下的例证中,我们模拟将网页加载速度变慢,此时就能够看见,页面开端开端会显得出插值表明式,只有vue.js 加载完结后,才会渲染成正确的多寡。

v-show指令能够遵照表明式的值在DOM中潜藏或显示成分

v-on

v-on是用来绑定监听事件的,能够监听DOM触发的有的javascript代码;

<button v-on:click="add">add</button>
<button @click="add">add</button>

上边包车型大巴两行代码是多少个趣味,@click是v-on:click的简写;

当然,除了绑定click事件,其余的轩然大波也足以绑定,比如change事件,focu事件,键盘事件,上面包车型大巴话说键盘事件:

<input type="text" @key.enter="onKey">

代码的意趣是,当按下”enter”键时,触发onkey事件;也得以动用键值:

<input type="text" @key.13="onKey">

3、v-if 和v-show的区别:

  • v-if: 判断是还是不是加载,能够减轻服务器的下压力,在要求时加载。
  • v-show:调整css dispaly属性,能够使客户端操作更为流畅。

 

下节课我们将学习v-for的文化。


 

 1 <div id="app">
 2     <p>{{msg}}</p>
 3 </div>
 4 
 5 <script src="../lib/vue.js"></script>
 6 
 7 <script>
 8     new Vue({
 9         el: '#app',
10         data: {
11             msg: 'hello world'
12         }
13     });
14 </script>

如果隐藏的话,会在要素中添加1个内联样式:style=”display:none”

v-model

v-model绑定数据源。便是把数据绑定在特定的表单成分上,能够很简单的落到实处双向数据绑定。

壹 、双向数据绑定

模板:

 <div id="app">
    <p>原始文本信息:{{inputValue}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="inputValue"></p>
</div>

js:

var vm = new Vue({
    ...
    data(){
        return{
            inputValue:'Hello World!'
        }
    }
})

2、 修饰符

  • lazy:取代 imput 监听 change 事件。
  • number:输入字符串转为数字。
  • trim:输入去掉首尾空格。

    “`

    v-model.lazy:

v-model.number:



v-model.trim:

叁 、文本区域投入数据绑定

<textarea rows="10" cols="30" v-model="inputValue"></textarea>

④ 、多选按钮绑定一个值

<input type="checkbox" id="checkTrue" v-model="isFlag"><label for="checkTrue">{{isFlag}}</label>

新手村的试炼,VueJS之内部指令。⑤ 、多选绑定2个数组

<p>
    <input type="checkbox" name="zz" id="zz" value="zz" v-model="names">
    <label for="zz">zz</label>
    <input type="checkbox" name="yym" id="yym" value="yym" v-model="names">
    <label for="yym">yym</label>
    <input type="checkbox" name="zxr" id="zxr" value="zxr" v-model="names">
    <label for="zxr">zxr</label>
</p>

陆 、单选按钮绑定数据

<p>
    <input type="radio" name="1" id="man" value="男" v-model="sex">
    <label for="man">男</label>
    <input type="radio" name="0" id="woman" value="女" v-model="sex">
    <label for="woman">女</label>
</p>

第②节:v-for指令 :消除模板循环难点

v-for指令是循环渲染一组data中的数组,v-for 指令要求以 item in items
格局的尤其语法,items 是源数据数组并且item是数组成分迭代的外号。

4858美高梅 2

<div id="xiu">
    <p v-show="kang">修抗</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: false
        }
    })
</script>

v-bind

v-bind是处理HTML中的标签属性的,例如<div></div>正是一个标签,<img>也是二个标签,我们绑定<img>上的src进行动态赋值。

模板:

<h3>绑定图片地址</h3>
<p><img v-bind:src="imgSrc" alt="4858美高梅 3"></p>
<p><img :src="imgSrc" alt="4858美高梅 4"></p>

地方两行代码是二个意思,v-bind:src是共同体语法,:src是简写;

js:

var vm = new Vue({
    ...
    data(){
        return{
            imgSrc:"https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",

        }
    }
});

理所当然,除了绑定图片地址,还是能绑定<a></a>标签的href属性:

<a :href="url"></a>

在工作中大家平时选取v-bind来绑定css样式:

在绑定CSS样式是,绑定的值必须在vue中的data属性中开始展览宣示。

① 、直接绑定class样式

 <p>1、绑定class</p>

② 、绑定classA并拓展判定,在isOK为true时展现样式,在isOk为false时不显得样式。

<p>
    2、绑定class判断
    <input type="checkbox"  id="isOK" v-model="isOK">
    <label for="isOK">isOK:{{isOK}}</label>
</p>

③ 、绑定class中的数组

<p>3、绑定class数组</p>

四 、绑定class中运用安慕希表明式判断

<p>4、绑定class三元运算符</p>

5、绑定style

<p>1、绑定style</p>

⑥ 、用对象绑定style样式

 <p>2、对象绑定style</p>



var vm = new Vue({
    el: '#app',
    data() {
        return {
            imgSrc: "https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
            url: 'http://www.baidu.com',
            className:'classA',
            classA:'classA',
            classB:'classB',
            isOK:false,
            red:'green',
            font:'26px',
            styleObj:{
                color:'red',
                fontSize:'30px'
            }
        }
    }
})

一 、基本用法:

模板写法

 

1
2
3
<li v-for="item in items">
        {{item}}
</li>

js写法

 

1
2
3
4
5
6
var app=new Vue({
     el:’#app’,
     data:{
         items:[20,23,18,65,32,19,54,56,41]
     }
})

全体代码:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-for 案例</title>
</head>
<body>
    <h1>v-for指令用法</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">
                {{item}}
           </li>
       </ul>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:’#app’,
            data:{
                items:[20,23,18,65,32,19,54,56,41]
            }
        })
    </script>
</body>
</html>

那是一个最基础的大循环,先在js里定义了items数组,然后在模板中用v-for循环出来,需求注意的是,你必要相当html标签循环,v-for就写在十二分上面。

  那时候,大家就足以行使v-cloak指令用于隐藏未编写翻译达成的插值表明式,一般我们在采纳时会与丰富八个藏匿该因素的样式同时使用。

v-show指令有更高的起初渲染消耗,要求反复切换时采用

v-pre & v-cloak & v-once

1、v-pre

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

<div v-pre>{{msg}}</div>

此刻并不会输出大家的message值,而是径直在网页中显得{{message}}

2、v-cloak

在vue渲染完钦点的满贯DOM后才开始展览呈现。它必须和CSS样式一起行使,

[v-cloak] {
    display: none;
}



<div v-cloak>
    {{ message }}
</div>

3、v-once

在第3次DOM时展开渲染,渲染达成后就是静态内容,跳出今后的渲染进度。

<div>
    <input type="text" v-model="msg">
    <p v-once>{{msg}}</p>
    <p>{{msg}}</p>
</div>

二、排序

咱俩已经顺遂的输出了大家定义的数组,不过小编急需在出口在此之前给数组排个序,那大家就用到了Vue的computed:属性。

 

1
2
3
4
5
computed:{
    sortItems:function(){
          return this.items.sort();
    }
}

作者们在computed里新评释了三个对象sortItems,假诺不另行注脚会污染原来的数据源,那是Vue不允许的,所以你要重新声多美滋个目的。

一经不另行评释报错:

4858美高梅 5

假若一切顺遂的话,你早就见到了结果,可是那几个小程序依旧有个小Bug的,未来自个儿把数组修改成这么。

 

1
items:[20,23,18,65,32,19,5,56,41]

大家把在那之中的54修改成了5,大家再看一下结实,发现排序结果并不是大家想要的。

4858美高梅 6

大家能够友善编排四个格局sortNumber,然后传给大家的sort函数化解那一个Bug。

 

1
2
3
  function sortNumber(a,b){
            return a-b
  }

用法

 

1
2
3
4
5
computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
}

经过一番折腾,大家总算实现了确实的数字排序,那是在工作中国和北美洲平日用的,一定要学好,记住。

<!-- 添加 v-vloak 样式 -->
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <!-- 添加 v-vloak 指令 -->
    <p v-cloak>{{msg}}</p>
</div>

v-if指令有更高的切换消耗,运转时规格不太大概改变时行使

叁 、对象循环输出

咱俩上边循环的都以数组,那大家来看三个对象类型的循环是何等输出的。

咱俩先定义个数组,数组里边是指标数据

 

1
2
3
4
5
6
students:[
  {name:’jspang’,age:32},
  {name:’Panda’,age:30},
  {name:’PanPaN’,age:21},
  {name:’King’,age:45}
]

在模板中输出

 

1
2
3
4
5
<ul>
   <li v-for="student in students">
       {{student.name}} – {{student.age}}
   </li>
</ul>

参预索引序号:

 

1
2
3
4
5
<ul>
  <li v-for="(student,index) in students">
    {{index}}:{{student.name}} – {{student.age}}
  </li>
</ul>

排序,大家先加三个原生的靶子格局的数组排序方法:

 

1
2
3
4
5
6
7
8
//数组对象方法排序:
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));
   });
}

有了数组的排序方法,在computed中展开调用排序

 

1
2
3
sortStudent:function(){
     return sortByKey(this.students,’age’);
}

 


  大家能够观察,当页面没有显得内容时,此时 p 标签添加了一个 v-cloak
属性,同时,从左边的体裁中得以看出,隐藏彰显,当加载成功后, p
标签上去除了该属性,同时插值表明式也编写翻译完毕,正确呈现出来。

  • v-else

第4节:v-text & v-html

咱俩早就会在html中输出data中的值了,我们已经用的是{{xxx}},那种情景是有弊端的,正是当大家网速相当慢只怕javascript出错开上下班时间,会揭露我们的{{xxx}}。Vue给我们提供的v-text,便是缓解那几个题指标。大家来看代码:

 

1
<span>{{ message }}</span>=<span v-text="message"></span><br/>

假如在javascript中写有html标签,用v-text是出口不出来的,那时候大家就需求用v-html标签了。

 

1
<span v-html="msgHtml"></span>

双大括号会将数遗闻明为纯文本,而非HTML。为了输出真正的HTML,你就必要采纳v-html
指令。

必要小心的是:在生育环境中动态渲染HTML是至极危急的,因为不难导致XSS攻击。所以不得不在可靠的始末上运用v-html,永远不要在用户提交和可操作的网页上行使。

完全代码:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-text & v-html 案例</title>
</head>
<body>
    <h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        <span>{{ message }}</span>=<span v-text="message"></span><br/>
        <span v-html="msgHtml"></span>
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:’#app’,
            data:{
                message:’hello Vue!’,
                msgHtml:'<h2>hello Vue!</h2>’
            }
        })
    </script>
</body>
</html>

 


4858美高梅 7

v-else指令为false时能够来得表明式的值

第⑤节:v-on:绑定事件监听器

v-on 正是监听事件,能够用v-on指令监听DOM事件来触发一些javascript代码。

① 、使用绑定事件监听器,编写二个加分减分的主次。

效益如图

4858美高梅 8

程序代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-on事件监听器</title>
</head>
<body>
    <h1>v-on 事件监听器</h1>
    <hr>
    <div id="app">
       本场比赛得分: {{count}}<br/>
       <button v-on:click="jiafen">加分</button>
       <button v-on:click="jianfen">减分</button>
 
    </div>
 
    <script type="text/javascript">
        var app=new Vue({
            el:’#app’,
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count–;
                }
            }
        })
    </script>
</body>
</html>

咱俩的v-on 还有一种不难的写法,正是用@代替。

 

1
<button @click="jianfen">减分</button>

咱俩除了绑定click之外,大家仍是能够绑定别的事件,比如键盘回车事件v-on:keyup.enter,现在我们扩张一个输入框,然后绑定回车事件,回车后把文本框里的值加到大家的count上。

绑定事件写法:

 

1
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代码:

 

1
2
3
onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

因为文本框的数字会默许转变成字符串,所以我们须要用parseInt()函数进行整数转换。

您也足以依照键值表来定义键盘事件:

4858美高梅 9

 


  2、 v-text 与 v-html

v-else指令供给和v-if指令一起利用

第6节:v-model指令

那节课强烈提议你看摄像,文字版你或然会看蒙!

v-model指令,笔者晓得为绑定数据源。正是把多少绑定在一定的表单成分上,能够很不难的贯彻双向数据绑定。

  v-text 与 v-html 指令都得以创新页面成分的剧情,分歧的是,v-text
会将数据以字符串文本的款型立异,而 v-html 则是将数据以 html
标签的样式立异。

<div id="xiu">
    <P v-if="ok">true</P>
    <p v-else="ok">false</p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            ok: false
        }
    })
</script>

① 、我们来看2个最简易的双向数据绑定代码:

html文件:

 

1
2
3
4
5
<div id="app">
    <p>原始文本信息:{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

 

  在更新数据上,大家也可以行使差值表达式进行更新数据,分歧于
v-text、v-html 指令,差值表明式只会更新原本占位插值所在的数额内容,而
v-text、v-html 指令则会交替掉全部的剧情。

  • v-text

javascript代码:

 

 

1
2
3
4
5
6
var app=new Vue({
  el:’#app’,
  data:{
       message:’hello Vue!’
  }
})

 

 1 <div id="app">
 2 
 3     <p>+++++++++ {{msg}} -----------</p>
 4     <p v-text="msg">=================</p>
 5     <p v-text="msgHtml">==============</p>
 6     
 7     <p v-html="msgHtml">============</p>
 8 
 9 </div>
10 
11 <script>
12     new Vue({
13         el: '#app',
14         data: {
15             msg: 'hello world',
16             msgHtml: '<h3 style="color:green">I want to learn vue.js</h3>'
17         }
18     });
19 </script>

 v-text指令与{{ }}效果一样

二、修饰符

  • .lazy:取代 imput 监听 change 事件。
  • .number:输入字符串转为数字。
  • .trim:输入去掉首尾空格。

4858美高梅 10

<p v-text="xiu"></p>
<p>{{xiu}}</p>

③ 、文本区域进入数据绑定

 

 

1
<textarea  cols="30" rows="10" v-model="message"></textarea>

 

  3、 v-bind

  • v-html

④ 、多选按钮绑定2个值

 

 

1
2
3
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for=’isTrue’>{{isTrue}}</label>

 

  v-bind 能够用来在标签上绑定标签的属性(例如:img 的 src、title
属性等等)和体裁(能够用 style 的款型开始展览内联样式的绑定,也得以由此点名
class 的方式钦命样式)。同时,对于绑定的内容,是做为多少个 js
变量,因而,大家能够对该内容开始展览编辑合法的 js 表明式。

 v-html指令能够动态渲染任意HTML判断

五 、多选绑定三个数组

 

 

1
2
3
4
5
6
7
8
9
10
       <h3>多选绑定一个数组</h3>
       <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">PanPan</label>
            <p>{{web_Names}}</p>
       </p>

 

  在底下的演示中,大家将那些按钮的 title 和 style 都以通过 v-bind
指令展开的绑定,那里对于样式的绑定,大家要求营造一个对象,此外的对于样式的绑定方法,大家将在后面包车型客车读书中涉及。

<div class="xiu" v-html="kang"> </div>
<script>
    new Vue({
        el:".xiu",
        data: {
            kang:"<h1>标题</h1>"
        }
    })
</script>

6、单选按钮绑定数据

 

 

1
2
3
4
5
6
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>

 


 1 <div id="app">
 2     <!-- 
 3         v-bind:可以用来在标签上绑定标签的属性和样式,对于绑定的内容,可以对该内容进行编写合法的 js 表达式
 4             可以简写为 :要绑定的内容
 5      -->
 6     <!-- <input type="button" value="按钮" v-bind:title="msgTitle + 'lalala'" v-bind:style="{color:colorStyle,width:widthStyle+'px'}"> -->
 7 
 8     <!-- 使用 : 简写 -->
 9     <input type="button" value="按钮" :title="msgTitle + 'lalala'" :style="{color:colorStyle,width:widthStyle+'px'}">
10 </div>
11 
12 <script>
13 new Vue({
14     el: '#app',
15     data: {
16         msgTitle: '这是我自定义的title属性',
17         colorStyle: 'red',
18         widthStyle: '120'
19     }
20 });
21 </script>
  • v-pre

第7节:v-bind 指令

v-bind是拍卖HTML中的标签属性的,例如<div></div>正是一个标签,<img>也是两个标签,大家绑定<img>上的src进行动态赋值。

html文件:

 

1
2
3
<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值,那几个值是在vue构造器里的data属性中找到的。

js文件:

 

1
2
3
4
5
6
var app=new Vue({
    el:’#app’,
    data:{
          imgSrc:’http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg’
     }
})

我们在data对象在中加进了imgSrc属性来供html调用。

  效果示意图如下所示

 v-pre指令用来跳过那么些因素和它的子成分的编写翻译,直接显示原始的Mustache标签:{{kang}}

v-bind 缩写

 

 

1
2
3
4
<!– 完整语法 –>
<a v-bind:href="url"></a>
<!– 缩写 –>
<a :href="url"></a>

 

4858美高梅 11

<div id="app">
    {{kang}}
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            kang: 'Hello World!'
        }
    })
</script>

绑定CSS样式

在工作中大家经常应用v-bind来绑定css样式:

在绑定CSS样式是,绑定的值必须在vue中的data属性中展开宣示。

壹 、直接绑定class样式

 

1
<div :class="className">1、绑定classA</div>

二 、绑定classA并开展判定,在isOK为true时来得样式,在isOk为false时不显得样式。

 

1
<div :class="{classA:isOk}">2、绑定class中的判断</div>

叁 、绑定class中的数组

 

1
<div :class="[classA,classB]">3、绑定class中的数组</div>

④ 、绑定class中采用伊利表明式判断

 

1
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>

5、绑定style

 

1
<div :style="{color:red,fontSize:font}">5、绑定style</div>

陆 、用对象绑定style样式

 

1
<div :style="styleObject">6、用对象绑定style样式</div>

 

 

1
2
3
4
5
6
7
8
9
var app=new Vue({
   el:’#app’,
   data:{
       styleObject:{
           fontSize:’24px’,
           color:’green’
            }
        }
})

 


  4、 v-on

  • v-cloak

第10节:别的中间指令(v-pre & v-cloak & v-once)

  在观念的前端开发中,当咱们想对三个按钮绑定事件时,大家需求获得到那几个按钮的
dom 元素,再对这一个得到到的 dom 举办事件的绑定。在大家学习 vue
的长河中,我们得以秉持二个思考,对于 dom 的操作,全部让 vue
替大家完毕,大家只关怀业务代码完成,因而,我们得以运用 vue 内置的 v-on
指令来替大家做到事件的绑定。

 v-cloak指令幸免刷新数据以前闪烁{{name}}

v-pre指令

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

 

1
<div v-pre>{{message}}</div>

此时并不会输出大家的message值,而是直接在网页中展现{{message}}

  古板的成分 js 写法如下所示

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak >
    <p>{{name}}</p>
</div>
<script>
new Vue({
    el:"#app",
    data: {
        name: "修抗"
    }
})
</script>

v-cloak指令

在vue渲染完钦点的成套DOM后才开始展览显示。它必须和CSS样式一起使用,

1
2
3
[v-cloak] {
  display: none;
}

 

1
2
3
<div v-cloak>
  {{ message }}
</div>

 

<input type="button" value="点我啊~~~" id="btn">

<script>
    // 传统的事件绑定方法
    document.getElementById('btn').onclick = function () {
        alert('传统的事件绑定方法');
    }
</script>
  • v-bind

v-once指令

在首先次DOM时举办渲染,渲染达成后正是静态内容,跳出现在的渲染进度。

 

1
2
<div v-once>第一次绑定的值:{{message}}</div>
<div><input type="text" v-model="message"></div>

 

  在使用 v-on 指令对事件进展绑定时,大家要求在标签上指明
v-on:event(click、mousedown、mouseup 等等) 绑定的事件。

 v-bind指令用于响应式更新HTML性格(v-bind能够暗许不写)

<input type="button" value="点我啊~~~" id="btn" v-on:click="alert(1111)">
<div id="xiu">
    <a v-bind:href="url">百度</a><!-- v-bind可以默认不写 -->
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            url:"https://www.baidu.com/"
        }
    });
</script>

  那样就能够了吗?大家能够测试下,哦吼,报错了,vue
提示大家属性只怕措施在 vue 实例中未定义,原来在 vue
的布置性中过多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。由此 v-on
还足以接过1个供给调用的法门名称。所以,大家供给在 vue 实例的 methods
下写出艺术。

 v-bind展现或隐蔽五个css属性

4858美高梅 12

首先种方法:

  当然,使用 v-on 指令接收的主意名称也得以传递参数,大家只供给在
methods 中定义方法时表达那么些形参即可在章程中取得到。

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="[size,color]">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            size: 'fontSize',
            color: 'backgroundColor'
        }
    });
</script>
 1 <input type="button" value="点我啊~~~" id="btn" v-on:click="handlerClick">
 2 
 3 <!-- 使用 @ 简写 -->
 4 <input type="button" value="点我啊~~~" id="btn" @click="handlerClickWithParam(1)">
 5 
 6 var vm = new Vue({
 7     el: '#app',
 8     data: {
 9         msgTitle: '这是我自定义的title属性',
10         colorStyle: 'red',
11         widthStyle: '120'
12     },
13     methods: {//在 methods 中定义当前 vue 实例的所有可访问方法
14         handlerClick() {
15             alert('我是使用 v-on 指令绑定的事件');
16         },
17          handlerClickWithParam(id) {
18             alert('我是使用 v-on 指令绑定的事件,方法参数为'+id);
19         }
20     }
21 });

第三种方法:

  5、 v-model

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:true,backgroundColor:true}">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box'
    });
</script>

  在事先的上学中,对于数据的绑定,不管是使用插值表明式照旧 v-text
指令,对于数据间的相互都以单向的,即只好将 vue
实例里的值传递给页面,页面对数据值的其余操作却力不从心传递给 model。

其两种格局:

  例如,在下边包车型大巴示范页面中,大家手动将页面包车型客车 h3
标签里的剧情开始展览修改,通过控制台获取到 vue
实例中的数据,发现数目并没有发生变化。那里能够运用 window.vm 获取到 vue
实例,则是因为我们从前引入 vue.js 后,会自行在浏览器内存中创建 vue
对象,我们透过构造函数创立的 vue 的实例也就存在与浏览器的内部存款和储蓄器里了。

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="{fontSize:z,backgroundColor:c}">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            z: true,
            c: true
        }
    });
</script>
<div id="app">
    <h3>{{ msg }}</h3>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好啊,hahaha'
        }
    });
</script>

第两种艺术:

4858美高梅 13

<style>
    .fontSize {
        font-size: 20px;
    }
    .backgroundColor {
        background: red;
    }
</style>
<div id="box">
    <p v-bind:class="json">文字颜色</p>
</div>
<script>
    new Vue({
        el: '#box',
        data: {
            json: {
                fontSize:true,
                backgroundColor:true
            }
        }
    });
</script>

  MVVM中最关键的3个性子,能够说便是数据的双向绑定,而 vue 作为一个MVVM 框架,理所应当的完结了数量的双向绑定,所以我们得以应用内置的
v-model 指令实现多少的在 View 与 Model 间的双向绑定。

  • v-model

  大家知晓,唯有表单成分得以与用户进行互相,所以大家只好动用 v-model
指令在表单控件或许零部件上开创双向绑定。对于组件的双向绑定,大家也会在前边的读书中提到。

v-model指令用于input、select、text、CheckBox、radio等表单控件成分上开创双向数据绑定

<div id="app">
    <h3>{{ msg }}</h3>

    <input type="text" name="" id="" v-model:value="msg">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '你好啊,程十六'
        }
    });
</script>
<div id="xiu">
    <input type="checkbox" v-model="kang">
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            kang: true 
        }
    })
</script>

4858美高梅 14

v-model指令的lazy参数(同步输入框的值和多少,lazy能够暗许不写)

  6、 v-if 与 v-show**

<div id="xiu">
    <input v-model="msg" lazy/>
    {{msg}}
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            msg:'修改文本框的值查看效果'
        }
    })
</script>

  v-if 与 v-show 指令都以基于表明式的真假值判断成分的来得与否。

v-model指令的debounce参数(设置3个微小延迟,比如在input输入内容时随时发送Ajax请求,设置陆仟微秒发送一回)

  在底下的代码中,大家因此绑定二个按钮的点击事件,去修改 flag
值,从而达成对于七个 h3 标签的显得与否的控制。

<input v-model="msg" debounce="5000"/>
 1 <div id="app">
 2     <input type="button" value="切换" @click="handlerClick">
 3 
 4     <h3 v-if="flag">我是通过 v-if 指令控制的~~~</h3>
 5     <h3 v-show="flag">我是通过 v-show 指令控制的~~~</h3>
 6 </div>
 7 
 8 <script>
 9     var vm = new Vue({
10         el: '#app',
11         data: {
12             flag: true
13         },
14         methods: {
15             handlerClick() {
16                 this.flag = !this.flag;
17             }
18         }
19     });
20 </script>
  • v-for

4858美高梅 15

 v-for指令语法:xiu : kang (kang是源数据数组,xiu是kang的小名)

  大家能够见到,flag 的初叶值为 true,此时,四个 h3
标签都足以来得出来,当大家点击切换按钮后,多个 h3
都藏匿了,差别的是,大家能够看看,对于使用 v-if 指令控制的 h3
标签,当表达式为 false 时,那个因素 dom 会直接销毁比量齐观建,而对此利用
v-show 指令控制的 h3 标签,当表明式为 false 时,仅仅是将如今因素的
display CSS 属性值设置为
none。所以,当大家需求频仍控制成分的来得与否时,推荐使用 v-show
指令,幸免因为运用 v-if 指令而导致的高品质消耗。

措施一:(绑定数据到数组)

  7、 v-for

<div id="xiu">
    <ul>
        <template v-for="place in places">
            <li>{{ place.name }}</li>
        </template>
    </ul>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            places: [
                { name: '厦门' },
                { name: '漳州' },
                { name: '福州' }
            ]
        }
    })
</script>

  无论是大家是写 C# 依然写 JAVA 可能是前者的 JavaScript
脚本,提到循环数据,首先都会想到 使用 for 循环,同样的,在 vue
中,小编也为我们提供了 v-for 这一发令 用来循环数据。

措施二:(通过对象的习性来迭代数量)

  在选拔 v-for
指令时,我们能够对数组、对象、数字、字符串举行巡回,获取到源数据的每3个值。使用
v-for 指令,必须运用一定语法 alias in expression
,为当下遍历的成分提供外号,那里就像是于 C# 中的 foreach 的循环格式。

value对象的值(必填)

 1 <div id="app">
 2     <!-- 1、循环数组数据 -->
 3     <p v-for="(item,index) in arrayList" :key="index">数组索引值: {{ index }} , 数据值: {{ item }}</p>
 4 </div>
 5 
 6 <script>
 7     var vm = new Vue({
 8         el: '#app',
 9         data: {
10             arrayList: [12, 20, 34, 1, 6]
11         }
12     });
13 </script>

key对象的性质

  在 v-for 指令中,我们全部对父功能域属性的通通访问权限。v-for
还辅助叁个可选的第③个参数为当前项的目录。在上边这几个循环数组的代码中,item
代表了数组中的每一项数据,index
则象征为日前项的目录,所以大家得以很有利的打字与印刷出数组中每一项数据和目录。同时,大家在
ul 标签上绑定了七个 key 属性,它能够为循环出来的每一项提供三个 key
值,大家得以知道成数据库表中的每一条数据都有多个唯一的主键值,同样的,我们要求确认保证那些key 值要唯一对应着眼下的多寡项。

index对象的目录

  那里,选择循环数组对象的措施,来诠释那几个 key 属性要唯一的标题。

<div id="xiu">
    <p v-for="(value,key,index) in object">
        {{ index }}{{key}}:{{value}}
    </p>
</div>
<script>
    new Vue({
        el: '#xiu',
        data: {
            object: {
                name: "修抗",
                url: "www.xiukang.com",
                index: "教育"
            }
        }
    })
</script>
 1 <div id="app">
 2      <!-- 2、循环对象数组数据 -->
 3     <input type="radio" name="" id="">
 4     <p v-for="(item,index) in objList" :key="index">数组索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
 5 </div>
 6 
 7 <script>
 8     var vm = new Vue({
 9         el: '#app',
10         data: {
11             objList: [
12                     {id: 1,name: 'zhangsan',age: 23},
13                     {id: 2,name: 'lisi',age: 32},
14                     {id: 3,name: 'wangwu',age: 22},
15                 ]
16         }
17     });
18 </script>

措施三:(循环一个整数)

  大家明日循环了三个目的数组,并在每三个多少项多的日前加了1个单选框,今后大家选中
{id: 2,name: ‘lisi’,age: 32}
那一个数额对象,同时,使用控制台往数组中添加新的要素。我们知晓往1个数组中新增成分得以运用
push 方法依旧是 unshift 方法,大家来尝试一下。

<div id="xiu">
    <p v-for="value in 10">
        {{value}}
    </p>
</div>
<script>
    new Vue({
        el: '#xiu'
    })
</script>

  4858美高梅 16

  • v-on

  大家看看当大家采用 push
方法在数组的终极添加3个数量时,在此以前单选框选拔的数量尚未生出转移,而当大家应用
unshift
方法在数组最前边添加多个数码时,单选框选取的数额就发出了改动。那里就是因为
key
属性绑定的是数组索引的原故,大家选中的索引值是1,当在当选的数组成分前面添加数据时,原来选中的数组数据的索引值就会加一,所以最后就会选择到其余成分。

v-on指令用来绑定事件的

  那里大家就能够将 key 绑定为 item.id
那么些特性,这样我们抬高数据时就不会对中选的多少造成影响了,因为,大家曾经告知了先后,我们是基于
item.id 那些 key
值进行选中的,与数组的索引值非亲非故。注意,这里若是我们抬高的目的数据 id 照旧3的话固然能够添加成功,不过vue 会给大家提示警示消息了,因为已经存在了1个 id 等于3的多少。

绑定事件

<div id="app">
    <!-- 2、循环对象数组数据 -->
    <input type="radio" name="" id="">
    <p v-for="(item,index) in objList" :key="item.id">数组索引值: {{ index }} , id: {{ item.id }} , name: {{ item.name }} , age: {{ item.age }}</p>
</div>

 

  对于指标、数字、字符串的大循环与对于数组的循环差不离,完结格局如下所示,大家能够协调编写下试试。不过在遍历对象时,是按
Object.keys() 的结果遍历,可是不能够保障它的结果在分化的 JavaScript
引擎下是平等的。

<div id="app">
    <button v-on:click="onClick">按钮</button>
</div>
<script>
    new Vue({
        el:"#app",
        methods: {
            onClick:function(){
                alert(new Date())
            }
        }
    })
</script>
<div id="app">
    <!-- 3、遍历对象 -->
    <p v-for="(value,key,index) in obj" :key="key">键名: {{ key }} , 值: {{ value }} , 索引值: {{ index }}</p>

    <!-- 4、遍历数字 -->
    <p v-for="item in 10" :key="item">{{ item }}</p>

    <!-- 5、遍历字符 -->
    <p v-for="item in 'chengshiliu'" :key="item">{{ item }}</p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            obj: {
                    id: 1,
                    name: 'chengshiliu',
                    age: 17
                }
        }
    });
</script>

 

 三、总结

 

  这一章大家主要学习了有的 vue
中的内置指令,领悟了它们的利用方式,本篇小说的全套的源码都在篇章开首处提供仓库储存地址里,每3个文书的表明,能够查阅
github 仓库储存的 readme 表达,希望多多关切啊,嘻嘻。

绑定提交事件

<form id="xiu" v-on:submit="onSubmit">
    <input type="text"/>
    <input type="submit" value="提交"/>
</form>

<script>
new Vue({
    el:"#xiu",
    methods: {
        onSubmit: function(){
            alert("提交事件");
        }
    }
})
</script>

 

el、data、methods、computed、watch介绍

 

 

  • el

el指Vue实例挂载的因早秋点

  • data

data值初叶化的值

  • template

template创设虚拟DOM渲染函数

<div id="app"></div>
<script>
    new Vue({
        el: '#app',
        template: '<p>{{ say }}</p>',
        data: {
            say:"修抗"
        }
    })
</script>

 

  • methods

methods必须求有自然的接触条件才能进行,如点击事件

<div id="app">
    <p>{{ say() }}</p>
</div>
<script>
new Vue({
    el: '#app',
    methods: {
        say: function () {
            return '我要成为海贼王'
        }
    }
})
</script>

 

 

  • computed

computed是在HTML DOM加载后当即执行的,如赋值

<div id="app">
    {{firstName}} · {{secName}} · {{thirdName}}
</div>
<script>
var vm = new Vue({
    el: '#app',
    /*
    data选项中的数据:firstName,secName,thirdName
    computed监控的数据:lufei_Name
    两者关系: lufei_Name = firstName + secName + thirdName
    所以等式右边三个数据任一改变,都会直接修改 lufei_Name
    */
    data: {
    // 路飞的全名:蒙奇·D·路飞
        firstName: '蒙奇',
        secName: 'D',
        thirdName: '路飞'
    },
    computed: {
        luFei_Name: function () {
            return this.firstName + this.secName + this.thirdName
        }
    }
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'</script>

 

  • watch

watch呢?它用于观望Vue实例上的数码变动。对应一个指标,键是观看表明式,值是对应回调。值也能够是方法名,可能是目的,包涵选项。

<div id="app">
    {{haiZeiTuan_Name}} · {{suoLong}} · {{naMei}}· {{xiangJiShi}}
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        haiZeiTuan_Name: '草帽海贼团',
        suoLong: '草帽海贼团索隆',
        naMei: '草帽海贼团娜美',
        xiangJiShi: '草帽海贼团香吉士'
    },
    watch: {
        haiZeiTuan_Name: function (newName) {
            this.suoLong = newName + '索隆'
            this.naMei = newName + '娜美'
            this.xiangJiShi = newName + '香吉士'
        }
    }
})
vm.haiZeiTuan_Name = '橡胶海贼团'
</script>
  • computed、methods、watch执行顺序

暗许加载的时候先computed再watch,不执行methods;

等触发某一事变后,则是:先methods再watch。

 

  • 数组变动物检疫查和测试

push()在结尾添加

pop()删除最终二个

shift()删除第三个

unshift()在起来添加

splice()从下标为start开端删除deleteCount个因素,并在该地点添加val,val2 

sort()排序

reverse()

<div id="app">
    <p>{{xiu}}</p>
    <button v-on:click="kang">按钮</button>
</div>
<script>
new Vue({
    el:"#app",
    data: {
        xiu: ["23","1","3","4"]
    },
    methods: {
        kang:function(){
            this.xiu.push("23");
        }
    }
})
</script>

 

  • 内置过滤器

 

  • 1.filterBy(0.12版本)

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有