Vue 学习笔记（全）

最新推荐文章于 2023-11-06 21:31:34 发布

11111_zZ

最新推荐文章于 2023-11-06 21:31:34 发布

阅读量861

点赞数 1

分类专栏：前端框架文章标签： vue.js vue-cli3

本文链接：https://blog.csdn.net/qq_47284422/article/details/119391745

版权

Vue入门

简述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

MVVM模式的实现者

Model：模型层，在这里表现 JavaScript 对象
View：视图层，在这里表示 DOM（HTML操作的元素）
ViewModel：连接驶入和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者
- 在MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而ViewModel 就是定义了一个Observer观察者
ViewModel 能够观察到数据的变化，并对试图对应的内容进行更新
ViewModel 能够监听到试图的变化，并能够通知数据发生改变
- Vue.js 就是一个MVVM的实现者，他的核心就是实现了 DOM 监听与数据绑定

为什么要使用Vue.js

轻量级，体积小是一个重要指标，它压缩之后只有20多kb（Angular压缩后56kb+，React压缩后44kb+）
移动优先，更适合移动端，比如移动端的Touch时间
易上手，学习曲线平稳，文档齐全
吸取了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能，如计算属性
开源，社区活跃度高

一、第一个Vue程序

IDEA可以安装 Vue 的插件

注意：Vue 不支持 IE8 及以下的版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性，但它支持所有兼容ECMAScript 5的浏览器。

下载

地址：https://vuejs.org/v2/guide/installation.html

开发版本：

CDN：

出于原型设计或学习目的，可以使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

对于生产，建议链接到特定版本号并构建以避免较新版本意外损坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

如果使用原生 ES 模块，还有一个 ES 模块兼容构建：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>

示例：

hello vue

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>hello vue</title>
    </head>
    <body>
        <div id="app">
            {
  {message}} <br/>
        </div>
    </body>
</html>
<!-- 导入Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: "#app",
        data:{
     
            message : "hello vue"
        }
    });
</script>

动态绑定：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>动态绑定</title>
    </head>
    <body>
        <div id="app">
            {
  {message}} <br/>
            <span v-bind:title="msg">
                鼠标悬停几秒查看此处动态绑定的信息
            </span>
        </div>
    </body>
</html>
<!-- 导入Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: "#app",
        data:{
     
            message : "hello vue",
            msg: "hello world"
        }
    });
</script>

效果：

基本语法：

if-else if-else：

修改type值，展示不同内容

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>if判断</title>
    </head>
    <body>
        <div id="app">
            <p v-if="type==='A'">A</p>
            <p v-else-if="type==='B'">B</p>
            <p v-else-if="type==='C'">C</p>
            <p v-else>D</p>
        </div>
    </body>
</html>

<script>
    var vm = new Vue({
     
        el: "#app",
        data:{
     
            type: 'e'
        }
    });
</script>

for

循环打印内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>for循环</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in items">
                    {
  {item.msg}} -- {
  {index}}
                </li>
            </ul>
        </div>
    </body>
</html>
<!-- 导入Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: "#app",
        data:{
     
            items: [
                {
     msg: "Sakura"},
                {
     msg: "World"},
                {
     msg: "筑梦师"}
            ]
        }
    });
</script>

绑定事件：

点击按钮弹出窗口展示msg内容

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绑定事件</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="sayHi">Click Me</button>
        </div>
    </body>
</html>
<!-- 导入Vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
     
        el: "#app",
        data:{
     
            msg: "world"
        },
        methods: {
     
            sayHi: function (event){
     
                alert(this.msg);
            }
        }
    });
</script>

双向数据绑定

什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，试图也就发生滨化，当视图发生变化的时候，数据也会跟着同步变化，也算是Vue.js 的精髓之处。

需要注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定，单向数据绑定是使用状态管理工具的前提，如果我们使用 vuex，那么数据流也是单项的，这是就会何双向数据绑定有冲突。

为什么要实现数据的双向绑定

在Vue.js 中，如果使用 vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了，及两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双星，简单易操作。

在表单中使用双向数据绑定

可以用 v-model 指令在表单、、及元素上创建双向数据绑定，它会根据控件类型自

最低0.47元/天解锁文章

11111_zZ

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 学习笔记（全）

Vue入门简述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。MVVM模式的实现者Model：模型层，在这里表现 JavaScript 对象View：视图层，在这里表示 DO
复制链接

扫一扫