前端的起步【vue系列】-第一天：vue的第一次

最新推荐文章于 2021-11-05 11:01:32 发布

qq_36114959

最新推荐文章于 2021-11-05 11:01:32 发布

阅读量270

点赞数

分类专栏： vue学习之路

本文链接：https://blog.csdn.net/qq_36114959/article/details/103011448

版权

vue学习之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章参考>>>>>> 官方文档 + 书籍:《Vue.js快速入门》，切记，得有HTML、JS、CSS的基本基础，总不能你一点都不懂，直接干框架吧。

------------------------------------------------------------------------------------------------------------------------------

第一章

废话不多说，讲的就是前端的发展和现有框架以及vue的优势-----总结起来就一句话:，前端三大框架：

Angular：发展最久，但学习难度最大，目前开始下坡趋势。
React：难度相对于Angular下降不少，有新特性
Vue：难度最低，目前最火，本系列讲的就是它。

上面的难度指入门难度，其他的暂不考虑，请不要钻牛角尖。

第二章

第一节知识点:声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：:

首先我们创建一个html文件，代码如图:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Document</title>
</head>
<body>
    <div id='app'>
        {{show_my_text}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show_my_text: 'Vue.js is the best one page App!'
            }
        })
    </script>
</body>
</html>

首先你需要注意Vue的开头大写，然后因为我们引用的是官方的最新Vue.js，里面有个坑：书中原文的代码是：

<div id='app'>
        
    </div>

在浏览器运行你会发现：“Vue.js is the best one page App!”这句话跑哪去了？？？

书中代码赏析：[有钱记得购买支持作者一下]

Vue的框架模式是：MVVM>>>>>>Model-View-ModelView【传统的是MVC>>>>Model-View-Controller】

什么是MVC？

模型(Model)，用于存储程序中使用到的数据;视图(View)，用不同的表现形式来呈现数据；控制器(Controller)，更新模型。

它由如下三部分组成：

模型（Model） -“数据模型”（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。 “模型”有对数据直接访问的权力。 “模型”不依赖“视图”和“控制器”，也就是说，模型不关心它会被如何显示或是如何被操作。
视图（View） - 视图层能够实现数据有目的的显示，通常是一个用户界面元素。在视图中一般没有程序上的逻辑。在 Web 应用程序中的 MVC，通常把显示动态数据的 html 页面称为视图。
控制器（Controller） - 处理和响应事件，通常是用户操作，并监控模型上的变化，然后去修改视图。

点这读懂:MVC与MVVM的区别

代码剖析

在我们这个例子中：

    <div id='app'>
        {{show_my_text}}
    </div>

就是视图层-View，

new Vue({
            el: '#app',
            data: {
                show_my_text: 'Vue.js is the best one page App!'
            }
        })

就是模型层/数据层-Model。

Vue对象解析

Vue对象里面有四个常用的属性：el、data、methods、components。

el:声明vuejs管理的边界，类似于angular的ng-app，把数据绑定给谁。上面的例子中将数据绑定给了#app。
data:专门存储一些数据的属性，数据一定是对象格式。上面的例子中将Vue.js is the best one page App!赋值给show_my_text。
methods:专门放置我们的事件的方法
components:创建组件

回到上面的例子el指定了#app，data存放了数据show_my_text，然后利用表达式{{}}将数据显示到页面。

可能有错觉的地方：
1.show_my_text并不是某个固定的字符串，不信你可以试试把show_my_text改成别的>>>>text_message、show_text等等，你会发现能够正常工作哦。
2.Vue所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 Console 控制台 (F12打开)，修改 app.message 的值>>>app.show_my_text = '新消息啊'，你将看到上例相应地更新成了>>>>>‘新消息啊’。

摘自:

1.https://www.cnblogs.com/zhengjialux/p/5871980.html

假如上面的都理解了的话，不妨先看看官方的这个示例:TodoMVC — Vue.js ，直接120 行代码丢给你们理解，我也没想到书上突然进度这么快，但是都很基础，自行阅读代码吧。

-------------------------------------------------------------------------------------------------------------------

扩充

声明式渲染除了上面的文本插值，我们还可以像这样来绑定元素特性：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

鼠标悬停几秒钟查看此处动态绑定的提示信息！

这里我们看到的 v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

同样当你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。

摘自:介绍 — Vue.js

第二节知识点:Vue也有条件循环哦？

将代码再一次扩充>>>>创建app3，如下:

<body>
    <div id='app'>
        {{show_my_text}}
    </div>
    <div id="app-2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <div id="app-3">
        <p v-if="seen">现在你看到第三个Vue对象了</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show_my_text: '第一个Vue对象!'
            }
        })
        var app2 =new Vue({
            el: '#app-2',
            data: {
                message: '第二个Vue对象>>>>>页面加载中' + new Date().toLocaleDateString()
            }
        })
        var app3 =new Vue({
            el: '#app-3',
            data: {
                seen: true
            }
        })
    </script>
</body>

结果如图>>其中seen也不是固定的，我试了改成:show_status照旧显示，因此>>推测可能data里面的仅仅只是个字典的key？

既然拥有if的话，应该还有for啦。

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '第四个Vue对象' }
    ]
  }
})

结果图：

我们依旧可以在Console上编辑它：

图一是输入app4.todos.pop()，图二是输入 app4.todos.push({ text: '新项目' })。【出栈和入栈】

第三节知识点:按钮与方法

在这里我们创建了一个按钮用于进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

为了便于阅读，将之前的代码收缩>>>

效果图；

第四节知识点：输入框与标签内容绑定

代码+效果图:

Vue 提供的 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定，因此标签p和输入框内容都是message，当输入框内容为空，也就是标签p的内容木有了时标签会自动隐藏起来。

第五节知识点:组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树，在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。在后续教程中我们将详述组件，不过这里有一个 (假想的) 例子，以展示使用了组件的应用模板是什么样的：

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

与自定义元素的关系

你可能已经注意到 Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，还是有几个关键差别：

Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。

qq_36114959

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端的起步【vue系列】-第一天：vue的第一次

文章参考>>>>>> 官方文档 + 书籍:《Vue.js快速入门》，切记，得有HTML、JS、CSS的基本基础，总不能你一点都不懂，直接干框架吧。目录第一章第二章第一节知识点:声明式渲染什么是MVC？点这读懂:MVC与MVVM的区别代码剖析Vue对象解析扩充第二节知识点:Vue也有条件循环哦？第三节知识点:按钮与方...
复制链接

扫一扫

专栏目录