您的位置:时时app平台注册网站 > web前端 > 【复习】VueJS之内部指令彩世界网址

【复习】VueJS之内部指令彩世界网址

2019-11-08 03:49

  <div v-bind:style = "{backgroundColor:myColor,width: myWidth 'px',height: myHeight 'px'}" onclick="app1.func1()"></div>  这是在直接绑定行内样式style。然后通过绑定点击函数,为各个比那两赋值,达到点击更改div样式的目的。

下载Vue.js

官网:

  el:"#app1", 这是在 挂载我们实例化对象的元素节点,就是这个app1 对象作用域是那一个标签里面的。这里可以是 id、class、tagname。但是主要还是用id,因为他的唯一性。

内部指令

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

v-for

1、 v-for

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

2、 基本用法
模板:

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

4、对象循环输出

在实际项目中,我们使用的最多的就是对象的循环输出,那如何输出呢?

首先,在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));
    })
}

  跳转

Vuejs

源码:

1. Vue.js 如何绑定到页面中,使用他的功能。

v-model

v-model绑定数据源。就是把数据绑定在特定的表单元素上,可以很容易的实现双向数据绑定。

1、双向数据绑定

模板:

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

6、单选按钮绑定数据

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

  那接下来,我们就开始今天的介绍啦!

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>

  彩世界网址 1

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属性,可以使客户端操作更加流畅。

  <div v-once>{{message}}</div> 他也是数据绑定,但是只绑定一次。要注意 v-once是加载div上的,所以整个div的所有绑定数据,都只会加载一次,再更新就不会变了,所以点击 button时,第二个div的数据并没有发生改变。

live-server使用

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

使用npm进行全局安装

npm install -g live-server

在项目目录中启动

liver-server

  那现在我们就总结一下 vue 的最大亮点,各种灵活的数据绑定方法。这里主要列举实例详解  {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。

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,永远不要在用户提交和可操作的网页上使用。

  1. Vue 的 所有 数据绑定指令

v-bind

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

模板:

<h3>绑定图片地址</h3>
<p><img v-bind:src="imgSrc" alt="彩世界网址 2"></p>
<p><img :src="imgSrc" alt="彩世界网址 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>

2、绑定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>

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

  效果如下:

  

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

  Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。他的语法和 AngularJS特别相像,如果接触过AngularJS的,上手会更快。而且vue比AngularJS使用简洁、灵活了很多。

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

  那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现。

<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(" ");
   },

  (3)   v-model

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

  然后看一下效果:

  跳转

  下面我们看一段代码:

      (2)外部调用。app1.$data.message; 在js中直接调用 vue 对象的属性、方法时,需要链式语法,一层层点出来,这里用  $data  ,主要还是和js的变量作区别

 

  1. Vue 的 所有 数据绑定指令

  (2) 其次是 v-bind

  data:{} 是定义 这个对象的变量和方法,注意所有在和 app1 有关联的变量、方法都必须在data中声明。

 

  我们就以 多选按钮为例:

  <div v-html="h1"></div> 是绑定HTML标签,注意 他可以直接绑定 HTML模板,但是这一堆HTML标签不能是多层嵌套的。什么意思呢,就是你之间绑定一段标签可以,绑定一个模板也可以,但是如果绑定一个模板,那这个模板内部不能再嵌套模板了。否则无法渲染的。上述代码就是直接导入了一个加了行内样式的h1标签,功能十分强大,比直接操作dom节点强太多了,效率是几何倍的增长。

 

  好啦,以上这些就是Vue.js 的基础内容,至于后续的各种渲染,以及组件 API等等,等我们下周再分享。如果感觉我的博客还不错请记得关注我,之前的博客也有精品吆!

  先看下面的一段代码:

  还是分析一下这个小demo。

  跳转

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

 

  彩世界网址 4

   <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> 这是直接绑定属性,动态修改 img 的src 属性。达到点击图像显示不同的图像的效果。

        (3)与HTML代码的绑定。 这里我是通过 js 的onclick直接绑定的,当然 vue 有自己的事件绑定,这里暂且不讲,如果用 js 的行内绑定,注意需要带对象名。这就是纯 OOP思想了。相信大家对面向对象也不陌生,如果真的不知道是啥玩意的,赶紧百度学去。

  用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步

  彩世界网址 5

  然后解析一下这段代码。这里就不一一详细解释代码了,挑几个典型的详解,其他的便很简单了。

  上述代码就是点击按钮有弹窗,下面解析一下这段代码。

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

  <div v-bind:class="myClass" onclick="app1.func2()"></div>  这个是直接绑定修改 class类名,在页内样式表中有我定义的 .aaa 和 .bbb 两个类名,通过动态修改class名修改样式,这也比 JQuery 直接操作dom节点快捷不少。

  这里要强调一下,v-model 动态绑定这种多选框之类的,会以数组的形式存取,所以,我们用 selected2:[], 变量接收 选择框 的数据,但是我们又不能直接用双大括号显示数据,朋友们可以试验一下,双大括号是纯文本显示,他会把整个数组的中括号,引号,逗号都显示出来,太丑了。所以这里,我用了JQuery的数组分割为字符串的函数 join(" "),把选中的数据分割成字符串,再用一个字符串类型的变量接收数据,这样打印出来就好多了。注意,这里 join(" ") 我用的分隔符是 空白字符,它占一个汉字的空间,但是不会显示出来。

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

  那接下来看看效果图:

  

  彩世界网址 6

  至于 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">
<!--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>

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

  v-bind 他是专门用来绑定属性的 ,主要用来操作元素的 class 列表和它的内联样式。这一点和AnjularJs的 ng-bind 是完全不同的,要注意!!!

  (1)首先是   {{}} 、 v-once 、 v-html 的用法,请看下面的代码:

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

  注意: (1)作用域。js5 只有函数作用域,所以 data 中的函数如果想调用变量,就必须通过  this. 调用,或者直接通过对象名调用。

  1. Vue.js 如何绑定到页面中,使用他的功能。

这里要特别强调一下,v-bind 直接绑定的是属性,而不是样式 ,对于 img ,他的src是属性,但是对于 div ,width 啥的是样式,不是属性,所以 v-bind:width="100 'px'" 不好使.

  彩世界网址 7

  然后看一下效果:

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

  以上就是最最最最最最.....基础的使用 vue  的方法了。

  

  然后看一下效果:

  通过控制台的打印效果可以看出来,实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段,,注意每个阶段都有对应的钩子,我们可以通过对这些钩子进行操作,达成一些功能。虽然初学者用不太上,但是提前了解一下还是好的,到时候碰到实际功能要能想得到生命周期的钩子。

本文由时时app平台注册网站发布于web前端,转载请注明出处:【复习】VueJS之内部指令彩世界网址

关键词: