vue学习笔记(一)

努力的小朱同学

已于 2024-01-26 15:49:02 修改

阅读量309

点赞数 3

分类专栏： Vue 文章标签： vue

于 2020-11-30 20:13:55 首次发布

本文链接：https://blog.csdn.net/weixin_45092437/article/details/110404262

版权

Vue 专栏收录该内容

27 篇文章 6 订阅

订阅专栏

声明：我刚开始学习Vue，这是我用来记录自己的学习路程的博客，可能会理解有偏差，如果文中出现错误，望读者能够及时提醒，”三人行，必有我师“，提前感谢各位支持！

一、什么是Vue？

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue是当前国内最流行的前端框架，而且学习比较简单，容易理解。

二、学习Vue的前置要求

学习Vue之前，你首先要学会HTML5和CSS3，并能够熟悉应用，然后还需要对JavaScript有一定的了解，但要求不高，了解js的基础知识就行。

三、Vue的安装和使用

建议去官网(https://cn.vuejs.org/v2/guide/installation.html)上下载开发版本，然后使用时只需要将下载好的包，复制到项目文件下面，然后在文件中用

除此之外，还有使用CDN和NPM两种方法，但不太推荐新手使用。

四、第一个Vue程序

程序员学习新东西的第一个程序一定会是熟悉的“hello world！”，那用Vue怎么来实现呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
    var app=new Vue({
        el: '#app',
        data: {
            message: 'Hello World!'
        },
         methods:{
              reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
         }
    })
</script>

现在我们来分析一下这个程序，首先通过< script>标签引入了对Vuejs 的引用，然后在< body>里面设置了一个div盒子，并设定id，盒子里面用双大括号引用了一个属性 message。下面的< script>标签中首先new 了一个Vue对象，其中的el参数，它是表示选择的DOM元素的id，意味着我们接下来的所有动作的是在这个指定的DOM元素内，外部不受影响。data里面用于定义属性，并设置属性的值，如果我们改变属性的值，那么盒子中的值也会发生相应改变。methods用于定义方法，function前面就是方法的名字，调用方法时只需要调用方法名就可。

五、Vue模板语法

1.文本插值

Vue最简单的语法就是使用 {{...}}（双大括号）的文本插值：

就像上面的那个hello world！就是典型的文本插值。

我们也可以在{{...}}中使用JavaScript表达式，如：三元表达式和模板字符串以及调用函数等等，但是要注意：绑定在表达式中的函数方法在组件每次更新时都会被重新调用，因此只能用来获取函数的返回值，而不应该产生任何副作用，比如改变数据或触发异步操作等。

2.v-html指令

使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '<h1 style="color: #0066CC">菜鸟联盟</h1>'
        }
    })
</script>

就是将写好的HTML代码插到v-html所在的位置上，让浏览器解析显示出来。但是请尽量少使用这个指令，因为动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。

3.v-bind指令

v-bind指令一般是用来绑定html属性，就是class和style的,还有一些别的标签属性

//绑定class
<div id="app">
  <p class="font_Size" v-bind:class="{ red: isRed, center: isCenter }">Hello World!</p>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
      isRed: true,
	  isCenter: true
    }
})
</script>

//绑定style
<div id="app">
 <p>直接绑定：</p>
 <p v-bind:style="{color: redColor, 'text-align': centerPos}">Hello World!</p>
</div>
<script>
var app = new Vue({
    el: '#app',
    data: {
      redColor: 'red',
	  centerPos: 'center'
    }
</script>

//绑定标签属性
<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

v-bind指令的作用是为了动态的切换class和style，根据属性后面相应的值来判断采取什么样式。在最后一个例子里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

还有其他很多的用处，但是我还没深入学习到，等后面我会再更新的。
更新1：
文本插值里面还可以包含模板字符串，模板字符串中可以以 ${变量名} 的形式包含声明的变量，v-bind 绑定的属性也可使用：

<div id="app">
    <div v-bind:style="{backgroundColor: `rgb(${r},${g},${b})`}">{{ `rgb(${r},${g},${b})` }}</div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
           r: 0,
           g: 0,
           b: 0
        }
    })
</script>

4.js表达式

Vue都提供了完全的 JavaScript 表达式支持。

<div id="app">
    {{5+5}}<br>
    {{ok? 'yes':'no'}}<br>
    {{message.split('').reverse().join('')}}
    <div v-bind:id="'list-'+id">
        菜鸟教程
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            ok: true,
            message: 'RUNOOB',
            id: 1
        }
    })
</script>

这些算式表达式、三元表达式、函数方法等会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。但是有个限制：每个绑定都只能包含单个表达式，非表达式的js语句（例如：{{ var a = 1 }}和流程控制语句 {{ if (ok) { return message } }} ）不会生效。

5.v-if指令

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否使用某元素。

<div id="app">
    <label v-if="seen" >现在你看到我了</label>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true
        }
    })
</script>

6.v-model 指令

在 input 、select、textarea、checkbox、radio 等表单控件元素中我们可以使用 v-model 指令来实现双向数据绑定，根据表单上的值，由Vue来自动更新绑定的元素的值。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Runoob!'
        }
    })
</script>

7.v-on指令

按钮的事件我们可以使用 v-on 监听事件，并对用户点击按钮调用方法、进行响应。

