Vue学习笔记（1）

最新推荐文章于 2025-03-01 19:48:24 发布

原创最新推荐文章于 2025-03-01 19:48:24 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

零碎的学习专栏收录该内容

5 篇文章

订阅专栏

在学习Vue之前，先熟悉HTML和CSS这两个语言，并且有一定的JavaScript语言的基础。相对而言前面两个大部分都是标签和引用之类的，三五天的样子就应该看的差不多不用特别深究。JavaScript语言是一个需要认真学习并且变化相对而言比较多的，在学习的同时可以一同学习Jquery会使得学习不算特别枯燥（Jquery在简化JavaScript的部分起到了很大的作用）
在这里推荐几个网站：
- CSS的一些小应用（英文网站）
- CSS学习过程可能遇到的问题（中文网站）
- 热门的前端代码案例分享

Vue的介绍

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 script 标签引入

Vue.js的教程案例

基本的v-的模板语法，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue Test</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://vuejs.org/js/vue.min.js"></script>
<style>
.textColor{
    color: #000;
}
.textSize{
    font-size: 30px;
}
</style>
</head>
<body>
    <div class="test">
    <p v-if = 'seen'>{{ message1 }}</p>
    <p v-html = "message2" :class="class1"></p>
    </div>
<script type="text/javascript">
    new Vue({ 
        el:'.test',
        data:{

            seen: true,
            message1:'hello vue.js',
            message2:'hey guys',

            class1:{
                'textColor':true,
                'textSize':true,
            }
    }   
    })
</script>
</body>
</html>

Vue的一些模板语法：

v-bind　

v-bind：class -> 缩写为 : class
v-bind在使用的时候大多数以在vue中的语句调用css的相关属性，如例
v-bind的基本用法

v-on

v-on的使用可以用@代替

message.split(”).reverse().join(”)

1.join()主要是将数组中的所有元素放入一个字符串，有指定分隔符单引号
2.reverse()是改变原来的数组，而不会创建新的数组，可以将数组倒序排列
3.可以将字符串按某个字符或者其他分割，返回数组

过滤器

过滤器的使用类似于 {{ message | capitalize }}后面跟的即是过滤器，过滤器的定义在vue中以类似于

  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }