Vue学习随笔(三)

最新推荐文章于 2025-09-19 17:14:55 发布

原创最新推荐文章于 2025-09-19 17:14:55 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

全局API（二）

Vue.set全局操作

Vue.set的作用就是在构造器外部操作构造器内部的数据，属性或者方法。比如在vue构造器内部定义了一个count为1的数据，我们在构造器外部定义了一个方法，要求每次点击按钮给值加1，就需要用到Vue.set

引用构造器外部数据：
什么是外部数据，就是不在Vue构造器里的data处声明，而是在构造器外部声明，然后在data处引用就可以了，外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。

<body>
{% verbatim %}

    <div id="app">
        {{ count }}
    </div>
 <p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
    function add() {
        Vue.set(outData,'count',10);
    }
    var outData={
        count:1,
        goods:'car'
    }
   new Vue({
       el:'#app',
       data:outData
   })
</script>

还有这种方法也可以实现：

<body>
{% verbatim %}

    <div id="app">
        {{ count }}
    </div>
 <p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
    function add() {
        //Vue.set(outData,'count',10);
        app.count++;
    }
    var outData={
        count:1,
        goods:'car'
    }
   var app = new Vue({
       el:'#app',
       data:outData
   })
</script>

第三种方法：

<body>
{% verbatim %}

    <div id="app">
        {{ count }}
    </div>
 <p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
    function add() {
        //Vue.set(outData,'count',10);
        //app.count++;
        outData.count++;
    }
    var outData={
        count:1,
        goods:'car'
    }
   var app = new Vue({
       el:'#app',
       data:outData
   })
</script>

如果我们这样写：

<body>
{% verbatim %}

    <div id="app">
        {{ count }}
        <ul>
            <li v-for="item in arr">{{ item }}</li>
        </ul>
    </div>
 <p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
    function add() {
       
        outData.count++;
        app.arr[1]='ddd';
    }
    var outData={
        count:1,
       arr:['aaa','bbb','ccc']
    }
   var app = new Vue({
       el:'#app',
       data:outData
   })
</script>

没问题，但我们将outData.count去掉的话，就有问题了，vue是监听不到数组下标的改变的，所以这就要用到vue.set了。

<body>
{% verbatim %}

    <div id="app">
        {{ count }}
        <ul>
            <li v-for="item in arr">{{ item }}</li>
        </ul>
    </div>
 <p><button onclick="add()">add</button></p>
{% endverbatim %}
</body>
<script>
    function add() {

        //outData.count++;
        //app.arr[1]='ddd';
        Vue.set(app.arr,1,'ddd');
    }
    var outData={
        count:1,
       arr:['aaa','bbb','ccc']
    }
   var app = new Vue({
       el:'#app',
       data:outData
   })
</script>

Vue的生命周期(钩子函数)

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。

<body>
{% verbatim %}

    <div id="app">
        {{ count }}
        <p><button @click="add">add</button></p>
    </div>

{% endverbatim %}
</body>
<script>

   var app = new Vue({
       el:'#app',
       data:{
           count:1
       },
       methods:{
           add:function () {
               this.count++;
           }
       },
       beforeCreate:function () {
           console.log('1 - beforeCreate 创建之前');
       },
       created:function () {
           console.log('2 - created 创建完成');
       },
       beforeMount:function () {
           console.log('3 - beforeMount 挂载之前');
       },
       mounted:function () {
           console.log('4 - mounted 被挂载之后');
       },
       beforeUpdate:function () {
           console.log('5 - beforeUpdate 数据更新前');
       },
       updated:function () {
           console.log('6 - updated 被更新后');
       },
       activated:function () {
           console.log('7 - activated ');
       },
       deactivated:function () {
           console.log('8 - deactivated ');
       },
       beforeDestroy:function () {
           console.log('9 - beforeDestroy 销毁前');
       },
       destroyed:function () {
           console.log('10 - destroyed 销毁之后');
       },
   })
</script>

Template制作模板

直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板html代码太多，不建议这么写。
第一种写法：

<body>
{% verbatim %}

    <div id="app">
        {{ message }}
    </div>

{% endverbatim %}
</body>
<script>
   var app = new Vue({
       el:'#app',
       data:{
           message:'hello world'
       },
       template:`
            <h2 style='color:red'>我是选项模板</h2>
       `
   })
</script>

第二种方法：

<body>
{% verbatim %}
    <div id="app">
        {{ message }}
    </div>
    <template id="dd2">
        <h2 style="color:red">我是Template模板</h2>
    </template>
{% endverbatim %}
</body>
<script>
   var app = new Vue({
       el:'#app',
       data:{
           message:'hello world'
       },
       template:'#dd2'
   })

第三种方法：

<body>
{% verbatim %}
    <div id="app">
        {{ message }}
    </div>
{% endverbatim %}
</body>
<script type="x-template" id="dd3">
    <h2 style="color:red">我是Script标签模板</h2>
</script>
<script>
   var app = new Vue({
       el:'#app',
       data:{
           message:'hello world'
       },
       template:'#dd3'
   })
</script>

Component组件

组件在Vue里是十分重要的，其实组件就是制作自定义的标签，这些标签在HTML中是没有的。

全局化注册组件
全局化就是在构造器的外部用Vue.component来注册。

<body>
{% verbatim %}
    <div id="app">
        <huang></huang>
    </div>
{% endverbatim %}
</body>
<script>
    Vue.component('huang',{
        template:`{% verbatim %}<div style='color:red'>我是全局的组件</div>{% endverbatim %}`
    })
   var app = new Vue({
       el:'#app',
   })
</script>

上面的是全局的，下面写个局部的：

<body>
{% verbatim %}

    <div id="app">
        <huang></huang>
        <panda></panda>
    </div>
{% endverbatim %}
</body>
<script>
    Vue.component('huang',{
        template:`{% verbatim %}<div style='color:red'>我是全局的组件</div>{% endverbatim %}`
    })
   var app = new Vue({
       el:'#app',
       components:{
           'panda':{
               template:`{% verbatim %}<div style='color:green'>我是局部panda组件</div>{% endverbatim %}`
           }
       }
   })
</script>