vue入门学习笔记--01

最新推荐文章于 2024-09-11 08:29:51 发布

新猿忆码

最新推荐文章于 2024-09-11 08:29:51 发布

阅读量161

点赞数

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

本文链接：https://blog.csdn.net/newperso/article/details/111152381

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对于vue应该怎么去学习，尤其是初学者，很多人都在说，vue非常容易上手，这也是因人而异，相信很多人也和我一样会表示vue对于初学者还是有些不友好的，尤其是使用全家桶进行项目开发的时候，项目结构会变的比较复杂，思路不清晰就比较头疼了，真实的诠释了从入门到放弃的真谛，处于各种原因，接下来的时间我会对vue重新进行学习，俗话说，温故而知新，希望我的分享可以帮助到入门的学者。

vue是什么？

学习一门技术我们首先要知道它是什么，可以干什么，了解之后再进行下一步的学习。从vue的官网就可以体现出来。
vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
这里是vue官方对于vue的解释，那什么是渐进式呢？现代化的工具链又是什么？这些问题对于初学者或多或少有些不易理解。
渐进式：我个人理解为逐渐递进，先使用Vue的核心库，再根据你的需要的功能再去逐渐增加相应的插件(我们可以在官网看到vue的核心插件为vue-router、vuex，那vue-router，vuex又是什么，这个不能操之过急)
对于现代化的工具链以及各种类库我们可以通过官网进行详细的查阅
知道这些知识之后，我们可以动手写代码了（默认你已经学习了html，css，JavaScript）

如何在html文件中引入vue文件

<!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 2.生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在学习的过程中我们可以将vue.js文件下载到文件中，然后通过script标签直接引入

<script src="../js/vue.js"></script>

使用vue创建hello vue 页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入vue.js文件 -->
  <script src="../js/vue.js"></script>
</head>

<body>
  <!-- 提供渲染容器id为app的div 通过插值语法{{}}对数据进行渲染-->
  <div id="app">{{msg}}</div>
  <script>
    // 初始化vue实例
    const vm = new Vue({
      //将实例挂载到app 
      el: '#app',
      //数据
      data: {
        msg: 'hello vue'
      }
    })
  </script>
</body>

</html>

这样就完成了hello vue页面，接下来就可以在浏览器中看到hello vue，同时可以打开浏览器的控制台来对数据进行修改，vm.msg=‘hello world’ ，页面上的数据就会改变为hello world ，因为现在数据和dom已经建立了关联，所有的数据都是响应式的。

指令

指令：带有v-前缀的指令，代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。

1.v-text：更新元素的textContent，若只更新部分文本内容需要使用{{ Mustache }}插值。

<div id='app'>
	<h2 v-text='msg'></h2>
</div>

2.v-html:更新元素的innerHTML,v-html不能用来复合局部模板，因为vue不是基于字符串的模板引擎。另外只对可信内容使用v-html，避免xss攻击带来重大危险。
v-text和v-html同样可以将数据渲染到页面上，有那些区别呢？运行以下代码就可以清晰的发现其中的不同。

<body>
  <!-- 提供渲染容器id为app的div -->
  <div id="app">
    <!-- 使用v-text渲染 -->
    <span v-text='msg'></span>
    <!-- 使用v-html渲染  可以解析数据中的html代码-->
    <span v-html='msg'></span>
  </div>
  <script>
    // 初始化vue实例
    new Vue({
      el: '#app',
      data: {
        msg: '<h2>hello vue</h2>'
      }
    })
  </script>
</body>

3.v-show: 根据指令的表达式值的真假，切换元素的display css属性。当条件变化时，会触发过渡效果。v-show会让元素始终渲染并保留在DOM中，因为只是改变css属性display。

<body>
  <div id="app">
    <h2 v-show='true'>{{msg}}</h2>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
      }
    })
  </script>
</body>

也可以将v-show的值维护在data中。

<body>
  <div id="app">
    <h2 v-show='show'>{{msg}}</h2>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        show: true
      }
    })
  </script>
</body>

之后我们便可以通过浏览器的控制台改变show的值，vm.show=false, 就会发现显示在页面上的数据消失了，接着我们可以打开查看器就会发现：dom元素依然存在，只不过添加了display：none。
v-show值为false时
4.v-if：根据指令的表达式值的真假渲染元素。
v-if和v-show都是根据表达式的真假来渲染元素的，他们之间又有什么区别呢。

<body>
  <div id="app">
    <h2 v-show='show'>{{msg}}</h2>
    <h2 v-if='show'>{{msg}}</h2>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        show: true
      }
    })
  </script>
</body>

运行以上的代码，我们会发现页面上会展示两个hello，打开查看器会发现
在这里插入图片描述
当我们在控制台输入vm.show=false时，页面上的两个hello都消失了，然后再到查看器中进行查看，我们就会发现，v-if进行渲染的dom节点也同样消失了。

这样我们就明白了，v-show是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。
总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。

5.v-else：表示v-if的“else块”，不需要表达式，但必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<body>
  <div id="app">
    <h2 v-if='show'>{{msg}}</h2>
    <h2 v-else>{{msg1}}</h2>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'v-if is true,you can seen me',
        msg1: 'v-if is false',
        show: false
      }
    })
  </script>
</body>

运行以上代码我们会发现页面显示为v-if is false，同样可以通过控制台对show的值进行切换，然后查看页面上数据的显示效果。

6.v-else-if：表示 v-if 的 “else if 块”。可以连续使用。必须紧跟在带 v-if 或者 v-else-if 的元素之后。
7.v-for：基于源数据（该数据类型可以是Array | Object | number | string | Iterable），进行多次渲染元素或模板块。该指令的值必须使用特定的语法alias in expression，为当前遍历的元素提供别名。

<body>
  <div id="app">
    <h2>{{msg}}</h2>
    <ul>
      <li v-for='item in arr'>{{item}}</li>
    </ul>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: '我最喜欢什么',
        arr: ['大鸡腿儿', '猪肘子', '烤羊腿儿']
      }
    })
  </script>
</body>

运行上述代码你会发现页面上会出现arr的每一项的值，同样再控制台中输入vm.arr.push(‘大猪蹄儿’),你会发现数组末尾会添加一项大猪蹄儿，并且页面上也会进行渲染。

8.v-on：绑定事件监听器。事件类型由参数指定。

<body>
  <div id="app">
    <h2>{{msg}}</h2>
    <button v-on:click='changeMsg'>click</button>
    <!-- v-on的简写方式 -->
    <button @click='changeMsg'>click1</button>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
      },
      // 计算属性，对data中的数据进行处理
      methods: {
        changeMsg() {
          this.msg = this.msg.split('').reverse().join('')
        }
      },
    })
  </script>
</body>

v-on在项目中的使用频率是比较高的

9.v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。

<body>
  <div id="app">
    <span v-bind:title='msg'>鼠标悬浮查看</span>
     <!-- v-bind的简写方式 -->
    <a :href="url">百度</a>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: '页面加载' + new Date().toLocaleString()，
        url: 'http://www.baidu.com'
      }
    })
  </script>
</body>

10.v-model：实现表单输入和应用状态之间的双向绑定。

<body>
  <div id="app">
    <input v-model='msg' type="text">
    <h2>{{msg}}</h2>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      }
    })
  </script>
</body>