Vue笔记类别,新手入门

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

  Vue.js
是壹套创设用户界面的渐进式框架。他本身不是三个能文能武框架——只聚焦于视图层。因而它拾叁分容易学习,非常不难与别的库或已有品种组成。在与连锁工具和支撑库1起行使时,Vue.js
也能周详地驱动复杂的单页应用。他的语法和
AngularJS尤其相像,要是接触过AngularJS的,上手会越来越快。而且vue比AngularJS使用不难、灵活了成百上千。

Vue.js
是壹套营造用户界面包车型大巴渐进式框架。他自家不是一个多才多艺框架——只聚焦于视图层。由此它万分容命理命理术数习,非凡简单与别的库或已有品种组成。在与连锁工具和匡助库1起行使时,Vue.js
也能完善地驱动复杂的单页应用。他是基于AnjularJs
编写的,所以和前者的语法特别相似,却又选择简单了许多。

Vuejs

源码:

第三节:走起小编的Vue二.0

vue.js
/vue.min.js

  1. live-server:
    cnpm install -g live-server
  2. npm
    init

【目录生成package.json方便开展包的管理】

4.vue文件夹下首先生成index.html

5.assets文件夹下放置了css和js目录

陆.example文本夹下放置了helloworld.html

接下来index.html里面绑定了helloworld.html的链接

 

♥在helloworld.html里面编写第一回的vue代码

   
<script type=”text/javascript”>

       
var app = new Vue({

           
el:”#app”,

           
data:{

               
message:”sweet~”

           
}

       
})  

   
</script>

 

  这明日,小编就给我们详细的商业事务说道这一个 Vue.js
,以下是我们此番详解的目录,朋友们能够依照自身的事态采用性阅读,全体操作均附有代码完结。

那明天,笔者就给大家详细的合计说道这几个 Vue.js
,以下是大家此次详解的目录,朋友们方可依照自身的景观选取性阅读,全数操作均附有代码达成。

下载Vue.js

官网:

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

登陆的供给

假使用户登录
展现你好 要是用户并未有登6 展现已经登6

v-if&v-else单判断

   
<div id=”app”>

 
      <div v-show=”isLogin”>登五分之三功</div>

       
<div v-else>登陆退步</div>

   
</div>

   
<script type=”text/javascript”>

       
var app = new Vue({

           
el:”#app”,

           
data:{

               
isLogin:false

           
}

       
})  

   
</script>

那里大家在vue的data里定义了isLogin的值,当它为true时,网页就会议及展览示:你好:xxx,如若为false时,就展现请登录后操作。

 

v-if:
用来判定是还是不是加载html的DOM,比如大家模拟一个用户登录情况,在用户登录后实际用户名称。

v-show:
DOM已经加载,只是CSS控制未有展现出来。

 

v-show和v-if区别:

v-if判断是还是不是加载【能够减轻服务器的下压力,在要求时候才加载】

v-show  
【true的时候,其实是display:black;false的时候
其实是安装的display=none;能够使客户端 操作更通畅】

 

  1. Vue.js 怎么着绑定到页面中,使用她的效益。
  1. Vue.js 怎么样绑定到页面中,使用他的机能。

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

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

live-server使用

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

选用npm举行全局安装

npm install -g live-server

在项目目录中运维

liver-server

第三节:v-for指令 :消除模板循环难题

v-for指令是巡回渲染一组data中的数组,v-for
指令需求以 item in items 情势的分外语法,items
是源数据数组并且item是数组元素迭代的别名。

♥item
in items → student in students

HTML模板写法

<li
v-for=”item in items”>

        {{item}}

</li>

 

Js写法

var
app=new Vue({

    
el:’#app’,

    
data:{

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

    
}

})

总体代码

 

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

 

日前早已讲了v-for对数组的渲染,这假如在数组渲染的根底上再对数组进行排序呢

♥输出此前数组排序

 <script
type=”text/javascript”>

        var
app=new Vue({

            el:’#app’,

            data:{

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

            },

             
Computed:{

                    
SortItems:function(){

                           
Return this.items.sort();

}

}

        })

</script>

 

作者们在computed里新申明了叁个目的sortItems,要是不另行注解会传染原来的数据源,那是Vue不一致意的,所以您要重新声澳优(Ausnutria Hyproca)个指标。

唯独有2个bug;

例如items:[9,2,5,1,4,55,66],

//因为那种方法只是依照字母排序,所以就算玖应有在5伍,6陆前方,实际输出玖却在结尾

于是乎大家得以自个儿试着编辑三个主意sortNumber,然后传给我们的sort函数消除这几个bug。

 <script
type=”text/javascript”>

        var
app=new Vue({

            el:’#app’,

            data:{

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

            },

             
Computed:{

                    
SortItems:function(){

       
                    Return this.items.sort();

};

function
sortNumber(a,b){

           
return a-b;

      
 }

}

        })

</script>

 

用法

computed:{

    sortItems:function(){

    return
this.items.sort(sortNumber);

    }

 }

 

对象循环输出

大家上面循环的都以数组,这大家来看一个对象类型的大循环是何等输出的。

我们先定义个数组,数组里边是指标数据

students:[

  {name:’js’,age:32},

  {name:’css’,age:30},

  {name:’Php’,age:21},

  {name:’nodejs’,age:45}

]

在模板中输出

<ul>

  
<li v-for=”student in students”>

      
{{student.name}} – {{student.age}}

  
</li>

</ul>

 

加盟索引序号:

<ul>

  <li
v-for=”(student,index) in students”>

    {{index}}:{{student.name}}

  • {{student.age}}

  </li>

</ul>

排序,我们先加一个原生的靶子格局的数组排序方法:

 

//数组对象方法排序:

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中进行调用排序

sortStudent:function(){

    
return sortByKey(this.students,’age’);

}

 

注:

 <li
v-for=”(student,index) in sortStudents“>

              
{{index+1}} :{{student.name}}-{{student.age}}

 </li>

 

  跳转

那接下去,大家就从头明天的介绍啦! 

其间指令

第4节:v-text & v-html

❤v-text **→** {{}} 相等

而是{{xxx}},那种景色是有坏处的,正是当大家网速非常慢只怕javascript出错开上下班时间,会揭穿我们的{{xxx}}。Vue给我们提供的v-text,正是化解这些题材的。

 

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

 

假设在javascript中写有html标签,用v-text是出口不出去的,这时候大家就须求用v-html标签了。

 

   
<script type=”text/javascript”>

       
var app = new VueVue笔记类别,新手入门。({

        
   el:”#app”,

           
data:{

               
message:”miaomiaomiao”,

               
dodo:”<h2>wangwangwang</h2>”

           
}

       
})

      

   
</script>

 

❤需要专注的是:在生育环境中动态渲染HTML是那多少个危急的,因为简单造成XSS攻击。所以不得不在可信赖的始末上使用v-html,永远不要在用户提交和可操作的网页上利用。

 

  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>

在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-on:绑定事件监听器

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

 大家的v-on 还有一种简易的写法,正是用@代替

eg:使用绑定事件监听器,编写三个加分减分的次第。

完整代码:

<body>

   
<h1>v-on</h1>

   
<hr>

   
<div id=”app”>

       
这一场竞技得分:{{scorce}}

       
<p>

           
<button v-on:click=”add”>加分</button>

            <button
v-on:click=”reduce”>减分</button><br/>

           
<!– <button @click=”reduce”>减分</button> –>

我们除了绑定click之外,大家还足以绑定别的事件,比如键盘回车事件v-on:keyup.enter,以往大家扩展一个输入框,然后绑定回车事件,回车后把文本框里的值加到大家的count上。

           
<input type=”text”
v-on:keyup.enter=”onEnter” v-model=”scorce2″>

           
<!– <input type=”text”
v-on:keyup.13=”onEnter” v-model=”scorce2″> –>

    ❤v-on:keyup.enter=v-on:keyup.13

       
</p>

   
</div>

   
<script type=”text/javascript”>

       
var app = new Vue({

           
el:”#app”,

           
data:{

               
scorce:0,

               
scorce2:1

           
},

            methods:{

               
add:function(){

                 
this.scorce++; 

               
},

               
reduce:function(){

                   
this.scorce–;

               
},

               
onEnter:function(){

                   
this.scorce=this.scorce+parseInt(this.scorce2);

               
}

           
}

       
})

   
</script>

</body>

 

 

  跳转

先看上面包车型客车壹段代码:

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-model指令【双向绑定】

v-model指令,作者晓得为绑定数据源。就是把数据绑定在一定的表单元素上,可以很容易的贯彻双向数据绑定。

大多登陆注册那块儿的须求多量用到v-model指令

,html文件

<div
id=”app”>

    <p>原始文件新闻:{{message}}</p>

    <h3>文本框</h3>

    <p>v-model:<input
type=”text” v-model=”message”></p>

</div>

 

Javascript文件

 

 

var app=new Vue({

  el:’#app’,

  data:{

       message:’hello Vue!’

  }

 })

  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出错开上下班时间,会见世二个一点都不小的坏处,即暴光大家的{{XXX}};由此,Vue给大家提供v-text指令来缓解这一难题:

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

当数码里须要解析HTML标签的时候,v-text是心有余而力不足输出的,因而,Vue还给大家提供了三个限令:v-html

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

亟待留意的是:在生育条件中动态渲染HTML是十一分危急的,因为易于导致XSS攻击。所以不得不在可相信的始末上行使v-html,永远不要在用户提交和可操作的网页上使用。

修饰符

  • model.lazy**:取代 imput监听 change事件。【点击文本框之外的区域才会收效事件改变】**
  • model.number**:输入字符串转为数字。**
  • model.trim**:输入去掉首尾空格。**

  跳转

效果如下:

v-on

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

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

