vue学习笔记【基础篇一】

水深无声 2022-06-09 02:37 187阅读 0赞

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

## 介绍 ##

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

MVVM 概念模型：

![这里写图片描述][SouthEast]

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

## 初入Vue ##

[进入官网][Link 1]，引入 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>
        
    </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">
                    下标：{
        {
        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>

![这里写图片描述][SouthEast 1]

### v-bind ###

动态地绑定一个或多个特性，或一个组件 prop 到表达式。
    
    在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。
    
    在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

示例：
    
    
    <img v-bind:src="imageSrc">
    
    <img :src="imageSrc">
    
    <img :src="'/path/to/images/' + fileName">
    
    <div :class="{ red: isRed }"></div>
    <div :class="[classA, classB]"></div>
    <div :class="[classA, { classB: isB, classC: isC }]">
    
    <div :style="{ fontSize: size + 'px' }"></div>
    <div :style="[styleObjectA, styleObjectB]"></div>
    
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
    
    <div v-bind:text-content.prop="text"></div>
    
    <my-component :prop="someThing"></my-component>
    
    <child-component v-bind="$props"></child-component>
    
    <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 表达式的尾部，由“管道”符指示：

{
        { message | capitalize }}
    
    <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，海贼王 主角 路飞 一直都在说一句话，“海贼王，我当定了！”，现在才知道，这是一个简单的梦想，然后花尽一切努力去实现它，一个简单的梦想代表着，他的心沉下去了。

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

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

[SouthEast]: /images/20220609/fda193cf93744b73b459b4b633c10d82.png
[Link 1]: https://cn.vuejs.org/v2/guide/
[SouthEast 1]: /images/20220609/4d0f16a52d184baf81367173bedd2b62.png