vue.js实战学习笔记-----基础篇

最新推荐文章于 2025-07-10 12:17:55 发布

原创最新推荐文章于 2025-07-10 12:17:55 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

学习专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍Vue.js的轻量级核心、渐进式使用方式、实例创建、生命周期、指令及表单绑定等关键概念。从加载CDN到计算属性，全面解析Vue.js的实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.Vue.js概念

Vue.js的官方文档中是这样介绍它的。

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

1）简单小巧是指Vue.js压缩后大小仅有17KB。

2）所谓渐进式（Progressive），就是你可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的东西。

二.Vue.js使用

（1）直接通过script加载CDN文件

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

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

（2）下载后通过自己的相对路径来引用

（3）创建vue+webpack的项目

三.创建实例

var app = new Vue( {
//选项
}）

（1）el选项

el用于指定一个页面中已经存在的DOM元素来挂载Vue实例，它可以是HTMLElement,也可以是CSS选择器，例如：

<div id = "app"></div>
var app = new Vue({
       el:document.getElementById('#app')
})

挂载成功后，我们可以通过app.$el来访问该元素。Vue提供了很多常用的实例属性与方法，都以$开头，比如$el。

（2）data选项

可以声明应用内需要双向绑定的数据。Vue实例本身也代理了data对象里的所有属性，所以可以这样访问：

var app = new Vue({
    el:'#app',
    data:{
           a:2
    }
}）
console.log（app.a）；//2

除了显式声明数据外，也可以指向一个已有的变量，并且它们之间默认建立了双向绑定，当修改其中任意一个时，另一个也会一起变化：

var myData = { a:1}
var app = new Vue({
    el:'#app',
    data:myData
})
console.log(app.a);//1

//修改属性，原数据也会随之修改

app.a = 2;
console.log(myData.a);//2

//反之，修改原数据,Vue属性也会修改

myData.a = 3;
console.log(app.a);//3

四.生命周期

每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的声明周期的钩子，我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

钩子的this指向的是调用它的Vue实例。

五.知识点

（1）v-pre

如果想显示{{ }}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程

<span v-pre>{{这里的内容是不会被编译的}}</span>

（2）在{{ }}中除了简单的绑定属性值之外，还可以使用JS表达式进行简单的运算、三元运算等。

Vue.js只支持单个表达式，不支持语句和流控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date。

（3）过滤器

Vue.js支持在{{ }}插值的尾部添加一个管道符“（|）”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔符等。过滤的规则是自定义的，通过给Vue实例添加选项filters来设置。

例子：定时更新时间并对时间进行格式化

<div id = "app">
   {{ date | formatDate }}
</div>
<script>
//在月份、日期、小时小于等于10时前面补0
var padDate = function(value){
    return value < 10 > '0' +vale :value;
};
var app = new Vue({
   el: "#app",
   data:{
         date:new Date();
    },
  filters:{
       formatDate : function （value){ //这里的value就是需要过滤的数据
               var date = new Date(value);
               var year = date.getFullYear();
               var day= padDate(date . getDate()); 
               var hours= padDate(date . getHours()); 
               var minutes = padDate (date .getMinutes ()); 
               var seconds = padDate (date .getSeconds ()); 
              //将整理好的数据返回出去
                return year + '-' + month +'-' + day + '' + hours '：' minutes+':'+ seconds; 
       }
 },
    mounted : function () { 
            var _this = this; //声明 个变量指向 Vue 实例 this ，保证作用域一致
            this.timer= setinterval(function() { 
                _this.date= new Date(); //修改数据 date
            } , 1000) ; 
     },
   beforeDestroy: function () { 
             if (this.timer) { 
                clearinterval(this.timer) ; //在 Vue 实例销毁前 消除我们的定时器
              }
            }
})
</script>

过滤器还可以串联，而且可以接受参数，例如：

//串联
{{message | filterA | filterB }}
//接受参数
//这里的字符串argl,arg2 将分别传给过滤器的第二个和第三个参数，因为第一个是数据本身。
{{message | filterA('arg1','arg2')}}

注意：过滤器应当用于处理简单地文本转换，如果要实现更为复杂的数据转换，应该使用计算属性。

（4）计算属性

1）所有的计算属性都以函数的形式写在 Vue 实例内的 computed选项内，最终返回计算后的结果。

2）在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

3）计算属性还可以依赖多个 Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

4）每一个计算属性都包含一个getter和一个setter，默认是只有一个getter，在你需要时，也可以提供一个setter函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter函数，执行一些自定义的操作。

5）计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式style。当使用组件时，计算属性也经常用来动态传递 props 。

6）小技巧：一是计算属性可以依赖其他计算属性，二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据（组件化可用）。

六.内置指令

（1）v-cloak

1) v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none;配合使用。

<div id="app" v-cloak>
    {{message}}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
                message:'这是一段文本',
        }
     })
</script>

2）这时虽然己经加了指令 v-cloak ，但其实并没有起到任何作用，当网速较慢、 Vue.js 文件还没加载完时，在页面上会显示｛ { message } ｝的字样，直到 Vue 创建实例、编译模板时， DOM 才会被替换，所以这个过程屏幕是有闪动的。只要加一句css 就可以解决这个问题了。

[v-cloak] { 
display: none;
}

3）一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很使用，但是在具有工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。

（2）v-once

1）v-once也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次。包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

（3）v-show

注意：v-show不能在<template>上使用

（4）v-for

1)除了数组外，对象的属性也是可以遍历的。

<div id="app">
<span v-for= "value in user" >{{ value }} </span> 
</div>
<script> 
    var app =new Vue ( { 
        el :'#app', 
        data : { 
                   user:{
                        name:'Aresn',
                        gender:'男',
                        age:26
                    }
                }
        }) 
</script>

渲染后的结果为:

<span>Aresn </span><span ＞男＜／ span><span>26 </span>

遍历对象属性时，有两个可选参数，分别是键名和索引：

<div id="app">
    <ul>
        <li v-for="(value,key,index) in user">
            {{index}}-{{key}}:{{value}}
        </li>
    </ul>
</div>
<script> 
    var app =new Vue ( { 
        el :'#app', 
        data : { 
                   user:{
                        name:'Aresn',
                        gender:'男',
                        age:26
                    }
                }
        }) 
</script>