//在用户点击按钮后对字符串进行反转操作：
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Runoob!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>

8.过滤器

Vue允许我们自定义过滤器，经常用作文本格式化，过滤器函数接受表达式的值作为第一个参数。

//对输入的字符串第一个字母转为大写
<div id="app">
    {{ message | capitalize }}
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'runoob'
        },
        filters: {
            capitalize: function (value) {
                if(!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            }
        }
    })
</script>

双重大括号里面有两个值，第一个值是数据，第二个值是要执行的函数方法。函数方法要放到 filters:{} 里面。

过滤器还可以串联：例如： {{ message | filterA | filterB }} ；

过滤器还可以接受参数：例如： {{ message | filterA(‘arg1’, arg2) }} message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

9.缩写

Vue.js 为两个最为常用的指令：v-bind 和 v-on 提供了特别的缩写：

 v-bind完整语法
<a v-bind:href="url"></a>
 缩写
<a :href="url"></a>

 v-on完整语法
<a v-on:click="doSomething"></a>
 缩写
<a @click="doSomething"></a>

六、Vue条件语句

1.v-if指令

除了在上文中的元素中使用，还可以在template（把<template> 元素当做不可见的包裹元素，可以一次性切换多个元素）中使用 v-if 指令：

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
        <h1>菜鸟联盟</h1>
        <p>萌新互助</p>
        <p>追逐梦想</p>
    </template>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            seen: true,
            ok: true
        }
    })
</script>

不推荐同时使用 v-if 和 v-for，因为当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

2.v-else指令

相当于用 v-else 指令给 v-if 添加一个 “else” 块；

//随机生成一个数字，判断是否大于0.5，然后输出对应信息
<div id="app">
    <div v-if="Math.random() > 0.5">
        Sorry
    </div>
    <div v-else>
        Not Sorry
    </div>
</div>

<script>
    new Vue({
        el: '#app'
    })
</script>

3.v-else-if指令

用作 v-if 的 else-if 块，可以连续多次使用。

//判断 type 变量的值
<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'c'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            type: 'B'
        }
    })
</script>

4.用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

//用户在不同的登录方式之间切换
<div id="app">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address">
    </template>
    <button v-on:click="toggleLoginType">Toggle login type</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            loginType: 'username'
        },
        methods: {
            toggleLoginType: function () {
                return this.loginType = this.loginType === 'username'?'email':'username'
    }
        }
    })
</script>

在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，所以<input> 不会被替换掉，仅仅是替换了它的 placeholder（默认提示信息）。但是这不能符合所有的实际需求，所以我们加入了key，来表达“这两个元素是完全独立的，不要复用它们”。

<div id="app">
    <template v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </template>
    <button v-on:click="toggleLoginType">Toggle login type</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            loginType: 'username'
        },
        methods: {
            toggleLoginType: function () {
                return this.loginType = this.loginType === 'username'?'email':'username'
    }
        }
    })
</script>

现在，每次切换时，输入框input都将被重新渲染，清空。当然。<label> 元素仍然会被高效地复用，因为它们没有添加 key。

5.v-show指令

跟v-if指令用法大致相同。

<h1 v-show="ok">Hello!</h1>

但两者也有很大的不同，v-if如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块，当条件变为假的时候，会将条件块销毁。v-show不管初始条件是什么，元素总是会被渲染，只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

七、Vue循环语句

循环使用 v-for 指令。

1.site in sites 形式的语法

v-for 可以绑定数据到数组来渲染一个列表，sites 是源数据数组并且 site 是数组元素迭代的别名。

<div id="app">
    <ol>
        <li v-for="site in sites">
            {{ site.name }}
        </li>
        <li>--------------</li>
    </ol>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            sites:[
                {name: 'Runoob'},
                {name: 'Google'},
                {name: 'Taobao'}
            ]
        }
    })
</script>

2.v-for迭代对象

迭代一个对象中的所有属性。

//1)一个参数，只显示内容值
<div id="app">
    <ul>
        <li v-for="value in object">
            {{value}}
        </li>
    </ul>
</div>

//2)两个参数，显示内容值和键名
<div id="app">
    <ul>
        <li v-for="(value,key) in object">
            {{key}} : {{value}}
        </li>
    </ul>
</div>

//3)三个参数，显示内容值和键名以及索引(从0开始)
<div id="app">
    <ul>
        <li v-for="(value,key,index) in object">
          {{index}} . {{key}} : {{value}}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            object: {
                name: '菜鸟联盟',
                url: 'http://www.baidu.com',
                slogan: '萌新互助，追逐梦想'
            }
        }
    })
</script>

3.v-for迭代整数

给定一个整数n，输出从1到n之间的所有整数。

<div id="app">
    <ul>
        <li v-for="n in 10">
            {{n}}
        </li>
    </ul>
</div>

<script>
    new Vue({
        el: '#app'
    })
</script>

努力的小朱同学

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue学习笔记(一)

声明：我是在校大学生，刚开始学习Vue，这是我用来记录自己的学习路程的博客，可能会理解有偏差，如果文中出现错误，望读者能够及时提醒，”三人行，必有我师“，提前感谢各位支持！一、什么是Vue？ Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue是当前国内最流行的前端框架，而且学习比较简单，容易理解。二、学习Vue的前置
复制链接

扫一扫