Vue学习——入门篇

最新推荐文章于 2024-05-29 12:00:00 发布

writeBig

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量580

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_51061370/article/details/125767891

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识Vue

1.Vue简介
2.快速开始
- - 结果展示：
3.模板语法
4.el和data的两种写法
5.总结

1.Vue简介

Vue.js是一款流行的JavaScript前端框架，是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架，Vue的作者是尤雨溪，Vue项目在github上有31.3k的Star，很多的开发者都在上面贡献代码，共同维护Vue的生态环境

在github上给Vue贡献代码的开发者

2.快速开始

对于初学者来说，快速上手Vue是一件很简单的事，前提是已经掌握html，css，js的内容，对于前端小白来说，Vue并不适合入门课程。如果之前已经掌握了其他框架的知识，相信一定会对你有帮助。现在来看一个简单的Vue实例：

<div class="root">
	<h1>hello {{name}}， {{address}} {{Date.now()}} {{1+1}}</h1>
</div>

 <script type="text/javascript">
        Vue.config.productionTip = false;   //阻止vue在启动时生成生产提示
        //创建一个实例
        const x = new Vue({
            el:'.root',
            data:{
                name:'张三',
                address:'北京'
            }

        });

    </script>

结果展示：

Vue实例
上面的例子展示了Vue的两个核心功能：声明式渲染和响应性：
声明式渲染：Vue 通过自己的模板语法扩展了标准 HTML，使得我们可以声明式地描述基于 JavaScript 状态输出的 HTML。

响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。

3.模板语法

什么是模板语法：Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法上合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

文本插值：

<div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>   
        <hr/>
        <h1>指令语法</h1>
        <!-- v-bind url变成一个表达式，读取url的值 -->
        <a v-bind:href="url.toUpperCase()">学习</a> 
         <!--v-bind简写成 :  -->
        <a :href="url">学习2</a>        
    </div>

双大括号标签会被替换为相应组件实例中name 的值。同时每次name 更改时它也会同步更新。

<!-- v-bind url变成一个表达式，读取url的值 -->
<a v-bind:href="url.toUpperCase()">学习</a>
<a :href="url.toUpperCase()">学习</a>

这里看到的 v-bind被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊属性，它们将为渲染的 DOM 应用特殊的响应式行为。

MVVM模型：MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当下流行的MVVM框架有：Vue.js、AngularJS。

M：模型(Model)：对应data中的数据
V：视图(View)：模板
VM：视图模型(ViewModel)：Vue实例对象

4.el和data的两种写法

      const v = new Vue({
            el: '#root',        //第一中写法
            data: {
                name: '张三'
            }
        });
        console.log(v);
        v.$mount('#root')           //第二中写法