vue学习笔记【基础篇一】

最新推荐文章于 2022-10-15 16:31:41 发布

Marvel__Dead

最新推荐文章于 2022-10-15 16:31:41 发布

阅读量905

点赞数

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

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/77568132

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

“时间永远都不够用”———–《海贼王》-索隆

介绍

Vue 是一个 MVVM 的 JavaScript 框架，以 json 为基本数据模型，绑定HTML页面，当 json 从网络中的 json 改变的时候，我们的HTML页面也会改变。

MVVM 概念模型：

这里写图片描述

什么叫MVVM？？其实MVVM是这样分割的，M/V/VM。上图中最右边的就是M—>model，最左边就是V—>View，中间就是VM—>ViewModel。VM起到HTML和Json的桥梁的作用，如果Json改变，那么就通过VM在内存中维护的虚拟 DOM 重新点对点刷新 View 界面，点对点起到提高效率作用；然后，如果View的某个地方有数据改变，比如input标签里面有数据变动，那么就映射到Model里面，这就是VM的监听作用。这里说了那么多，其实还不如看例子，自己体会！！！

初入Vue

进入官网，引入 vue.js

通过Vue雏形，你会知道Vue.js真的很小。

Vue和AngularJs的区别在于Vue很小功能上也不差偏向适合于移动端，AngularJs适合PC端。
在GitHub里面你可以知道，Vue的受欢迎程度超过AngularJS！！！

Vue和AngularJs的相同点在于，它们都不兼容IE8及以下。其实现在都是2017快到2018了，我们为什么还要去兼容IE8以下？？？为什么？？？你不觉得可耻吗？？？信息时代发展飞速，你还在用IE8？？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初入Vue</title>
    <script src="../res/vue.min.js"></script>
    <!-- vue.min.js代表生产版本，vue.js代表开发版本，区别在于生产版本去掉空格这些显得更小 -->
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<script>
    //你也许没有发现这是ECM6的新增的var替代类型。如果你还在用var，你就OUT了！！！
    let data = {
        msg:`HAHA，我是Vue，欢迎来到Vue的世界！！！`//你也许没有发现这是ECM6的超级字符串！
    };

    let vm = new Vue({
        el:'#app',//这个是el属性代表选择器，意味将会对哪儿个盒子作为View
        data:data//这个就是Model啦
    });

</script>
</html>

你一定要自己手动运行上面这个例子，你才会知道它的神奇之处！！！也许你实践了，还是觉得Vue不厉害，那么你可以继续尝试下面的例子。

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向数据绑定</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <h3>{{msg}}</h3>
        <input type="text" v-model="msg">
    </div>
</body>
<script>
    let data = {
        msg:'有本事你就删除我啊！！！.... .- .... .- .... .-'//别以为我后面这些“.-”是乱写的！！！
    };
    let vm = new Vue({
        el:'.app',//注意，这里的挂载点（选择器）在vue2.0时，不能是body和html，只能是除了它们之外的。
        // 然后，你发现没有，这个例子和上个例子的选择器不一样啊~~~
        data:data
    });
</script>
</html>

数据的基本类型输出和遍历输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{输出基本数据类型和遍历输出}}</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>

    <div class="app">

        常规输出<br><br>
        {{msgS}}<br>
        {{msgI}}<br>
        {{msgB}}<br>
        {{msgArr}}<br>
        {{msgJson}}<br>
        <hr>

        遍历输出
        <ul>
            <li v-for="(item,index) in msgArr">
                下标：{{index}}  数据：{{item}}
            </li>
        </ul><br>
        <ul>
            <li v-for="(item,key,index) of msgJson"><!-- 这里的 key 和 index 顺序不能错了，否则会出现key的值是index的值。 -->
                下标：{{index}} key：{{key}} 数据：{{item}}
            </li>
        </ul>
    </div>
</body>
<script>
    let data = {
        msgS:'风萧萧兮易水寒',
        msgI:11111,
        msgB:true,
        msgArr:['be Alone！','Simple','Dream'],
        msgJson:{a:'普通',b:'困难',c:'地狱'}
    };

    let vm = new Vue({
        el:'.app',//这里不能写多个选择器，然后同名的选择器只有一个生效，所以你不能有两个div都是类属性是app，因为这样只能是第一个生效。
        data:data
    });
