澳门威利斯人_威利斯人娱乐「手机版」

来自 威利斯人娱乐 2019-05-03 13:54 的文章
当前位置: 澳门威利斯人 > 威利斯人娱乐 > 正文

威澳门尼斯人1294ccVueJS之内部指令,各种数据绑定

  Vue.js 是一套营造用户分界面包车型客车渐进式框架。他自小编不是二个万能框架——只集中于视图层。由此它分外容易学习,十二分轻便与其余库或已有品种组成。在与有关工具和协理库一同行使时,Vue.js 也能完善地驱动复杂的单页应用。他的语法和 AngularJS尤其相像,要是接触过AngularJS的,上手会更加快。而且vue比AngularJS使用轻巧、灵活了不少。

Vue.js 是一套营造用户分界面的渐进式框架。他本人不是三个全能框架——只集中于视图层。由此它相当容命理术数习,十分轻易与其余库或已有品种组成。在与连锁工具和支撑库一同行使时,Vue.js 也能周全地驱动复杂的单页应用。他是基于AnjularJs 编写的,所以和前者的语法尤其相似,却又接纳轻松了成都百货上千。

Vuejs

源码:

  那明日,我就给我们详细的协议说道这几个 Vue.js ,以下是大家这一次详解的目录,朋友们能够依附自身的动静采用性阅读,全数操作均附有代码实现。

那后天,小编就给我们详细的构和说道那么些 Vue.js ,以下是我们此番详解的目录,朋友们方可依赖自身的情事接纳性阅读,全数操作均附有代码达成。

下载Vue.js

官网:

  1. Vue.js 怎么样绑定到页面中,使用他的意义。
  1. Vue.js 如何绑定到页面中,使用她的功能。

  2. Vue 实例化对象的生命周期。

  3. Vue 的 全部 数据绑定指令 

live-server使用

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

利用npm实行全局安装

npm install -g live-server

在类型目录中运营

liver-server

  跳转

这接下去,我们就开端明日的牵线啦! 

在那之中指令

  1. Vue 实例化对象的生命周期。

1. Vue.js 怎么样绑定到页面中,使用她的功效。

v-if & v-else & v-show

1、v-if

v-if 用来剖断是不是在加载HTML的DOM,比方效仿用户登陆

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

威澳门尼斯人1294cc,在Vue里的data定义isLogin的值,当为true时,显示“你好,XXX”,当为false时,显示“请登录”。

2、v-show

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

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

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

3、两者的区分

v-if:决断是不是加载,能够缓慢化解服务器压力,当供给时在加载

v-show:调治css dispaly属性,能够使客户端操作更为通畅。

  跳转

先看上面包车型的士一段代码:

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里面,重新声美赞臣(Meadjohnson)个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;
}

4、对象循环输出

在骨子里项目中,大家运用的最多的正是目标的轮回输出,那什么输出呢?

首先,在js中定义2个对象数组:

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));
    })
}
  1. Vue 的 全数 数据绑定指令
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body> 
 <button id="app1" onclick="app1.func()">我是app1,点我</button>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",
  data:{
  message:"我在app1中显示出来了吗?",
  func:function(){
   alert(this.message);
  }
  }
 });
 console.log(app1.$data.message); 

 //这个要知道哈,app1就是一个变量,一个对象类型的变量,链式语法直接用即可

 </script>
</html>

v-text & v-html

眼下大家应用插值表达式(即{{XXX}})在HTML中输出data,当网速极慢或许加载javascript出错开上下班时间,会出现1个十分的大的弊病,即揭露大家的{{XXX}};由此,Vue给我们提供v-text指令来缓和那1主题素材:

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

当数码里须求解析HTML标签的时候,v-text是无力回天输出的,由此,Vue还给大家提供了1个下令:v-html

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

内需留意的是:在生育条件中动态渲染HTML是十分危急的,因为易于形成XSS攻击。所以不得不在可靠的始末上应用v-html,永恒不要在用户提交和可操作的网页上利用。

  跳转

成效如下:

v-on

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

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

地点的两行代码是3个乐趣,@click是v-on:click的简写;

当然,除了绑定click事件,其余的风浪也得以绑定,比方change事件,focu事件,键盘事件,下边包车型客车话说键盘事件:

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

代码的意思是,当按下"enter"键时,触发onkey事件;也得以选取键值:

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

 

威澳门尼斯人1294cc 1

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:

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

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

4、多选按键绑定二个值

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

5、多选绑定一个数组

<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-bind

v-bind是处理HTML中的标签属性的,举个例子<div></div>正是叁个标签,<img>也是四个标签,我们绑定<img>上的src实行动态赋值。

模板:

<h3>绑定图片地址</h3>
<p><img v-bind:src="imgSrc" alt="威澳门尼斯人1294cc 2"></p>
<p><img :src="imgSrc" alt="威澳门尼斯人1294cc 3"></p>

地方两行代码是一个意味,v-bind:src是1体化语法,: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>

4、绑定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'
            }
        }
    }
})

 

var app1= new Vue({
 el:"#app1",
 data:{
 message:"我在app1中显示出来了吗?",
 func:function(){
  alert(this.message);
  }
 }
 });
console.log(app1.$data.message); 

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

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

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

一. Vue.js 怎么样绑定到页面中,使用他的功用。

通过Vue.js的构造函数实例化出一个根实例 app1,说白了,那就是我们面向对象的对象的实例化,直接 new 贰个对象。

  先看上面包车型大巴一段代码:

  el:"#app1", 那是在 挂载大家实例化对象的要季秋点,正是以此app1对象作用域是那些标签里面包车型地铁。这里能够是 id、class、tagname。不过首要依然用id,因为她的唯1性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>    
        <button id="app1"  onclick="app1.func()">我是app1,点我</button>
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">
        //通过Vue.js的构造函数 实例化出一个根实例
        var app1= new Vue({
            el:"#app1",
            data:{
                message:"我在app1中显示出来了吗?",
                func:function(){
                    alert(this.message);
                }
            }
        });
        console.log(app1.$data.message);  //这个要知道哈,app1就是一个变量,一个对象类型的变量,链式语法直接用即可

    </script>
</html>

  data:{} 是定义 这些目的的变量和措施,注意有所在和 app1有涉及的变量、方法都必须在data中宣称。

  效果如下:

注意:

  威澳门尼斯人1294cc 4

(壹)作用域。js5 唯有函数成效域,所以 data 中的函数假使想调用变量,就非得透过  this. 调用,大概直接通过对象名调用。

 

(二)外部调用。app1.$data.message; 在js中一向调用 vue 对象的属性、方法时,必要链式语法,壹层层点出来,这里用  $data  ,主要依旧和js的变量作区分

  上述代码便是点击按键有弹窗,上边解析一下那段代码。

(三)与HTML代码的绑定。 这里自个儿是由此 js 的onclick直接绑定的,当然 vue 有温馨的事件绑定,这里目前不讲,假使用 js 的行内绑定,注意需求带对象名。那正是纯 OOP思想了。相信大家对面向对象也不素不相识,假诺真的不晓得是什么东西的,赶紧百度学去。

  

如上就是最最最最最最.....基础的使用 vue  的艺术了。

 var app1= new Vue({
    el:"#app1",
    data:{
       message:"我在app1中显示出来了吗?",
       func:function(){
            alert(this.message);
          }
       }
 });
console.log(app1.$data.message); 

二. Vue 实例化对象的生命周期。

  通过Vue.js的构造函数实例化出一个根实例 app1,说白了,这正是大家面向对象的对象的实例化,直接 new 二个目的。

接下去,大家说一下,二个实例化出来的指标,他的生命周期是啥样的,要经历这些阶段。请看上边一段代码:

  el:"#app1", 那是在 挂载大家实例化对象的成分节点,正是以此app1对象成效域是那多少个标签里面的。这里能够是 id、class、tagname。然而主要依然用id,因为他的唯壹性。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>

 <div id="container">我的声明周期,大家看吧!</div>

 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">

 //以下代码时显示vm整个生命周期的流程
 var vm = new Vue({
  el: "#container",
  data: {
  test : 'hello world'
  },
  beforeCreate: function(){
  console.log(this);
  showData('创建vue实例前',this);
  },
  created: function(){
  showData('创建vue实例后',this);
  },
  beforeMount:function(){
  showData('挂载到dom前',this);
  },
  mounted: function(){
  showData('挂载到dom后',this);
  },
  beforeUpdate:function(){
  showData('数据变化更新前',this);
  },
  updated:function(){
  showData('数据变化更新后',this);
  },
  beforeDestroy:function(){
  vm.test ="3333";
  showData('vue实例销毁前',this);
  },
  destroyed:function(){
  showData('vue实例销毁后',this);
  }

 });
 function realDom(){
  console.log('真实dom结构:'   document.getElementById('container').innerHTML);
 }
 function showData(process,obj){
  console.log(process);
  console.log('data 数据:'   obj.test)
  console.log('挂载的对象:')
  console.log(obj.$el)
  realDom();
  console.log('------------------')
  console.log('------------------')
 }

 </script>
</html>

  data:{} 是定义 那么些目标的变量和措施,注意有所在和 app一有涉及的变量、方法都不能够不在data中宣称。

那接下去看看效果图:

本文由澳门威利斯人发布于威利斯人娱乐,转载请注明出处:威澳门尼斯人1294ccVueJS之内部指令,各种数据绑定

关键词: 澳门威利斯人 vuejs