地方的两行代码是1个情趣,@click是v-on:click的简写;

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

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

代码的情致是,当按下”enter”键时,触发onkey事件;也得以行使键值:

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

文本区域投入数据绑定

<textarea  cols=”30″rows=”10″v-model=”message”></textare>

 

 

4858美高梅 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:

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

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

肆、多选按钮绑定三个值

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

五、多选绑定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>

多选按钮绑定二个值【勾选中true/撤除勾选false】

<h三>多选按钮绑定二个值</h三>

<input
type=”checkbox” id=”isTrue” v-model=”isTrue”>

<label
for=’isTrue’>{{isTrue}}</label>

 

 

  那接下去,大家就从头昨天的介绍啦!

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

v-bind

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

模板:

<h3>绑定图片地址</h3>
<p><img v-bind:src="imgSrc" alt="4858美高梅 2"></p>
<p><img :src="imgSrc" alt="4858美高梅 3"></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属性中实行宣示。

1、直接绑定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>

3、绑定class中的数组

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

四、绑定class中运用三元表达式判断

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

5、绑定style

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

6、用对象绑定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个数组【相当于勾选给数组内添加】

<h叁>多选绑定1个数组</h三>

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

 

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>

单选按钮绑定数据【例如男/女 性别单选框的采用 然后文本根本选拔实行体现】

 

 

 

<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. Vue.js
怎样绑定到页面中,使用她的职能。

由此Vue.js的构造函数实例化出二个根实例 app一,说白了,那便是我们面向对象的目的的实例化,直接 new 二个指标。

第8节:v-bind 指令【绑定标签上的品质】【图片,链接的绑定】

v-bind是拍卖HTML中的标签属性的,例如<div></div>便是一个标签,<img>也是2个标签,我们绑定<img>上的src实行动态赋值。

 

,html文件

<div
id=”app”>

    <img
v-bind:src=”imgSrc”  width=”200px”>

</div>

 

Javascript文件

var
app=new Vue({

    el:’#app’,

    data:{

          imgSrc:”

    
}

})

v-bind缩写:

<!–
完整语法 –>

<a
v-bind:href=”url”></a>

 

<!–
缩写 –>

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

 

绑定css样式:

html文件

 

   
<div id=”app”>

      
<p><img v-bind:src=”imgSrc” width=”200px”
alt=”liyitong”></p>

      
<p><a :href=”webUrl”
target=”_blank”>姜浅予的博客</a></p>

      
<div :class=”className”>1.绑定class</div>

      
<div :class=”{classA :isOk}”>二.判断是或不是绑定class</div>

      
<div :class=”[classA,classB]”>三.绑定class中的数组</div>

      
<div :class=”isOk?classA:classB”>四.绑定class中的长富运算符</div>

 
     <hr>

      
<div>

          
<input type=”checkbox” id=”isOk” v-model=”isOk”>

          
<label for=”idOk”>idOk={{isOk}}</label>

      
</div>

      
<div :style=”{color:skyblue,fontSize:font}”>5.绑定style</div>

      
<div :style=”styleObject”>陆.指标绑定style</div>

      

   
</div>

 

Css/Javascript文件

  
<style>

           
.classA{

4858美高梅 ,               
color:yellowgreen

           
}

           
.classB{

               
font-size: 150%

           
}  

       
</style>

 

   
<script type=”text/javascript”>

       
var app = new Vue({

           
el:”#app”,

           
data:{

              
imgSrc:””,

              
webUrl:””,

              
className:”classA”,

              
isOk:true,

              
classA:”classA”,

              
classB:”classB”,

              
skyblue:”skyblue”,

              
font:”16px”,

              
styleObject:{

                  
color:”green”,

                  
fontSize:”24px”

              
}

           
}

       
})     

   
</script>

 

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

  el:”#app一”, 那是在 挂载大家实例化对象的因九秋点,正是其1app一对象作用域是那么些标签里面包车型大巴。那里能够是
id、class、tagname。可是根本依然用id,因为他的唯壹性。

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

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


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

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

 

v-cloak:
在vue渲染完钦赐的全方位DOM后才开始展览体现。它必须和CSS样式一起行使,

 

[v-cloak]
{

  display:
none;

}

 

 **<divv-cloak>**

  {{
message }}

</div>

 

v-once
:
在第一遍DOM时展开渲染,渲染完成后就是静态内容,跳出以后的渲染进度,正是只渲染二遍。

<div
v-once>第二次绑定的值:{{message}}</div>

<div><input
type=”text” v-model=”message”></div>

 

<div
id=”app”>

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

      
<!– v-pre原样输出 –>

      
<div v-cloak>渲染达成后再展现</div>

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

      
<div><input type=”text”
v-model=”message”></div>

      
<div>{{message}}</div>

      
<!– 只让上面这几个值变化,上面有v-once的message不变化 –>

      
<!—因为v-once只实行二次渲染 –>

   
</div>

 

   
<script type=”text/javascript”>

       
var app = new Vue({

           
el:”#app”,

           
data:{

               
message:”sleep!”

              
}

           

       
})

      

   
</script>