</script>
</html>

vue回调函数

通过函数方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-watch</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div>{{a}}---{{b}}</div>
        a:<input v-model="a" type="text"><br>
        b:<input v-model="b" type="text"><br>
    </div>
</body>
<script>
    let data = {
        a:12,
        b:13
    };
    let vm = new Vue({
        el:'.app',
        data:data
    });
    //this 在这里指的是vm，而vm可以代理data对象的属性。所以vm.a === data.a
    //当 data.a 和 data.b 任意一个值改变的时候，就调用回调函数。
    vm.$watch(function () {
        return this.a + this.b
    },function (newv , oldb) {
        alert('newv:'+newv+" oldb:"+oldb);
    });
</script>
</html>

通过键路径方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-watch</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div>{{a}}---{{b}}</div>
        a:<input v-model="a" type="text"><br>
        b:<input v-model="b" type="text"><br>
    </div>
</body>
<script>
    let data = {
        a:12,
        b:13
    };
    let vm = new Vue({
        el:'.app',
        data:data
    });
    //当data.a值改变的时候调用回调函数。
    vm.$watch('a',function (newv , oldb) {
        alert('newv:'+newv+" oldb:"+oldb);
    });
</script>
</html>

vm.$watch 返回一个取消观察函数，用来停止触发回调：

var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()

选项：deep

为了发现对象内部值的变化，可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的当前值触发回调

v-once，数据不会再刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
<div class="app">
    不管你怎么修改input里面的值，下面的信息就是不会改变！！！
    <input type="text" v-model="goodMsg"><br>
    <input type="text" v-model="badMsg">
    <div v-once>
        goodMsg：{{goodMsg}}<br>
        badMsg：{{badMsg}}
    </div>
</div>
</body>
<script>
    let data = {
        goodMsg:'加油，你绝不能放弃！！！',
        badMsg:'你不能盲目加油！！！'
    };

    let vm = new Vue({
        el:'.app',
        data:data
    });
</script>
</html>

模板语法

插值

文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>

纯 HTML

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML —— 会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面(UI)，组件更适合作为可重用和可组合的基本单位。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div v-html="xhtml"></div>
    </div>
</body>
<script>
    let data = {
        xhtml:'<div>{{msg}}<br><input type="text" v-model="msg"></div>'
    };
    let vm = new Vue({
        el:".app",
        data:data
    });
</script>
</html>

这里写图片描述

v-bind

动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

示例：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

使用 JavaScript 表达式

可以访问用户自定义的全局变量和data属性还有全局系统属性中的数据！！！

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

v-if 控制某个标签是否显示

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式（v-for 是例外情况，稍后我们再讨论）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</p>
这里， v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

<a v-bind:href="url"></a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

之后当我们更深入地了解 v-on 与 v-model时，会看到更多修饰符的使用。

过滤器

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

由于最初计划过滤器的使用场景，是用于文本转换，所以 Vue 2.x 过滤器只能用于双花括号插值(mustache interpolation)和 v-bind 表达式中（后者在 2.1.0+ 版本支持）。对于复杂数据的转换，应该使用计算属性。

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在这个例子中，capitalize 过滤器函数将会收到 message 的值作为第一个参数。

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

过滤器可以串联：

{{ message | filterA | filterB }}

在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中，然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。
过滤器是 JavaScript 函数，因此可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 取值后的值作为第三个参数。

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为(dynamic behavior)时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序(SPA - single page application)时，v- 前缀也变得没那么重要了。因此，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>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

Simple Dream，海贼王主角路飞一直都在说一句话，“海贼王，我当定了！”，现在才知道，这是一个简单的梦想，然后花尽一切努力去实现它，一个简单的梦想代表着，他的心沉下去了。

而这也是我现在所需要的，我不能本末倒置，为什么本末倒置？？？因为，在我梦想还没实现之前，我不会再想儿女私情，另一方面我不是那种上面能够坏坏的逗你笑，下面能够很踏实的撑起整个家的人，并且从你对我的表现上看，我相信，我不是那种能够取悦你的人！！！世界还很大，去找一个真真懂的人，而不是为你做事，却成了理所当然！！！

我现在觉得，如果一开始，路就错了，那就要及时回头！！！不管失去什么，我都不能失去梦想！！！