<!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:{} 是定义 这些目的的变量和章程,注意有所在和 app一有涉嫌的变量、方法都必须在data中申明。

  效果如下:

注意:

  4858美高梅 4

(1)成效域。js5 只有函数成效域,所以 data
中的函数若是想调用变量,就务须透过  this. 调用,恐怕直接通过对象名调用。

 

(2)外部调用。app一.$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 3个目的。

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

  el:”#app壹”, 那是在
挂载大家实例化对象的要素商点,便是以此app一对象作用域是这几个标签里面包车型客车。那里能够是
id、class、tagname。但是根本照旧用id,因为她的唯1性。

<!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中表明。

那接下去看看效果图:

  注意
(1)功能域。js5 唯有函数功效域,所以 data
中的函数假使想调用变量,就务须透过  this. 调用,也许直接通过对象名调用。

4858美高梅 5

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

透过控制台的打字与印刷效果可以看出来,实例化 vue 对象大约分为
创设vue实例、挂载到dom、数据变化更新、vue实例销毁
多少个阶段,,注意每种阶段都有对应的钩,大家能够透过对那些钩子进行操作,达成部分意义。即使初学者用不太上,可是提前领悟一下要么好的,到时候碰着实际职能要能想赢得生命周期的钩。  

        (三)与HTML代码的绑定。 那里本身是经过 js
的onclick直接绑定的,当然 vue 有和好的事件绑定,那里权且不讲,假诺用 js
的行内绑定,注意要求带对象名。这就是纯
OOP思想了。相信大家对面向对象也不目生,假使确实不理解是啥玩意儿的,赶紧百度学去。

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

  以上正是最最最最最最…..基础的使用 vue  的不二等秘书籍了。

  那今后我们就总计一下 vue
的最大优点,各个眼疾的多寡绑定方法。这里根本列举实例详解  {{}} 、 v-once
、 v-html 、 v-bind 和 v-model 。

 

(1)首先是   {{}} 、 v-once 、 v-html 的用法,请看上面包车型地铁代码:

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

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数据绑定篇</title>
 </head>
 <body>
 <!--
  数据绑定篇
 -->
 <div id="app1">
<!--1. {{}} v-once v-html-->
  <!--Mustache 标签,也就是双大括号,刷新页面时会显示出双大括号-->
  <button onclick="app1.func()">点我,改变变量message的值</button>
  <br /><br />
  <!--即时绑定,div的内容随变量变化而变化的,绑定内容作纯文本处理-->
  <!--双大括号里边也可以写表达式,和AngularJs一样的-->
  <div>{{message}}</div><br />
  <!--只绑定一次,整个div的所有绑定数据,都只会加载一次,再更新就不会变了-->
  <div v-once>{{message}}</div><br />
  <!--双大括号只能当纯文本显示,v-html 可以直接绑定HTML标签的-->
  <div v-html="h1"></div><br />
 </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">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",  //我们实例化的 app1 的挂载的 元素节点,一般用 id,class,或者tagname也可以,但是多了会冲突
  data:{
  message:"我是变量message的内容!",
  h1:"<h1 style='color: fuchsia;'>我是h1标签</h1>", //注意单引号
  //message改变函数
  func:function(){
   if (this.message == "我是变量message的内容!") {
   this.message = "message的内容改变了!";
   }else{
   this.message = "我是变量message的内容!";
   }
  }

 </script>
</html>

  接下去,我们说一下,一个实例化出来的对象,他的生命周期是啥样的,要经历那几个阶段。请看上边一段代码:

接下来看一下效应:

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

4858美高梅 6

  那接下去看看效果图:

抑或分析一下以此小demo。

  4858美高梅 7

   <div>{{message}}</div> 
Mustache 标签,相当于双大括号,他和 AnjularJs
的双大括号完全相同,正是一向将数据动态绑定到标签中,当变量发生变化的时候,标签内容也是改变,上大括号里面也是能够写表明式的。上述代码是做了二个在button中式点心击改变变量message的值,然后经过数量绑定使div的text即时变化。

  通过控制台的打字与印刷效果能够看出来,实例化 vue 对象大约分成
创设vue实例、挂载到dom、数据变动更新、vue实例销毁
陆个级次,,注意种种阶段都有对应的钩,大家得以由此对这么些钩子进行操作,完成部分职能。纵然初学者用不太上,不过提前精晓一下要么好的,到时候蒙受实际效率要能想博得生命周期的钩。

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

他也是多少绑定,不过只绑定一回。要专注
v-once是加载div上的,所以整个div的全体绑定数据,都只会加载贰遍,再立异就不会变了,所以点击
button时,第3个div的多少并不曾产生变更。

  

  <div v-html=”h1″></div>
是绑定HTML标签,注意 他可以直接绑定
HTML模板,可是这一群HTML标签不可能是多层嵌套的。什么意思啊,便是你之间绑定1段标签能够,绑定一个模板也能够,不过只要绑定1个模板,那这一个模板内部不能够再嵌套模板了。不然不能够渲染的。上述代码正是直接导入了三个加了行内样式的h一标签,效用12分有力,比平昔操作dom节点强太多了,效能是几何倍的增强。

  1. Vue 的 全体 数据绑定指令

(2) 其次是 v-bind

  这今后我们就总计一下 vue
的最大优点,各类眼疾的数目绑定方法。这里根本列举实例详解  {{}} 、 v-once
、 v-html 、 v-bind 和 v-model 。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数据绑定篇</title>
 <style type="text/css">
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 </style>
 </head>
 <body>
 <!--
  数据绑定篇
 -->
 <div id="app1">
<!--2. v-bind--> 
  <!--v-bind 他是专门用来绑定属性的 ,主要用来操作元素的 class 列表和它的内联样式-->
  <!--这个和用 js 直接操作dom节点功能一样,不过简单特别多-->
  <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div>
  <!--还可以直接绑定更改 class-->  
  <div v-bind:class="myClass" onclick="app1.func2()"></div>
  -------------------------------------------------------------------------------------
  <div class="img" style="width: 100px;height: 100px;">
  <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/>
  </div>

 </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">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1", 
  data:{
  myColor:"blue",
  myWidth:100,
  myHeight:100,
  myClass:"aaa",
  mySrc:"img/2.png",
  func1:function(){
   if (this.myColor == "blue") {
   this.myColor = "red";
   this.myWidth = 50,
   this.myHeight = 50
   }else{
   this.myColor = "blue";
   this.myWidth = 100,
   this.myHeight = 100
   }
  },
  func2:function(){
   if (this.myClass == "aaa") {
   this.myClass = "bbb";
   }else{
   this.myClass = "aaa";
   }
  },
  func3:function(){
   if (this.mySrc == "img/2.png") {
   this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
   }else{
   this.mySrc = "img/2.png";
   }
  }
  }
 });

 </script>
</html>

  (1)率先是  
{{}} 、 v-once 、 v-html 的用法,请看上面包车型客车代码:

下一场看一下功用:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定篇</title>
    </head>
    <body>
        <!--
            数据绑定篇
        -->
        <div id="app1">
<!--1. {{}}    v-once    v-html-->
            <!--Mustache 标签,也就是双大括号,刷新页面时会显示出双大括号-->
            <button onclick="app1.func()">点我,改变变量message的值</button>
            <br /><br />
            <!--即时绑定,div的内容随变量变化而变化的,绑定内容作纯文本处理-->
            <!--双大括号里边也可以写表达式,和AngularJs一样的-->
            <div>{{message}}</div><br />
            <!--只绑定一次,整个div的所有绑定数据,都只会加载一次,再更新就不会变了-->
            <div v-once>{{message}}</div><br />
            <!--双大括号只能当纯文本显示,v-html 可以直接绑定HTML标签的-->
            <div v-html="h1"></div><br />
        </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">
        //通过Vue.js的构造函数 实例化出一个根实例
        var app1= new Vue({
            el:"#app1",            //我们实例化的 app1 的挂载的 元素节点,一般用 id,class,或者tagname也可以,但是多了会冲突
            data:{
                message:"我是变量message的内容!",
                h1:"<h1 style='color: fuchsia;'>我是h1标签</h1>",  //注意单引号
                //message改变函数
                func:function(){
                    if (this.message == "我是变量message的内容!") {
                        this.message = "message的内容改变了!";
                    }else{
                        this.message = "我是变量message的内容!";
                    }
                }
        }
      });


    </script>
</html>

4858美高梅 8

  然后看一下功力:

那我们解析一下地点的代码。

  4858美高梅 9

  v-bind 他是专门用来绑定属性的 ,主要用来操作成分的 class
列表和它的内联样式。那或多或少和AnjularJs的 ng-bind
是完全区别的,要留意!!!

  仍旧分析一下以此小demo。

  <div v-bind:style =
“{backgroundColor:myColor,width: myWidth+’px’,height: myHeight+’px’}”
onclick=”app一.func一()”></div> 
那是在直接绑定行内样式style。然后通过绑定点击函数,为各类比那两赋值,达到点击更改div样式的目标。

   <div>{{message}}</div>
 Mustache 标签,约等于双大括号,他和 AnjularJs
的双大括号完全相同,正是直接将数据动态绑定到标签中,当变量产生变化的时候,标签内容也是改变,上海南大学学括号里面也是能够写表明式的。上述代码是做了四个在button中点击改变变量message的值,然后通过数量绑定使div的text即时变化。

  <div v-bind:class=”myClass”
onclick=”app壹.func二()”></div>  这一个是直接绑定修改
class类名,在页内样式表中有自作者定义的 .aaa 和 .bbb
四个类名,通过动态修改class名修改样式,那也比 JQuery
直接操作dom节点神速不少。

  <div
v-once>{{message}}</div>
他也是多少绑定,可是只绑定1遍。要留心 v-once是加载div上的,所以任何div的持有绑定数据,都只会加载3次,再革新就不会变了,所以点击
button时,第2个div的数额并不曾发出变动。

   <img style=”width: 百分百;”
v-bind:src=”mySrc” onclick=”app一.func3()”/>
那是一直绑定属性,动态修改 img 的src
属性。达到点击图像展现差异的图像的功力。

  <div
v-html=”h壹”></div>
是绑定HTML标签,注意 他得以一向绑定
HTML模板,不过这一群HTML标签不能够是多层嵌套的。什么看头啊,正是您之间绑定一段标签可以,绑定三个模板也能够,可是一旦绑定三个模板,那那几个模板内部无法再嵌套模板了。不然不或然渲染的。上述代码就是一贯导入了一个加了行内样式的h1标签,功用更强有力,比一向操作dom节点强太多了,功效是几何倍的加强。

此间要更强调一下,v-bind 直接绑定的是性质,而不是样式 ,对于 img
,他的src是性质,不过对于 div ,width 啥的是样式,不是性质,所以
v-bind:width=”100+’px'” 不佳使.

  (2) 其次是
v-bind

  至于 v-bind 属性绑定,也就常用用法不过这样多了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定篇</title>
        <style type="text/css">
            .aaa{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .bbb{
                margin: 10px;
                width: 50px;
                height: 50px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <!--
            数据绑定篇
        -->
        <div id="app1">
<!--2.    v-bind-->        
            <!--v-bind 他是专门用来绑定属性的 ,主要用来操作元素的 class 列表和它的内联样式-->
            <!--这个和用 js 直接操作dom节点功能一样,不过简单特别多-->
            <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div>
            <!--还可以直接绑定更改 class-->                
            <div v-bind:class="myClass"  onclick="app1.func2()"></div>
            -------------------------------------------------------------------------------------
            <div class="img" style="width: 100px;height: 100px;">
                <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/>
            </div>

        </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">
        //通过Vue.js的构造函数 实例化出一个根实例
        var app1= new Vue({
            el:"#app1",    
            data:{
                myColor:"blue",
                myWidth:100,
                myHeight:100,
                myClass:"aaa",
                mySrc:"img/2.png",
                func1:function(){
                    if (this.myColor == "blue") {
                        this.myColor = "red";
                        this.myWidth = 50,
                        this.myHeight = 50
                    }else{
                        this.myColor = "blue";
                        this.myWidth = 100,
                        this.myHeight = 100
                    }
                },
                func2:function(){
                    if (this.myClass == "aaa") {
                        this.myClass = "bbb";
                    }else{
                        this.myClass = "aaa";
                    }
                },
                func3:function(){
                    if (this.mySrc == "img/2.png") {
                        this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
                    }else{
                        this.mySrc = "img/2.png";
                    }
                }
            }
        });

    </script>
</html>

(3) v-model

  然后看一下职能:

  用 v-model
指令在表单控件元素上成立双向数据绑定。它会依照控件类型自动选取正确的不二等秘书籍来更新成分。它承担监听用户的输入事件以创新数据,并特意处理部分最棒的例子。v-model
并不关切表单控件早先化所生成的值。因为它会选择 Vue
实例数据来作为具体的值。在暗许情形下, v-model 在 input
事件中齐声输入框的值与数码,但你能够添加三个修饰符 lazy ,从而转变为在
change 事件中一块

  4858美高梅 10

上边大家看1段代码:

  那大家解析一下方面包车型地铁代码。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>数据绑定篇</title>
 <style type="text/css">
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 </style>
 </head>
 <body>
 <!--
  数据绑定篇
 -->
 <div id="app1">
<!--3. v-model--> 
  <input type="text" v-model="myText" placeholder="请输入:"/>
  <div >{{ myText }}</div><br /><br />
  -------------------------------------------------------------------------------------
  <!--绑定单选按钮-->
  <input type="radio" id="one" name="aa" value="男" v-model="picked">
  <label for="one">男</label>
  <br>
  <input type="radio" id="two" name="aa" value="女" v-model="picked">
  <label for="two">女</label>
  <br>
  您选择了: {{ picked }}
  <br><br>
  -------------------------------------------------------------------------------------
  <!--绑定复选按钮-->
  <div onclick="app1.funcCheckedNames()">
  <input type="checkbox" id="jack" value="好帅!" v-model="checkedNames">
  <label for="jack">好帅!</label>
  <input type="checkbox" id="john" value="你是我的男神!" v-model="checkedNames">
  <label for="john">你是我的男神!</label>
  <input type="checkbox" id="mike" value="我爱你,飞哥!" v-model="checkedNames">
  <label for="mike">我爱你,飞哥!</label>
  </div>
  <br>
  您对飞哥的评价: {{ names }}<br><br>
  --------------------------------------------------------------------------
  <!--绑定单选列表--><br>
  <select v-model="selected1"> 
  <option>亲飞哥</option> 
  <option>向飞哥表白</option> 
  <option>请飞哥吃饭</option>
  </select><br>
  真心话大冒险: {{ selected1 }}<br><br>
  ------------------------------------------------------------------------------

  <div onclick="app1.funcselected22()">
  <select v-model="selected2" multiple> 
   <option>亲亲</option> 
   <option>抱抱</option> 
   <option>举高高</option>
  </select>
  </div><br>
  你想和飞哥偷偷干些啥: {{ selected22 }}<br>

 </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">
 //通过Vue.js的构造函数 实例化出一个根实例
 var app1= new Vue({
  el:"#app1",
  data:{
  myText:"",
  picked:"",
  selected1:"",
  //这是复选列表的变量,函数
  selected2:[],
  selected22:"",
  funcselected22:function(){
   this.selected22 = this.selected2.join(" ");
  },
  //复选框的函数,及其相关变量
  checkedNames:[],
  names:"",
  funcCheckedNames:function(){
   this.names = this.checkedNames.join(" ");
  }
 </script>
</html>

  v-bind 他是尤其用来绑定属性的 ,重要用来操作成分的 class
列表和它的内联样式。那或多或少和AnjularJs的 ng-bind
是一心两样的,要注意!!!

然后看一下意义:

  <div
v-bind:style =
“{backgroundColor:myColor,width: myWidth+’px’,height:
myHeight+’px’}” onclick=”app一.func一()”></div>  那是在直接绑定行内样式style。然后经过绑定点击函数,为种种比那两赋值,达到点击更改div样式的指标。

4858美高梅 11

  <div
v-bind:class=”myClass”
onclick=”app1.func2()”></div> 
那么些是一向绑定修改 class类名,在页内样式表中有自家定义的 .aaa 和 .bbb
多少个类名,通过动态修改class名修改样式,那也比 JQuery
间接操作dom节点快速不少。

接下来解析一下那段代码。那里就不1一详细说吴国码了,挑多少个优异的详解,其余的便很简单了。

   <img
style=”width:
百分之百;” v-bind:src=”mySrc”
onclick=”app1.func叁()”/>
那是一贯绑定属性,动态修改 img 的src
属性。达到点击图像展现分歧的图像的效用。

咱俩就以 多选按钮为例:  

那边要尤其强调一下,v-bind 直接绑定的是性质,而不是样式 ,对于 img
,他的src是性质,然则对于 div ,width 啥的是样式,不是性质,所以
v-bind:width=”拾0+’px'” 倒霉使.

<div onclick="app1.funcCheckedNames()">
 <input type="checkbox" id="jack" value="好帅!" v-model="checkedNames">
 <label for="jack">好帅!</label>
 <input type="checkbox" id="john" value="你是我的男神!" v-model="checkedNames">
 <label for="john">你是我的男神!</label>
 <input type="checkbox" id="mike" value="我爱你,飞哥!" v-model="checkedNames">
 <label for="mike">我爱你,飞哥!</label>
 </div>


//这是复选列表的变量,函数
 selected2:[],
 selected22:"",
 funcselected22:function(){
 this.selected22 = this.selected2.join(" ");
 },

  至于 v-bind 属性绑定,也就常用用法不过尔尔多了。

那边要强调一下,v-model
动态绑定那种多选框之类的,会以数组的花样存取,所以,我们用
selected二:[], 变量接收 选用框
的数据,可是大家又不能够一向用双大括号展现数据,朋友们方可检查测试弹指间,双大括号是纯文本展现,他会把任何数组的中括号,引号,逗号都来得出来,太丑了。所以那边,作者用了JQuery的数组分割为字符串的函数
join(“ ”),把选中的多少分割成字符串,再用贰个字符串类型的变量接收数据,那样打印出来就好多了。注意,这里
join(“ ”) 作者用的相间符是
空白字符,它占叁个汉字的空中,可是不会显得出来。

  (3)   v-model

  好啊,以上这么些正是Vue.js 的根基内容,至于后续的各类渲染,以及组件
API等等,等大家前一周再享受。假诺感觉自小编的博客还不易请记得关心自个儿,此前的博客也有精品吆!

  用 v-model
指令在表单控件成分上成立双向数据绑定。它会根据控件类型自动选用正确的艺术来更新成分。它担负监听用户的输入事件以更新数据,并尤其处理局部最为的例子。v-model
并不尊敬表单控件开头化所生成的值。因为它会挑选 Vue
实例数据来作为具体的值。在暗中同意情况下, v-model 在 input
事件中一只输入框的值与数据,但您能够增进3个修饰符 lazy ,从而转变为在
change 事件中同步

如上就是本文的全体内容,希望对我们的读书抱有协理,也希望咱们多多帮忙脚本之家。

  下边大家看1段代码:

您大概感兴趣的小说:

  • vue.js数据绑定的措施(单向、双向和一回性绑定)
  • Vue.js数据绑定之data属性
  • vue.js动态数据绑定学习笔记
  • Vue.js中数据绑定的语法教程
  • Vue.js+Layer表格数据绑定与贯彻立异的实例
  • Vue.js每一天必学之数据双向绑定
  • 详解Vue.js基于$.ajax获取数据并与组件的data绑定
  • Vue.js第二天学习笔记(数据的双向绑定、常用命令)
  • vue.js利用defineProperty完成数据的双向绑定
  • 详解Vue.js之视图和数量的双向绑定(v-model)
  • vue.js数据绑定操作详解
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>数据绑定篇</title>
        <style type="text/css">
            .aaa{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .bbb{
                margin: 10px;
                width: 50px;
                height: 50px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <!--
            数据绑定篇
        -->
        <div id="app1">
<!--3. v-model-->    
            <input type="text" v-model="myText" placeholder="请输入:"/>
            <div >{{ myText }}</div><br /><br />
            -------------------------------------------------------------------------------------
            <!--绑定单选按钮-->
            <input type="radio" id="one" name="aa" value="男" v-model="picked">
            <label for="one">男</label>
            <br>
            <input type="radio" id="two" name="aa" value="女" v-model="picked">
            <label for="two">女</label>
            <br>
            您选择了: {{ picked }}
            <br><br>
            -------------------------------------------------------------------------------------
            <!--绑定复选按钮-->
            <div onclick="app1.funcCheckedNames()">
                <input type="checkbox" id="jack" value="好帅!" v-model="checkedNames">
                <label for="jack">好帅!</label>
                <input type="checkbox" id="john" value="你是我的男神!" v-model="checkedNames">
                <label for="john">你是我的男神!</label>
                <input type="checkbox" id="mike" value="我爱你,飞哥!" v-model="checkedNames">
                <label for="mike">我爱你,飞哥!</label>
            </div>
            <br>
            您对飞哥的评价: {{ names }}<br><br>
            --------------------------------------------------------------------------
            <!--绑定单选列表--><br>
            <select v-model="selected1">  
                <option>亲飞哥</option>  
                <option>向飞哥表白</option>  
                <option>请飞哥吃饭</option>
            </select><br>
            真心话大冒险: {{ selected1 }}<br><br>
            ------------------------------------------------------------------------------

            <div onclick="app1.funcselected22()">
                <select v-model="selected2" multiple>  
                    <option>亲亲</option>  
                    <option>抱抱</option>  
                    <option>举高高</option>
                </select>
            </div><br>
            你想和飞哥偷偷干些啥: {{ selected22 }}<br>

        </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">
        //通过Vue.js的构造函数 实例化出一个根实例
        var app1= new Vue({
            el:"#app1",
            data:{
                myText:"",
                picked:"",
                selected1:"",
                //这是复选列表的变量,函数
                selected2:[],
                selected22:"",
                funcselected22:function(){
                    this.selected22 = this.selected2.join(" ");
                },
                //复选框的函数,及其相关变量
                checkedNames:[],
                names:"",
                funcCheckedNames:function(){
                    this.names = this.checkedNames.join(" ");
                }
        }
      })

    </script>
</html>

  然后看一下效益:

  4858美高梅 12

  然后解析一下那段代码。那里就不一一详细解释代码了,挑多少个优秀的详解,其余的便很简短了。

  大家就以 多选按钮为例:

  

<div onclick="app1.funcCheckedNames()">
      <input type="checkbox" id="jack" value="好帅!" v-model="checkedNames">
      <label for="jack">好帅!</label>
      <input type="checkbox" id="john" value="你是我的男神!" v-model="checkedNames">
      <label for="john">你是我的男神!</label>
      <input type="checkbox" id="mike" value="我爱你,飞哥!" v-model="checkedNames">
      <label for="mike">我爱你,飞哥!</label>
 </div>

//这是复选列表的变量,函数
   selected2:[],
   selected22:"",
   funcselected22:function(){
       this.selected22 = this.selected2.join(" ");
   },

  那里要强调一下,v-model
动态绑定那种多选框之类的,会以数组的方式存取,所以,大家用 selected二:[], 变量接收 选择框
的数目,但是我们又不能够直接用双大括号呈现数据,朋友们方可检查评定须臾间,双大括号是纯文本显示,他会把全体数组的中括号,引号,逗号都展示出来,太丑了。所以那里,小编用了JQuery的数组分割为字符串的函数
join(“ ”),把选中的数据分割成字符串,再用三个字符串类型的变量接收数据,那样打印出来就好多了。注意,那里 join(“ ”) 小编用的相间符是
空白字符,它占1其中华夏族民共和国字的长空,但是不会来得出来。

  好啊,以上那一个便是Vue.js
的功底内容,至于后续的各类渲染,以及组件
API等等,等大家前一周再享受。假若觉得自我的博客还不易请记得关心自笔者,以前的博客也有精品吆!

 

发表评论

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

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